Adding Auto Layout to frames in Figma - Dashboard Guide

Dashboard Mode - Adding Auto Layout to frames

Goal

Understand how to use Auto Layout in Figma frames to create responsive dashboard components that adjust automatically when content or screen size changes.

Sample Data

Region	Sales Q1	Sales Q2	Sales Q3	Sales Q4
North	100	150	130	170
South	90	120	110	140
East	80	100	90	130
West	70	110	100	120
Central	60	90	80	110

Dashboard Components

• KPI Card: Total Sales
  Formula: Sum of all sales across all regions and quarters = 100+150+130+170+90+120+110+140+80+100+90+130+70+110+100+120+60+90+80+110 = 2150
• Bar Chart: Sales by Region for Q4
  Shows sales values for each region in Q4 from the sample data.
• Table: Sales Data Table
  Displays the raw sales data for all regions and quarters as shown in the sample data.
• Auto Layout Frame: The KPI card and Bar Chart are placed inside a vertical Auto Layout frame with spacing 20px and padding 16px. This frame automatically adjusts spacing and alignment when resized.
• Outer Auto Layout Frame: Contains the vertical frame (KPI + Bar Chart) and the Sales Data Table side by side with horizontal Auto Layout, spacing 24px, and padding 24px. This frame ensures the dashboard components adjust horizontally on screen resize.

Dashboard Layout

+----------------------------------------------------+
| +----------------------+  +---------------------+ |
| |      KPI Card        |  |   Sales Data Table   | |
| |  Total Sales: 2150   |  |  Region | Q1 | Q2 | Q3 | Q4 | |
| |                      |  |  North  |100 |150 |130 |170 | |
| +----------------------+  |  South  | 90 |120 |110 |140 | |
| +----------------------+  |  East   | 80 |100 | 90 |130 | |
| |     Bar Chart        |  |  West   | 70 |110 |100 |120 | |
| |  Sales by Region Q4  |  | Central | 60 | 90 | 80 |110 | |
| +----------------------+  +---------------------+ |
+----------------------------------------------------+

Interactivity

Adding a filter for Region will update the Bar Chart and Sales Data Table to show only the selected region's data. The KPI Card will update total sales to reflect the filtered data. The Auto Layout frames will automatically adjust their size and spacing to fit the filtered content.

Self Check

If you add a filter for Region = East, which components update?

• The KPI Card updates to show total sales for East region only (80+100+90+130 = 400).
• The Bar Chart updates to show only East region sales for Q4 (130).
• The Sales Data Table updates to show only the East region row.
• The Auto Layout frames adjust their size and spacing to fit the filtered components.

Key Result

A responsive sales dashboard using Figma Auto Layout frames showing total sales, sales by region chart, and detailed sales data table.