Conditional interactions in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer at a retail company.

📋 Request: Your manager wants an interactive sales dashboard where users can select a region and see sales data only for that region. The dashboard should update charts and tables dynamically based on the selected region.

📊 Data: You have monthly sales data by region and product category. The data includes Region, Month, Product Category, and Sales Amount.

🎯 Deliverable: Create a Figma prototype dashboard with conditional interactions that filter visuals based on the selected region.

Sample Data

Region	Month	Product Category	Sales Amount
North	Jan	Electronics	12000
South	Jan	Furniture	8000
East	Feb	Electronics	15000
West	Feb	Clothing	7000
North	Mar	Clothing	9000
South	Mar	Electronics	11000
East	Apr	Furniture	13000
West	Apr	Electronics	14000

1

Step 1: Create a dropdown menu component listing all regions: North, South, East, West.

In Figma, use the 'Dropdown' component and add text items for each region.

Expected Result

A dropdown menu that lets users pick one region.

2

Step 2: Design a sales bar chart showing sales amount by product category.

Create rectangles sized proportionally to sales amounts for each product category using the sample data.

Expected Result

A bar chart with bars for Electronics, Furniture, and Clothing showing total sales.

3

Step 3: Add a sales data table listing Month, Product Category, and Sales Amount.

Create a table with rows for each data entry from sample data.

Expected Result

A table showing all sales records.

4

Step 4: Set up conditional interactions so that when a region is selected in the dropdown, the bar chart and table update to show only data for that region.

Use Figma's 'Prototype' tab to add an 'On Change' interaction on the dropdown that triggers 'Set Filter' on chart and table layers to show only selected region data.

Expected Result

Selecting 'North' filters visuals to show only North region sales.

5

Step 5: Test the prototype by selecting different regions and verifying the visuals update accordingly.

In prototype mode, select each region and observe changes.

Expected Result

Charts and tables dynamically update to reflect the selected region's sales data.

Final Result

Sales Dashboard Prototype

[Dropdown: Region ▼]

Bar Chart: Sales by Product Category
| Electronics | Furniture | Clothing |
|    ████     |    ██     |   ██     |

Sales Data Table
Month | Product Category | Sales Amount
--------------------------------------
Jan   | Electronics      | 12000
Mar   | Clothing        | 9000

(Filtered by selected region)

✓Users can select any region from the dropdown to filter sales data.

✓The bar chart and table update instantly to show only the selected region's sales.

✓This interaction helps managers focus on regional sales performance easily.

Bonus Challenge

Add a second dropdown to filter sales by product category in addition to region, updating visuals accordingly.

Show Hint

Use multiple conditional interactions and combine filters on the chart and table layers.