Interactive components in Figma - Dashboard Guide

Dashboard Mode - Interactive components

Dashboard Goal

Understand how interactive components like filters and slicers help explore sales data by region and product category.

Sample Data

Date	Region	Product Category	Sales Amount
2024-01-15	North	Electronics	1000
2024-01-20	South	Furniture	1500
2024-02-05	East	Electronics	1200
2024-02-10	West	Furniture	1300
2024-03-01	North	Furniture	1100
2024-03-05	South	Electronics	1400

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM of Sales Amount
  Result: 7500
• Bar Chart: Sales by Region
  Shows total sales for each region from the filtered data.
• Pie Chart: Sales by Product Category
  Shows sales distribution by product category.
• Table: Detailed Sales Data
  Shows rows filtered by selected region and category.
• Filter: Region Selector
  Dropdown to select one or multiple regions.
• Filter: Product Category Selector
  Dropdown to select one or multiple product categories.

Dashboard Layout

+----------------------+-----------------------+
|      Total Sales      |   Region Filter       |
|      (KPI Card)       |  (Dropdown Selector)  |
+----------------------+-----------------------+
|  Sales by Region Bar Chart                  |
|  (Horizontal Bar Chart)                     |
+--------------------------------------------+
|  Product Category Filter | Sales by Category |
|  (Dropdown Selector)     | (Pie Chart)       |
+--------------------------+------------------+
|               Detailed Sales Table          |
+--------------------------------------------+

Interactivity

The Region Filter and Product Category Filter let users pick which data to see.

When a user selects a region or category, the KPI Card, Bar Chart, Pie Chart, and Sales Table update to show only data matching those selections.

This helps users explore sales performance by different areas and product types easily.

Self Check

If you select Region = North in the Region Filter, which components update and what changes?

• KPI Card: Shows total sales only for North region (1000 + 1100 = 2100).
• Bar Chart: Bars update to show sales only for North region.
• Pie Chart: Shows sales distribution by product category only for North region.
• Sales Table: Shows only rows where Region is North.

Key Result

Interactive sales dashboard with filters for region and product category updating KPIs, charts, and tables.