Alignment within Auto Layout in Figma - Step-by-Step Guide

Introduction

Alignment within Auto Layout helps you arrange items neatly inside a frame. It solves the problem of uneven spacing and messy layouts by automatically positioning elements based on your chosen alignment settings.

When you want to center buttons evenly inside a toolbar.

When you need to align text and icons consistently in a dashboard panel.

When arranging cards or tiles so they line up perfectly in rows or columns.

When you want to space out menu items evenly without manual adjustments.

When resizing a container and you want the child elements to stay aligned properly.

Steps

Step 1: Select the frame that uses Auto Layout

- Layers panel or canvas

The frame is highlighted and its properties appear in the right sidebar

Step 2: Click the alignment icons under the 'Auto Layout' section

- Right sidebar under Auto Layout settings

The child elements inside the frame realign according to the chosen alignment (left, center, right for horizontal; top, center, bottom for vertical)

Step 3: Adjust the padding and spacing values if needed

- Right sidebar under Auto Layout settings

The space around and between child elements updates, maintaining the alignment

Step 4: Resize the frame by dragging its edges

- Canvas

Child elements stay aligned as per the Auto Layout alignment settings while the frame size changes

Before vs After

Before

A frame with three buttons aligned unevenly and overlapping when resized

After

The same frame with buttons evenly spaced and aligned center horizontally, maintaining layout when resized

Settings Reference

Horizontal alignment

📍 Right sidebar > Auto Layout section

Controls how child elements align horizontally inside the Auto Layout frame

Default: Left

Vertical alignment

📍 Right sidebar > Auto Layout section

Controls how child elements align vertically inside the Auto Layout frame

Default: Top

Padding

📍 Right sidebar > Auto Layout section

Adds space inside the frame edges around the child elements

Default: 0 px

Spacing between items

📍 Right sidebar > Auto Layout section

Sets the space between each child element inside the frame

Default: 0 px

Common Mistakes

Not selecting the Auto Layout frame before changing alignment

Alignment options only apply to frames with Auto Layout enabled

Always select the frame that has Auto Layout before adjusting alignment settings

Using manual positioning inside an Auto Layout frame

Manual moves are overridden by Auto Layout and cause confusion

Use padding and spacing settings to control layout instead of dragging child elements

Summary

Alignment within Auto Layout arranges child elements neatly inside frames automatically.

You can control horizontal and vertical alignment plus spacing and padding.

Remember to select the Auto Layout frame before changing alignment settings.

Practice

1. In Figma's Auto Layout, what does the alignment property control?

easy

A. The color of the items inside the container

B. The font size of text inside the container

C. How items line up inside the Auto Layout container

D. The number of items inside the container

Solution

1. Step 1: Understand Auto Layout container behavior

   Auto Layout arranges items automatically inside a frame or group.

2. Step 2: Identify the role of alignment

   The alignment property controls how these items line up horizontally or vertically within that container.

3. Final Answer:

   How items line up inside the Auto Layout container -> Option C

4. Quick Check:

   Alignment = Items lining up [OK]

Hint: Alignment means how items line up inside the container [OK]

Common Mistakes:

• Confusing alignment with color or font size
• Thinking alignment changes item count
• Mixing alignment with padding or spacing

2. Which of the following is the correct way to set vertical alignment to center in Figma's Auto Layout?

easy

A. alignItems: 'center'

B. verticalAlign: 'middle'

C. alignment: 'center'

D. justifyContent: 'center'

Solution

1. Step 1: Recall Figma Auto Layout properties

   Figma uses alignItems to control vertical alignment in vertical layouts.

2. Step 2: Identify correct syntax

   alignItems: 'center' is the correct property-value pair to center items vertically.

3. Final Answer:

   alignItems: 'center' -> Option A

4. Quick Check:

   Vertical center alignment = alignItems: 'center' [OK]

Hint: Use alignItems for vertical alignment in Auto Layout [OK]

Common Mistakes:

• Using justifyContent instead of alignItems for vertical alignment
• Using non-existent property verticalAlign
• Using generic alignment property not supported in Figma

3. Given an Auto Layout frame with horizontal direction and alignItems: 'start', where will the child items be aligned vertically?

medium

A. Stretched to fill container height

B. At the bottom of the container

C. Centered vertically

D. At the top of the container

Solution

1. Step 1: Understand horizontal Auto Layout direction

   In horizontal direction, alignItems controls vertical alignment of children.

2. Step 2: Interpret alignItems: 'start'

   This means children align at the top edge of the container vertically.

3. Final Answer:

   At the top of the container -> Option D

4. Quick Check:

   Horizontal layout + alignItems: 'start' = top alignment [OK]

Hint: In horizontal layout, alignItems 'start' means top alignment [OK]

Common Mistakes:

• Confusing 'start' with bottom alignment
• Mixing justifyContent with alignItems effects
• Assuming 'start' means centered

4. You set an Auto Layout frame with vertical direction and justifyContent: 'center', but items are still aligned at the top. What is the likely mistake?

medium

A. Using justifyContent instead of alignItems for vertical alignment

B. Not setting the frame height to allow centering

C. Using horizontal direction instead of vertical

D. Forgetting to add padding inside the frame

Solution

1. Step 1: Understand justifyContent in vertical Auto Layout

   In vertical direction, justifyContent controls vertical distribution of items.

2. Step 2: Check container size effect

   If the frame height fits items exactly, centering won't show because no extra space exists.

3. Final Answer:

   Not setting the frame height to allow centering -> Option B

4. Quick Check:

   Frame height too small blocks justifyContent centering [OK]

Hint: Ensure container has extra space to see justifyContent effects [OK]

Common Mistakes:

• Confusing justifyContent with alignItems
• Ignoring container size constraints
• Assuming padding affects alignment directly

5. You want to create a horizontal Auto Layout with three buttons spaced evenly and vertically centered. Which combination of properties achieves this?

hard

A. direction: 'horizontal', justifyContent: 'space-between', alignItems: 'center'

B. direction: 'vertical', justifyContent: 'center', alignItems: 'start'

C. direction: 'horizontal', justifyContent: 'center', alignItems: 'start'

D. direction: 'horizontal', justifyContent: 'space-around', alignItems: 'stretch'

Solution

1. Step 1: Set horizontal direction for buttons

   Buttons arranged side by side require direction: 'horizontal'.

2. Step 2: Space buttons evenly and center vertically

   justifyContent: 'space-between' spaces buttons evenly horizontally, and alignItems: 'center' centers them vertically.

3. Final Answer:

   direction: 'horizontal', justifyContent: 'space-between', alignItems: 'center' -> Option A

4. Quick Check:

   Horizontal + spaced evenly + vertical center = direction: 'horizontal', justifyContent: 'space-between', alignItems: 'center' [OK]

Hint: Use space-between and alignItems center for horizontal even spacing [OK]

Common Mistakes:

• Using vertical direction for horizontal layout
• Aligning items to start instead of center vertically
• Using justifyContent center instead of space-between for spacing