Responsive grid systems in Figma - Dashboard Guide

Dashboard Mode - Responsive grid systems

Dashboard Goal

Understand how to build a responsive grid system in Figma for BI dashboards that adapts to different screen sizes.

Sample Data

Region	Product	Sales Q1	Sales Q2	Sales Q3	Sales Q4
North	Widget A	100	150	130	170
South	Widget B	200	210	190	220
East	Widget C	300	310	320	330
West	Widget D	400	420	410	430
Central	Widget E	250	260	270	280

Dashboard Components

• KPI Cards: Show total sales per region with sum of all quarters. Formula: Total Sales = Sales Q1 + Sales Q2 + Sales Q3 + Sales Q4
• Bar Chart: Compare total sales by product across regions. Uses total sales calculated above.
• Line Chart: Show sales trend over quarters for selected region.
• Filter Panel: Dropdown to select region, updates charts and KPI cards.

Dashboard Layout

+--------------------------------------------------+
| Filter Panel             | KPI Cards (5 cards)    |
| (1 column wide)          | (3 columns wide)       |
+-------------------------+------------------------+
| Bar Chart (full width)                            |
+--------------------------------------------------+
| Line Chart (full width)                           |
+--------------------------------------------------+

Responsive grid:
- On wide screens: Filter panel left, KPIs right in a row
- On narrow screens: Filter panel on top, KPIs below stacked
- Charts always full width below filters and KPIs
  

Interactivity

The region filter dropdown controls which region's data is shown.

• When a region is selected, KPI cards update to show total sales for that region only.
• Bar chart updates to show sales by product for the selected region.
• Line chart updates to show quarterly sales trend for the selected region.

Self Check

If you select Region = East in the filter, which components update and what changes?

• KPI Cards show total sales for East region only.
• Bar Chart shows sales by product for East region.
• Line Chart shows sales trend over quarters for East region.

Key Result

A responsive BI dashboard in Figma showing sales KPIs, bar and line charts filtered by region with a flexible grid layout.