Alignment within Auto Layout in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Auto Layout in Figma?

Auto Layout is a feature in Figma that lets you create frames that automatically adjust the position and size of their child elements based on rules you set, like spacing and alignment.

beginner

How does horizontal alignment work within Auto Layout?

Horizontal alignment controls how child elements are positioned side-by-side inside an Auto Layout frame. You can align items to the left, center, or right horizontally.

beginner

What are the vertical alignment options in Auto Layout?

Vertical alignment options let you position child elements at the top, center, or bottom inside an Auto Layout frame.

beginner

Why is alignment important in Auto Layout?

Alignment ensures that elements look organized and balanced. It helps create clean, easy-to-read designs that adapt well when content or screen size changes.

beginner

How can you change alignment settings in Figma's Auto Layout?

You select the Auto Layout frame, then use the alignment controls in the right sidebar to choose horizontal and vertical alignment options for the child elements.

In Figma Auto Layout, which alignment option places child elements in the center horizontally?

A Left

B Justify

C Center

D Right

Center alignment places child elements in the middle horizontally within the Auto Layout frame.

What happens if you set vertical alignment to 'Bottom' in a vertical Auto Layout frame?

A Child elements align at the top

B Child elements spread evenly

C Child elements overlap

D Child elements align at the bottom

Setting vertical alignment to 'Bottom' aligns all child elements at the bottom edge of the Auto Layout frame.

Which of these is NOT a valid alignment option in Figma Auto Layout?

A Diagonal

B Center

C Left

D Right

'Diagonal' is not an alignment option in Figma Auto Layout.

How do you access alignment controls for Auto Layout in Figma?

A Top menu bar

B Right sidebar when Auto Layout frame is selected

C Context menu on right-click

D Bottom toolbar

Alignment controls appear in the right sidebar when you select an Auto Layout frame.

Why should you use alignment in Auto Layout?

A To create balanced and organized designs

B To randomly place elements

C To make elements overlap

D To disable resizing

Alignment helps create balanced, organized designs that adapt well to changes.

Explain how horizontal and vertical alignment work within Figma's Auto Layout.

Think about how elements line up inside a container.

Describe why alignment is important when designing with Auto Layout in Figma.

Consider the look and feel of a neat versus messy design.

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