Swapping instances in Figma - Dashboard Guide

Dashboard Mode - Swapping instances

Dashboard Goal

Understand how swapping instances in Figma helps quickly update dashboard visuals by replacing one design component with another without losing layout or styles.

Sample Data

Component Name	Type	Current Instance	Available Instances
Sales Chart	Chart	Bar Chart	Bar Chart, Line Chart, Pie Chart
Region Filter	Filter	Dropdown	Dropdown, Checkbox List
KPI Card	Card	Total Sales	Total Sales, Average Sales, Sales Growth
Time Selector	Control	Date Range Picker	Date Range Picker, Month Selector
Legend	Info	Color Legend	Color Legend, Symbol Legend

Dashboard Components

• Sales Chart: A bar chart instance showing sales by region. Swappable with line or pie chart instances to change visualization style.
• Region Filter: Dropdown instance to select regions. Can swap to checkbox list for multi-select.
• KPI Card: Displays total sales as a card instance. Can swap to average sales or sales growth cards.
• Time Selector: Date range picker instance to filter data by time. Swappable with month selector instance.
• Legend: Color legend instance explaining chart colors. Can swap to symbol legend instance.

Dashboard Layout

+----------------------+----------------------+----------------------+
|      KPI Card        |    Time Selector     |      Legend          |
|  (Total Sales Card)  |  (Date Range Picker) |  (Color Legend)      |
+----------------------+----------------------+----------------------+
|                      Sales Chart (Bar Chart)                     |
|                      (Swappable Instance)                       |
+-----------------------------------------------------------------+
|                      Region Filter (Dropdown)                    |
+-----------------------------------------------------------------+

Interactivity

The Region Filter and Time Selector control the data shown in the Sales Chart and KPI Card. Swapping the Sales Chart instance changes the chart type but keeps the data and filters connected. Swapping the Region Filter instance changes the selection style but maintains filtering functionality. Swapping the KPI Card instance changes the metric displayed but updates dynamically with filters.

Self Check

If you swap the Sales Chart instance from a bar chart to a pie chart, which components update their appearance and which keep their data?

• Sales Chart: Appearance changes to pie chart style but data remains filtered by region and time.
• KPI Card: Remains the same, showing total sales filtered by selections.
• Region Filter and Time Selector: No change in appearance or data.
• Legend: Updates to match the pie chart color scheme.

Key Result

A Figma dashboard demonstrating how swapping instances updates visuals while keeping data and filters connected.