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.