Nested Auto Layout in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma.

📋 Request: Your manager wants a clean, responsive sales dashboard with sections that adjust automatically when data changes.

📊 Data: You have sales data summaries and KPIs to display in cards and charts.

🎯 Deliverable: Create a Figma dashboard using nested auto layout frames so the dashboard resizes nicely on different screen sizes.

Sample Data

Region	Month	Sales	Profit
North	Jan	12000	3000
North	Feb	15000	4000
South	Jan	10000	2500
South	Feb	13000	3500
East	Jan	9000	2000
East	Feb	11000	2800
West	Jan	14000	3700
West	Feb	16000	4200

1

Step 1: Create a main vertical auto layout frame to hold the entire dashboard.

In Figma, select Frame tool, draw a frame, then enable Auto Layout with vertical direction, spacing 20px, padding 24px all sides.

Expected Result

A vertical container that stacks child elements with space and padding.

2

Step 2: Inside the main frame, create a horizontal auto layout frame for KPI cards.

Add a new frame inside main frame, enable Auto Layout with horizontal direction, spacing 16px, padding 16px all sides.

Expected Result

A horizontal container that arranges KPI cards side by side with spacing.

3

Step 3: Create individual KPI card frames inside the horizontal frame, each with vertical auto layout.

For each KPI card, create a frame, enable Auto Layout vertical, spacing 8px, padding 12px, fixed width 150px.

Expected Result

Cards stack their text and numbers vertically and have consistent width.

4

Step 4: Add text layers inside each KPI card for title and value.

Inside each KPI card frame, add two text layers: one for KPI name (e.g., 'Total Sales'), one for value (e.g., '$100,000').

Expected Result

Each card shows a title and a value stacked vertically.

5

Step 5: Below KPI cards, create a horizontal auto layout frame for charts section.

Add a new frame inside main frame, enable Auto Layout horizontal, spacing 24px, padding 16px all sides.

Expected Result

A horizontal container to hold multiple charts side by side.

6

Step 6: Inside charts frame, create individual chart frames with vertical auto layout.

Each chart frame uses vertical auto layout, spacing 12px, padding 16px, fixed width 300px.

Expected Result

Charts stack their title and chart image vertically with consistent width.

7

Step 7: Add text for chart titles and placeholder rectangles for charts inside each chart frame.

Inside each chart frame, add a text layer for title and a rectangle shape for chart area.

Expected Result

Each chart frame shows a title above a chart placeholder.

8

Step 8: Test resizing the main frame width to see nested auto layouts adjust content spacing and alignment automatically.

Select main frame and drag width smaller and larger.

Expected Result

KPI cards and charts rearrange or keep spacing without overlap, maintaining a clean layout.

Final Result

Dashboard Frame (Vertical Auto Layout)
├─ KPI Cards Frame (Horizontal Auto Layout)
│  ├─ KPI Card 1 (Vertical Auto Layout)
│  │   ├─ Text: Total Sales
│  │   └─ Text: $100,000
│  ├─ KPI Card 2
│  └─ KPI Card 3
└─ Charts Frame (Horizontal Auto Layout)
   ├─ Chart 1 Frame (Vertical Auto Layout)
   │   ├─ Text: Sales by Region
   │   └─ Rectangle: Chart Placeholder
   └─ Chart 2 Frame
       ├─ Text: Profit Trends
       └─ Rectangle: Chart Placeholder

✓Nested auto layouts let you build flexible dashboard sections that adjust automatically.

✓Vertical and horizontal auto layouts combined create clean, organized UI.

✓Padding and spacing settings control consistent gaps between elements.

✓Fixed widths on cards and charts keep uniform sizes while allowing overall frame resizing.

Bonus Challenge

Add a responsive navigation bar at the top using nested auto layouts that collapse into a hamburger menu on narrow widths.

Show Hint

Use horizontal auto layout for nav items and add a toggle button frame that appears only on small widths.