Why Auto Layout creates responsive designs in Figma - Business Case Study

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a new company website.

📋 Request: Your manager wants a design that looks good on different screen sizes without manually adjusting each element.

📊 Data: You have a Figma file with frames, text, buttons, and images arranged in a simple layout.

🎯 Deliverable: Create a Figma design using Auto Layout that automatically adjusts elements when the frame size changes.

Sample Data

Element	Type	Width (px)	Height (px)	Position
Header	Frame	800	100	Top
Logo	Image	100	50	Left inside Header
Navigation	Text	600	50	Center inside Header
Button	Button	100	40	Right inside Header
Content	Frame	800	400	Below Header
Image	Image	400	300	Left inside Content
Text Block	Text	380	300	Right inside Content

1

Step 1: Select the Header frame and apply Auto Layout with horizontal direction and space between items.

In Figma, select Header frame > Click 'Auto Layout' > Set direction to horizontal > Set spacing mode to 'Space Between'.

Expected Result

Header elements (Logo, Navigation, Button) align horizontally with space between them.

2

Step 2: Select the Content frame and apply Auto Layout with horizontal direction and fixed spacing between Image and Text Block.

Select Content frame > Click 'Auto Layout' > Set direction to horizontal > Set spacing to 20px.

Expected Result

Image and Text Block sit side by side with 20px space between.

3

Step 3: Set resizing behavior for Header elements: Logo and Button fixed size, Navigation fills remaining space.

Select Logo and Button > Set width to fixed. Select Navigation > Set width to 'Fill container'.

Expected Result

Navigation text expands or shrinks as Header width changes, Logo and Button keep size.

4

Step 4: Set resizing behavior for Content elements: Image fixed size, Text Block fills remaining space.

Select Image > Set width fixed. Select Text Block > Set width to 'Fill container'.

Expected Result

Text Block adjusts width when Content frame resizes, Image stays same size.

5

Step 5: Resize the main frame width to test responsiveness.

Drag the main frame edges horizontally in Figma to smaller and larger widths.

Expected Result

Header and Content elements adjust automatically: Navigation and Text Block resize, others stay fixed.

Final Result

-----------------------------------------
| Logo |       Navigation       | Button |
-----------------------------------------
| Image |               Text Block              |
-----------------------------------------

(Elements adjust width automatically when frame resizes)

✓Auto Layout arranges elements in a row or column with defined spacing.

✓Setting 'Fill container' for some elements makes them resize with the frame.

✓Fixed size elements keep their size, creating balance.

✓This combination creates a responsive design that adapts to different screen widths.

Bonus Challenge

Add vertical Auto Layout to the entire page to stack Header and Content with consistent spacing and test responsiveness.

Show Hint

Select the main frame containing Header and Content > Apply Auto Layout with vertical direction > Set spacing between Header and Content.

Practice

1. What is the main reason Auto Layout helps create responsive designs in Figma?

easy

A. It only works with text elements, not shapes or images.

B. It automatically adjusts elements based on screen size changes.

C. It requires manual resizing of each element for different screens.

D. It locks elements in fixed positions regardless of screen size.

Solution

1. Step 1: Understand Auto Layout behavior

   Auto Layout arranges elements automatically based on rules, allowing them to adjust when screen size changes.

2. Step 2: Compare options with this behavior

   Only It automatically adjusts elements based on screen size changes. describes automatic adjustment; others describe fixed or manual layouts.

3. Final Answer:

   It automatically adjusts elements based on screen size changes. -> Option B

4. Quick Check:

   Auto Layout = automatic adjustment [OK]

Hint: Auto Layout means automatic adjustment, not fixed positions [OK]

Common Mistakes:

• Thinking Auto Layout fixes elements in place
• Assuming manual resizing is needed for responsiveness
• Believing Auto Layout only works with text

2. Which of the following is the correct way to enable Auto Layout on a frame in Figma?

easy

A. Drag elements outside the frame to activate Auto Layout.

B. Double-click the frame and press Ctrl+L.

C. Right-click the frame and select 'Add Auto Layout'.

D. Select the frame and click the '+' button next to 'Auto Layout' in the right panel.

Solution

