Variables in prototypes in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working on an interactive sales dashboard prototype in Figma.

📋 Request: Your manager wants you to create a prototype that dynamically shows different sales regions based on user selection using variables.

📊 Data: You have sales data for four regions: North, South, East, and West. Each region has monthly sales figures.

🎯 Deliverable: Create a Figma prototype using variables that lets users select a region from a dropdown and see the corresponding monthly sales chart update dynamically.

Sample Data

Month	North	South	East	West
Jan	1200	900	1100	1000
Feb	1300	950	1150	1050
Mar	1250	1000	1200	1100
Apr	1400	1050	1250	1150
May	1500	1100	1300	1200
Jun	1600	1150	1350	1250

1

Step 1: Create a dropdown component in Figma with options: North, South, East, West.

Use Figma's component and variant features to build the dropdown with these four options.

Expected Result

A dropdown menu that lets users pick one of the four regions.

2

Step 2: Define a variable named 'SelectedRegion' to store the user's dropdown choice.

In Figma's prototype panel, create a variable 'SelectedRegion' of type 'Text'.

Expected Result

A variable ready to hold the selected region name.

3

Step 3: Set the dropdown's onChange interaction to update 'SelectedRegion' with the chosen region.

Add an interaction: On dropdown change -> Set variable 'SelectedRegion' to dropdown value.

Expected Result

When user picks a region, 'SelectedRegion' updates accordingly.

4

Step 4: Create four frames, each showing the monthly sales chart for one region using the sample data.

Design bar charts or line charts for North, South, East, and West sales data separately.

Expected Result

Four distinct charts, each representing one region's monthly sales.

5

Step 5: Use Figma's conditional visibility feature to show only the chart matching 'SelectedRegion'.

Set each chart frame's visibility condition: visible if 'SelectedRegion' equals that region's name.

Expected Result

Only the chart for the selected region is visible in the prototype.

6

Step 6: Link the dropdown and charts in prototype mode to test dynamic updates.

Run prototype, select different regions from dropdown, observe chart changes.

Expected Result

Chart updates instantly to show sales data for the chosen region.

Final Result

┌───────────────────────────────┐
│ Select Region: [ North ▼ ]     │
├───────────────────────────────┤
│ Month │ Sales                 │
│ Jan   │ ██████████ 1200       │
│ Feb   │ ███████████ 1300      │
│ Mar   │ ██████████▉ 1250      │
│ Apr   │ ████████████ 1400     │
│ May   │ █████████████ 1500    │
│ Jun   │ ██████████████ 1600   │
└───────────────────────────────┘

Bonus Challenge

Add a second variable to let users select the year (e.g., 2023 or 2024) and update the sales chart accordingly.

Show Hint

Create a 'SelectedYear' variable and duplicate sales data frames for each year. Use conditional visibility with both 'SelectedRegion' and 'SelectedYear'.