Component variants in Figma - Dashboard Guide

Dashboard Mode - Component variants

Dashboard Goal

Understand how to use component variants in Figma to create interactive BI dashboard elements that change appearance based on data states like status or category.

Sample Data

Project	Status	Category	Progress %
Alpha	On Track	Marketing	75
Beta	At Risk	Development	40
Gamma	Delayed	Marketing	20
Delta	On Track	Sales	90
Epsilon	At Risk	Sales	50

Dashboard Components

• KPI Card Variant: A card component with variants for Status (On Track, At Risk, Delayed). Each variant changes the card color: green for On Track, orange for At Risk, red for Delayed. Shows Project name and Progress %.
• Category Filter Variant: A dropdown component with variants for categories: Marketing, Development, Sales. Selecting a variant filters the KPI cards to show only projects in that category.
• Progress Bar Variant: A progress bar component with variants for progress ranges: 0-33%, 34-66%, 67-100%. Each variant changes the bar color from red (low) to yellow (medium) to green (high).

Dashboard Layout

+----------------------+---------------------+
| Category Filter       |                     |
| [Marketing ▼]         |                     |
+----------------------+    KPI Cards Grid    |
|                      |  +---------+---------+|
|                      |  | Card 1  | Card 2  ||
|                      |  +---------+---------+|
|                      |  | Card 3  | Card 4  ||
|                      |  +---------+---------+|
|                      |  | Card 5  |         ||
|                      |  +---------+---------+|
+----------------------+---------------------+
    

Interactivity

When the user selects a category variant in the Category Filter dropdown, the KPI Card variants update to show only projects matching that category. Each KPI Card variant changes color based on the project status. The Progress Bar variant inside each card updates color based on the progress percentage range.

Self Check

If you change the Category Filter variant to Sales, which KPI Cards remain visible and what colors do their status variants show?

Answer: Only the KPI Cards for projects Delta and Epsilon remain. Delta's card variant color is green (On Track), Epsilon's card variant color is orange (At Risk). Their progress bars show green (90%) and yellow (50%) respectively.

Key Result

A Figma dashboard demonstrating component variants for project status, category filtering, and progress visualization.