Component properties (text, boolean, instance swap) in Figma - Dashboard Guide

Dashboard Mode - Component properties (text, boolean, instance swap)

Dashboard Goal

Understand how to use component properties in Figma to build interactive BI dashboards. Learn how text, boolean, and instance swap properties help customize dashboard elements for clear data presentation.

Sample Data

Month	Sales	Profit	Region
Jan	1000	200	North
Feb	1500	300	South
Mar	1200	250	East
Apr	1700	400	West
May	1600	350	North

Dashboard Components

• KPI Card - Total Sales
  Text property: Displays total sales sum.
  Formula: SUM(Sales) = 1000+1500+1200+1700+1600 = 7000
• KPI Card - Show Profit?
  Boolean property: Toggle to show or hide profit KPI.
  If true, shows total profit; else hides it.
  Formula: SUM(Profit) = 200+300+250+400+350 = 1500
• Bar Chart - Sales by Month
  Instance swap property: Swap chart style between bar and line.
  Default: Bar chart showing sales per month.
• Region Filter
  Text property: Select region to filter data.
  Filters all components to show only selected region's data.

Dashboard Layout

+----------------------+----------------------+
|      Total Sales      |     Show Profit?     |
|       (KPI Card)      |     (Toggle Bool)    |
+----------------------+----------------------+
|                                              |
|           Sales by Month Chart                |
|          (Bar or Line - Instance Swap)       |
|                                              |
+----------------------+----------------------+
|                 Region Filter                 |
|               (Text Selector)                 |
+----------------------------------------------+

Interactivity

The Show Profit? toggle controls visibility of the profit KPI card. When ON, the profit KPI appears showing total profit; when OFF, it hides.

The Region Filter lets users pick a region (North, South, East, West). Selecting a region filters the sales and profit KPIs and updates the sales chart to show only data for that region.

The Instance Swap on the sales chart lets users switch between bar chart and line chart styles for better visual preference.

Self Check

If you toggle Show Profit? OFF, which components update?
Answer: The profit KPI card hides; other components remain unchanged.

If you select Region = North in the filter, which components update?
Answer: Total Sales KPI updates to 2600 (1000+1600), Profit KPI updates to 550 (200+350), and the sales chart shows only Jan and May data.

If you swap the sales chart instance to line chart, what changes?
Answer: The sales chart changes from bar style to line style, data remains the same.

Key Result

A Figma dashboard demonstrating text, boolean, and instance swap properties to customize KPIs, charts, and filters for sales data.