Alignment within Auto Layout in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Alignment Options in Auto Layout

In Figma's Auto Layout, which alignment option will place child elements evenly spaced with equal gaps between them horizontally?

A Space Between

B Center

C Left

D Right

💡 Hint

Think about how to distribute space evenly between items, not just align them to one side.

The 'Space Between' alignment distributes child elements so that the first and last items align with the container edges, and the space between all items is equal.

❓ visualization

intermediate

Visualizing Vertical Alignment in Auto Layout

You have a vertical Auto Layout frame with three text boxes of different heights. Which vertical alignment setting will align all text boxes to the bottom edge of the frame?

A Top

B Bottom

C Center

D Space Between

💡 Hint

Consider which alignment moves all items to the bottom edge inside the frame.

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

❓ data_modeling

advanced

Combining Padding and Alignment in Auto Layout

You want to create a horizontal Auto Layout frame with three buttons. The frame should have 20px padding on all sides, and the buttons should be aligned center vertically with equal space around them horizontally. Which combination of Auto Layout settings achieves this?

A Padding: 20px all sides; Alignment: Center; Distribution: Space Around

B Padding: 20px all sides; Alignment: Top; Distribution: Space Between

C Padding: 10px all sides; Alignment: Center; Distribution: Packed

D Padding: 20px horizontal only; Alignment: Center; Distribution: Space Between

💡 Hint

Think about padding on all sides and how 'Space Around' distributes space evenly around items.

Setting 20px padding on all sides ensures space inside the frame edges. 'Center' alignment vertically centers the buttons. 'Space Around' distributes equal space around each button horizontally.

🔧 Formula Fix

advanced

Fixing Misaligned Items in Auto Layout

You created a vertical Auto Layout frame with three icons. You set vertical alignment to 'Center' but the icons appear aligned to the top. What is the most likely cause?

A The padding is set to zero

B The icons have different widths

C The frame height is fixed and smaller than the combined icons height

D The distribution is set to 'Space Between'

💡 Hint

Think about how fixed frame size affects alignment inside Auto Layout.

If the frame height is fixed and smaller than the total height of the icons, the icons cannot center vertically and will appear aligned to the top.

🎯 Scenario

expert

Designing a Responsive Navigation Bar with Auto Layout

You need to design a horizontal navigation bar in Figma that adapts to different screen widths. The bar contains a logo on the left, navigation links in the center spaced evenly, and a user icon on the right. Which Auto Layout settings and frame structure best achieve this responsive design?

A Create a horizontal Auto Layout frame with all items directly inside; set alignment to 'Center' and distribution to 'Packed'; set fixed width frame.

B Create a horizontal Auto Layout frame with logo and user icon inside; place links outside the frame; set frame width fixed.

C Create a vertical Auto Layout frame with logo, links, and user icon stacked; set alignment to 'Left'; set frame width fixed.

D Create a horizontal Auto Layout frame with three child frames: logo (left aligned), links (horizontal Auto Layout with 'Space Between'), user icon (right aligned); set frame width to 'Fill container'.

💡 Hint

Consider how nested Auto Layout frames and 'Fill container' width help with responsiveness.

Using a horizontal Auto Layout frame with three child frames allows independent alignment. The links frame uses 'Space Between' to evenly space links. Setting the main frame width to 'Fill container' makes it responsive to screen size.

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