Alignment within Auto Layout in Figma - Dashboard Guide

Dashboard Mode - Alignment within Auto Layout

Dashboard Goal

Understand how to align elements inside an Auto Layout frame in Figma to create clean, organized BI dashboards.

Sample Data

Region	Sales	Profit
North	100	30
South	150	50
East	200	70
West	130	40
Central	170	60

Dashboard Components

• KPI Card - Total Sales: Displays sum of sales (100+150+200+130+170 = 750). Aligned center horizontally and vertically inside Auto Layout frame.
• KPI Card - Total Profit: Displays sum of profit (30+50+70+40+60 = 250). Aligned center horizontally and vertically.
• Bar Chart - Sales by Region: Horizontal bar chart showing sales per region. Aligned stretch horizontally to fill container width.
• Table - Detailed Data: Shows all rows of sample data. Aligned stretch horizontally and vertically to fill remaining space.

Alignment Settings Used:
- Horizontal alignment: center for KPI cards, stretch for chart and table.
- Vertical alignment: center for KPI cards, stretch for chart and table.
- Spacing between items: 16px.
- Padding inside Auto Layout frame: 24px.

Dashboard Layout

+--------------------------------------------------+
|                    Auto Layout Frame             |
|  +----------------+  +----------------+          |
|  |  Total Sales   |  |  Total Profit  |          |
|  |    (Center)    |  |    (Center)    |          |
|  +----------------+  +----------------+          |
|                                                  |
|  +--------------------------------------------+  |
|  |          Bar Chart - Sales by Region       |  |
|  |               (Stretch width)              |  |
|  +--------------------------------------------+  |
|                                                  |
|  +--------------------------------------------+  |
|  |           Table - Detailed Data             |  |
|  |               (Stretch width & height)     |  |
|  +--------------------------------------------+  |
+--------------------------------------------------+

Interactivity

Filters like Region selector update the Bar Chart and Table components dynamically. KPI cards recalculate totals based on filtered data. Alignment remains consistent as Auto Layout adjusts spacing and sizing automatically.

Self Check

Add a filter for Region = 'East'. Which components update?

• Bar Chart updates to show sales only for East (200).
• Table updates to show only East row.
• KPI Cards update totals: Sales = 200, Profit = 70.
• Alignment remains centered for KPI cards and stretched for chart and table.

Key Result

Dashboard demonstrating how to align KPI cards, charts, and tables inside a Figma Auto Layout frame for BI dashboards.