Interactive components in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants an interactive sales dashboard prototype to explore monthly sales by region and product category.

📊 Data: You have monthly sales data by region and product category for the past year.

🎯 Deliverable: Create a Figma prototype with interactive components that let users select a region and product category to see filtered sales trends.

Sample Data

Month	Region	Product Category	Sales
Jan	North	Electronics	12000
Jan	South	Clothing	8000
Feb	North	Clothing	9500
Feb	East	Electronics	11000
Mar	West	Clothing	7000
Mar	South	Electronics	13000
Apr	East	Clothing	9000
Apr	North	Electronics	14000
May	West	Electronics	12500
May	South	Clothing	8500
Jun	East	Electronics	11500
Jun	North	Clothing	10000

1

Step 1: Create a new Figma file and set up a frame sized for a dashboard (e.g., 1440x900).

No formula needed; just create a frame named 'Dashboard'.

Expected Result

A blank dashboard frame ready for design.

2

Step 2: Design dropdown menus for 'Region' and 'Product Category' with all available options from the sample data.

Create dropdown components with options: Region = [North, South, East, West], Product Category = [Electronics, Clothing].

Expected Result

Two dropdown menus visible on the dashboard frame.

3

Step 3: Create a line chart component showing monthly sales trends.

Design a line chart with X-axis as Month (Jan to Jun) and Y-axis as Sales amount.

Expected Result

A line chart placeholder on the dashboard frame.

4

Step 4: Make the dropdown menus interactive by creating variants for each selection option.

For each dropdown, create variants for each option and set up component properties for selection.

Expected Result

Dropdown components with selectable options in prototype mode.

5

Step 5: Create interactive component states for the line chart to show filtered sales data based on dropdown selections.

Create variants of the line chart for each combination of Region and Product Category showing correct sales trends from sample data.

Expected Result

Line chart updates visually when dropdown selections change.

6

Step 6: Use Figma's prototyping feature to link dropdown selections to the corresponding line chart variants.

Set interaction triggers on dropdown selection changes to swap line chart variants accordingly.

Expected Result

In prototype mode, selecting different dropdown options updates the sales trend chart.

7

Step 7: Test the prototype by selecting different regions and product categories to verify the sales trends update correctly.

No formula; manually test interactions in prototype mode.

Expected Result

Sales trend line chart changes correctly for all dropdown combinations.

Final Result

┌───────────────────────────────────────────────┐
│ Dashboard Frame (1440x900)                     │
│                                               │
│ Region: [North ▼]    Product Category: [Electronics ▼] │
│                                               │
│  Sales Trend Line Chart                         │
│  Jan  Feb  Mar  Apr  May  Jun                   │
│   *    *    *    *    *    *                    │
│  * *  * *  * *  * *  * *  * *                   │
│ *   **   **   **   **   **   *                  │
│                                               │
└───────────────────────────────────────────────┘

✓Interactive dropdowns let users filter sales data by region and product category.

✓Line chart updates dynamically to show monthly sales trends based on selections.

✓This prototype helps managers explore sales performance easily and visually.

Bonus Challenge

Add a third interactive dropdown to filter sales by quarter (Q1, Q2).

Show Hint

Create variants of the line chart filtered by quarter and link the new dropdown to these variants.