Dashboard Mode - Grid styles
Dashboard Goal
Understand how to use grid styles in Figma to create clean, organized BI dashboards that align visuals and text for easy reading.
0
0
Grid styles in Figma - Dashboard Guide
Sample Data
| Region | Product | Sales | Month |
|---|---|---|---|
| North | Widget A | 100 | Jan |
| South | Widget B | 150 | Jan |
| East | Widget A | 200 | Feb |
| West | Widget C | 250 | Feb |
| North | Widget B | 300 | Mar |
| South | Widget C | 350 | Mar |
Dashboard Components
- KPI Card: Total Sales
Shows the sum of all sales from the data.
Formula: SUM(Sales) = 100 + 150 + 200 + 250 + 300 + 350 = 1350 - Bar Chart: Sales by Region
Displays total sales grouped by region.
Data aggregation: North=400, South=500, East=200, West=250 - Table: Sales Details
Shows raw data rows for detailed view. - Grid Style: 12-column grid with 16px gutters
Aligns KPI card, chart, and table neatly with consistent spacing and margins.
Dashboard Layout
+--------------------------------------------------+ | KPI Card (Total Sales) | +----------------------+---------------------------+ | Bar Chart (Sales by Region) | | | | | +----------------------+---------------------------+ | Table (Sales Details) | | | | | +--------------------------------------------------+
Interactivity
Adding a filter for Month updates the Bar Chart and Table to show sales only for the selected month. The KPI Card updates its total sales accordingly.
Self Check
If you add a filter for Region = South, which components update and what changes occur?
- KPI Card: Total Sales changes to 150 + 350 = 500
- Bar Chart: Only shows South region bar with value 500
- Table: Shows only rows where Region is South
Key Result
A BI dashboard in Figma using a 12-column grid style to align KPI card, bar chart, and data table for clear sales analysis by region and month.