Mobile-first design workflow in Figma - Dashboard Guide

Dashboard Mode - Mobile-first design workflow

Goal

Understand how to create a simple mobile-first dashboard design workflow using Figma for business intelligence reports.

Sample Data

Product	Region	Sales	Month
Alpha	North	120	January
Beta	South	150	January
Alpha	North	130	February
Beta	South	170	February
Alpha	North	140	March
Beta	South	160	March

Dashboard Components

• KPI Card: Total Sales
  Formula: Sum of Sales column
  Result: 870
• Bar Chart: Monthly Sales by Product
  Shows sales for Alpha and Beta for January, February, March
• Filter: Region Selector
  Allows filtering data by North or South region
• Table: Detailed Sales Data
  Shows Product, Region, Sales, and Month columns

Layout

+-----------------------+
|      KPI Card         |
+-----------------------+
| Bar Chart             |
| (scrollable if needed) |
+-----------------------+
| Filter: Region        |
+-----------------------+
| Detailed Sales Table  |
+-----------------------+

Interactivity

The Region filter updates the Bar Chart and Detailed Sales Table to show only data for the selected region. The KPI Card updates total sales accordingly.

Self Check

If you select the Region filter to 'North', which components update and what is the new total sales?

Answer: KPI Card updates to 390 (120+130+140). Bar Chart and Table show only North region data.

Key Result

A mobile-first BI dashboard design in Figma showing total sales, monthly sales by product, and region filtering.