1. Step 1: Recall how to enable Auto Layout

   In Figma, Auto Layout is enabled by selecting a frame and clicking the '+' button next to 'Auto Layout' in the right properties panel.

2. Step 2: Evaluate each option

   Select the frame and click the '+' button next to 'Auto Layout' in the right panel. matches the correct method; others describe incorrect or non-existent actions.

3. Final Answer:

   Select the frame and click the '+' button next to 'Auto Layout' in the right panel. -> Option D

4. Quick Check:

   Enable Auto Layout = '+' button in right panel [OK]

Hint: Look for '+' next to 'Auto Layout' in the right panel [OK]

Common Mistakes:

• Trying to enable Auto Layout via right-click menu
• Using keyboard shortcuts that don't exist
• Dragging elements outside frame to activate Auto Layout

3. Given a frame with Auto Layout set to 'Horizontal' and spacing of 10px between items, what happens when the frame width shrinks smaller than the total width of items?

medium

A. Items shrink or grow based on their resizing settings.

B. Items overlap each other inside the frame.

C. Items wrap to the next line automatically.

D. The frame expands automatically to fit all items.

Solution

1. Step 1: Understand Auto Layout resizing behavior

   When the frame shrinks, items inside adjust their size if resizing is set to 'Fill container' or 'Hug contents'. They do not overlap or wrap by default.

2. Step 2: Analyze options

   Items shrink or grow based on their resizing settings. correctly describes items resizing based on settings. Items do not overlap, wrap to the next line automatically, or cause the frame to expand.

3. Final Answer:

   Items shrink or grow based on their resizing settings. -> Option A

4. Quick Check:

   Auto Layout resizing = items adjust size [OK]

Hint: Items resize if set; no overlap or wrap by default [OK]

Common Mistakes:

• Assuming items overlap when frame shrinks
• Thinking Auto Layout wraps items automatically
• Believing frame always expands to fit content

4. You applied Auto Layout to a vertical frame, but the items do not space evenly when resizing the frame. What is the most likely cause?

medium

A. Auto Layout is set to horizontal instead of vertical.

B. The frame's padding is set to zero.

C. Items have fixed heights and do not stretch.

D. The frame is not selected before applying Auto Layout.

Solution

1. Step 1: Identify why items don't space evenly

   In vertical Auto Layout, items must have flexible height settings to stretch evenly when the frame resizes.

2. Step 2: Check options for this cause

   Items have fixed heights and do not stretch. states items have fixed heights, preventing even spacing. Other options do not explain uneven spacing correctly.

3. Final Answer:

   Items have fixed heights and do not stretch. -> Option C

4. Quick Check:

   Fixed item size blocks even spacing [OK]

Hint: Check if items can stretch; fixed size blocks spacing [OK]

Common Mistakes:

• Ignoring item resizing settings
• Confusing frame padding with item spacing
• Not verifying Auto Layout direction

5. You want a button inside an Auto Layout frame to always stay centered horizontally and vertically, resizing smoothly on different screen sizes. Which combination of Auto Layout settings achieves this?

hard

A. Set frame to vertical Auto Layout with center alignment; set button resizing to 'Fill container'.

B. Set frame to horizontal Auto Layout with space between; set button resizing to fixed size.

C. Set frame to vertical Auto Layout with center alignment; set button resizing to 'Hug contents'.

D. Set frame to horizontal Auto Layout with left alignment; set button resizing to 'Fill container'.

Solution

1. Step 1: Understand centering in Auto Layout

   To center an item horizontally and vertically, the frame should have vertical Auto Layout with center alignment.

2. Step 2: Choose resizing for smooth resizing

   Setting the button to 'Fill container' allows it to resize smoothly within the frame.

3. Step 3: Evaluate options

   Set frame to vertical Auto Layout with center alignment; set button resizing to 'Fill container'. matches both correct frame and resizing settings for centered, responsive button.

4. Final Answer:

   Set frame to vertical Auto Layout with center alignment; set button resizing to 'Fill container'. -> Option A

5. Quick Check:

   Center + Fill container = responsive centered button [OK]

Hint: Center frame + Fill container resizing centers and resizes button [OK]

Common Mistakes:

• Using fixed size prevents resizing
• Wrong Auto Layout direction breaks centering
• Ignoring alignment settings in frame