Adding Auto Layout to frames in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a dashboard for a sales team.

📋 Request: Your manager wants the dashboard frames to automatically adjust spacing and alignment when new elements are added or resized.

📊 Data: You have several frames containing text labels, charts, and buttons arranged manually without consistent spacing.

🎯 Deliverable: Apply Auto Layout to these frames so that the elements inside align properly with consistent spacing and adapt automatically when changed.

Sample Data

Frame Name	Elements Inside	Current Layout
Sales Summary	Title Text, Total Sales Number, Date Filter Button	Manually positioned with uneven spacing
Monthly Chart	Bar Chart, Legend	Elements stacked but not aligned or spaced evenly
Filters Panel	Region Dropdown, Product Dropdown, Apply Button	Elements placed side by side with inconsistent gaps

1

Step 1: Select the 'Sales Summary' frame in Figma.

In the right sidebar, click 'Add Auto Layout' button.

Expected Result

The frame now shows a vertical stack with default spacing between elements.

2

Step 2: Adjust the Auto Layout properties for 'Sales Summary' frame.

Set direction to vertical, spacing between items to 16px, and padding around frame to 24px.

Expected Result

Elements inside the frame are evenly spaced vertically with consistent padding around.

3

Step 3: Select the 'Monthly Chart' frame.

Add Auto Layout and set direction to horizontal, spacing between items to 12px.

Expected Result

Bar Chart and Legend align side by side with equal spacing.

4

Step 4: Select the 'Filters Panel' frame.

Add Auto Layout, set direction to horizontal, spacing to 20px, and vertical alignment to center.

Expected Result

Dropdowns and button align horizontally with equal gaps and vertically centered.

5

Step 5: Test the Auto Layout by resizing or adding elements inside frames.

Add a new filter dropdown inside 'Filters Panel' frame.

Expected Result

The new dropdown appears with consistent spacing automatically without manual repositioning.

Final Result

Bar Chart

↓

Region

✓Auto Layout ensures consistent spacing and alignment inside frames.

✓Adding or resizing elements automatically adjusts layout without manual work.

✓Frames become flexible and easier to maintain for future dashboard updates.

Bonus Challenge

Create a nested Auto Layout by adding a vertical stack inside the 'Filters Panel' horizontal layout to group related filters.

Show Hint

Select the related filter elements, group them, then apply Auto Layout vertically inside the horizontal 'Filters Panel' frame.