Nested Auto Layout in Figma - Dashboard Guide

Dashboard Mode - Nested Auto Layout

Dashboard Goal

Understand how to use nested auto layout in Figma to build a clean, responsive sales dashboard layout that adjusts automatically when content changes.

Sample Data

Region	Product	Sales	Month
North	Widget A	100	Jan
South	Widget B	150	Jan
East	Widget A	200	Feb
West	Widget C	130	Feb
North	Widget B	170	Mar
South	Widget C	120	Mar

Dashboard Components

• KPI Card - Total Sales: Displays total sales across all regions and months.
  Formula: Sum of Sales = 100 + 150 + 200 + 130 + 170 + 120 = 870
• Bar Chart - Sales by Region: Shows total sales per region.
  Calculations:
  • North: 100 + 170 = 270
  • South: 150 + 120 = 270
  • East: 200
  • West: 130
• Table - Sales Details: Lists each sale with Region, Product, Sales, and Month.

Figma Nested Auto Layout Structure:

• Outer vertical auto layout: stacks KPI card, bar chart, and table vertically with spacing.
• KPI card: horizontal auto layout with label and value aligned center.
• Bar chart container: vertical auto layout with chart title and chart frame.
• Table container: vertical auto layout with table title and table frame.

Dashboard Layout (ASCII Art)

+-----------------------------+
|        Total Sales KPI       |
|          [ 870 ]             |
+-----------------------------+
|        Sales by Region       |
|  +-----------------------+  |
|  | Bar Chart (4 bars)    |  |
|  +-----------------------+  |
+-----------------------------+
|        Sales Details         |
|  +-----------------------+  |
|  | Table (6 rows)        |  |
|  +-----------------------+  |
+-----------------------------+

Interactivity

Adding filters like Region or Month will update all components automatically because of nested auto layout:

• Filtering by Region updates the bar chart to show only selected regions.
• KPI card recalculates total sales for filtered data.
• Sales details table shows only filtered rows.

The nested auto layout ensures the dashboard resizes and reflows smoothly when filters change content size.

Self Check

If you add a filter for Month = Feb, which components update and how?

• KPI Card: Updates total sales to 200 + 130 = 330.
• Bar Chart: Shows sales only for East (200) and West (130).
• Sales Details Table: Shows only rows with Month = Feb (2 rows).

Key Result

A sales dashboard layout in Figma using nested auto layout to show total sales, sales by region bar chart, and detailed sales table that adjusts responsively.