Conditional interactions in Figma - Dashboard Guide

Dashboard Mode - Conditional interactions

Dashboard Goal

Understand how sales performance changes by product category and region using interactive filters that show or hide details based on selections.

Sample Data

Order ID	Product Category	Region	Sales Amount	Order Date
1001	Electronics	North	250	2024-01-15
1002	Furniture	South	450	2024-02-10
1003	Electronics	East	300	2024-01-20
1004	Clothing	West	150	2024-03-05
1005	Furniture	North	500	2024-02-25
1006	Clothing	South	200	2024-03-15
1007	Electronics	West	350	2024-01-30

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM of Sales Amount for filtered data.
  Example: If no filter, total sales = 2200.
• Bar Chart: Sales by Product Category
  Shows total sales per category.
  Formula: SUM(Sales Amount) grouped by Product Category.
  Updates based on Region filter.
• Pie Chart: Sales by Region
  Shows sales distribution by region.
  Formula: SUM(Sales Amount) grouped by Region.
  Visible only if a Product Category is selected.
• Table: Detailed Orders
  Shows all orders filtered by selected Product Category and Region.
  Columns: Order ID, Product Category, Region, Sales Amount, Order Date.
• Filter: Product Category
  Dropdown to select one or multiple categories.
  Controls visibility of Pie Chart and filters other components.
• Filter: Region
  Dropdown to select one or multiple regions.
  Filters Bar Chart and Table.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |   Filter: Category    |
|   (Total Sales)      |   [Dropdown]          |
+----------------------+----------------------+
|  Bar Chart: Sales by |   Filter: Region      |
|  Product Category    |   [Dropdown]          |
+----------------------+----------------------+
|       Pie Chart      |                      |
|   Sales by Region    |                      |
|  (Visible if Category|                      |
|   filter active)     |                      |
+----------------------+----------------------+
|               Table: Detailed Orders           |
+------------------------------------------------+
    

Interactivity

Product Category Filter: Selecting one or more categories filters the Bar Chart, Table, and shows the Pie Chart. If no category is selected, the Pie Chart is hidden.

Region Filter: Selecting regions filters the Bar Chart and Table to show only sales from those regions. It does not affect the Pie Chart visibility.

Conditional Interaction: The Pie Chart only appears when the Product Category filter has a selection. This helps focus on regional sales distribution for chosen categories.

Self Check

Try selecting the Product Category filter to "Electronics" only. Which components update and how?

• The KPI Card updates to show total sales for Electronics only.
• The Bar Chart updates to show sales by category but filtered to Electronics (so only Electronics bar visible).
• The Pie Chart appears and shows sales distribution by region for Electronics.
• The Table updates to list only orders with Electronics category.
• The Region filter remains active and further filters Bar Chart and Table.

Key Result

Interactive sales dashboard showing total sales, sales by category and region, with conditional pie chart visibility based on product category selection.