Variables in prototypes in Figma - Dashboard Guide

Dashboard Mode - Variables in prototypes

Goal

Understand how to use variables in Figma prototypes to create interactive dashboards that respond to user input.

Sample Data

Region	Month	Sales
North	Jan	100
North	Feb	150
South	Jan	200
South	Feb	250
East	Jan	300
East	Feb	350

Dashboard Components

• KPI Card: Total Sales
  Formula: Sum of all Sales values.
  Calculation: 100 + 150 + 200 + 250 + 300 + 350 = 1350
• Bar Chart: Sales by Region
  Formula: Sum Sales grouped by Region.
  North: 250, South: 450, East: 650
• Dropdown Variable: Region Selector
  Variable Name: selectedRegion
  Options: All, North, South, East
  Default: All
• Filtered Table: Sales Details
  Shows rows filtered by selectedRegion variable.
  If 'All' selected, shows all rows.

Dashboard Layout

+----------------------+--------------------+
|      Total Sales      |  Region Selector    |
|       (KPI Card)      |    (Dropdown)       |
+----------------------+--------------------+
|                                              |
|              Sales by Region (Bar Chart)     |
|                                              |
+----------------------------------------------+
|                                              |
|               Sales Details (Table)          |
|                                              |
+----------------------------------------------+

Interactivity

The Region Selector dropdown sets the selectedRegion variable.

When selectedRegion changes:

• The Sales Details table filters rows to show only the selected region's data or all data if 'All' is selected.
• The Sales by Region bar chart highlights the selected region's bar or shows all bars if 'All' is selected.
• The Total Sales KPI updates to sum sales only for the selected region or all regions if 'All' is selected.

Self Check

If you select South in the Region Selector dropdown, which components update and what do they show?

• Total Sales: Updates to 450 (200 + 250).
• Sales by Region: Highlights the South bar.
• Sales Details: Shows only rows where Region = South.

Key Result

Interactive sales dashboard using variables in Figma prototypes to filter and highlight data by region.