Breakpoint-based design in Figma - Dashboard Guide

Dashboard Mode - Breakpoint-based design

Goal

Understand how breakpoint-based design helps create dashboards that look good and work well on different screen sizes like phones, tablets, and desktops.

Sample Data

Region	Sales Q1	Sales Q2	Sales Q3	Sales Q4
North	100	150	200	250
South	80	120	160	200
East	90	130	170	210
West	110	140	180	220

Dashboard Components

• KPI Cards: Show total sales per quarter. Formula: Total Sales Q1 = SUM(Sales Q1) (Result: 380)
• Bar Chart: Sales by Region for Q4. Shows bars for North (250), South (200), East (210), West (220).
• Line Chart: Quarterly sales trend for North region. Points: Q1=100, Q2=150, Q3=200, Q4=250.
• Responsive Layout: Uses breakpoints at 600px and 900px width to rearrange components:
• Below 600px: KPI cards stacked vertically, charts stacked below.
• 600px to 900px: KPI cards in a row, charts stacked below.
• Above 900px: KPI cards and charts arranged in two columns side by side.

Dashboard Layout (ASCII Art)

Screen width < 600px:
+------------------+
| KPI Card Q1      |
+------------------+
| KPI Card Q2      |
+------------------+
| KPI Card Q3      |
+------------------+
| KPI Card Q4      |
+------------------+
| Bar Chart Q4     |
+------------------+
| Line Chart North |
+------------------+

Screen width 600px - 900px:
+-----------------------------------------------------+
| KPI Card Q1 | KPI Card Q2 | KPI Card Q3 | KPI Card Q4 |
+-----------------------------------------------------+
| Bar Chart Q4                                      |
+-----------------------------------------------------+
| Line Chart North                                 |
+-----------------------------------------------------+

Screen width > 900px:
+----------------------+----------------------+
| KPI Cards (all four) | Bar Chart Q4         |
| arranged in 2x2 grid |                      |
+----------------------+----------------------+
|                      | Line Chart North     |
|                      |                      |
+----------------------+----------------------+

Interactivity

Filters for Region and Quarter let users update the charts and KPI cards. For example, selecting Region = South updates the Bar Chart and Line Chart to show only South region data. Selecting a specific Quarter updates KPI cards to show sales only for that quarter.

Self Check

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

• KPI Cards update to show total sales for East region only.
• Bar Chart updates to show Q4 sales for East region only (210).
• Line Chart updates to show quarterly sales trend for East region (Q1=90, Q2=130, Q3=170, Q4=210).

Key Result

A responsive sales dashboard that adjusts KPI cards and charts layout based on screen width breakpoints for better viewing on phones, tablets, and desktops.