Connection creation (click, hover) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to prototype interactive reports.

📋 Request: Your manager wants you to create interactive connections between dashboard elements that respond to user clicks and hover actions to improve user experience.

📊 Data: You have a Figma file with dashboard components: charts, filters, and summary cards.

🎯 Deliverable: An interactive Figma prototype where clicking a filter updates charts and hovering over summary cards highlights related data.

Sample Data

Component	Type	Interaction	Target
Region Filter	Dropdown	Click	Sales Chart
Product Filter	Dropdown	Click	Sales Chart
Sales Chart	Bar Chart	Hover	Summary Card
Summary Card	Info Box	Hover	Sales Chart

1

Step 1: Select the Region Filter dropdown component in Figma.

Use the Prototype tab to add an 'On Click' interaction. Set the action to 'Change to' the Sales Chart frame filtered by the selected region.

Expected Result

Clicking the Region Filter updates the Sales Chart to show data for that region.

2

Step 2: Select the Product Filter dropdown component.

Add an 'On Click' interaction in Prototype tab. Link it to update the Sales Chart frame filtered by the selected product.

Expected Result

Clicking the Product Filter updates the Sales Chart to show data for that product.

3

Step 3: Select the Sales Chart component.

Add an 'On Hover' interaction. Set the action to highlight the related Summary Card by changing its fill color or adding a shadow.

Expected Result

Hovering over bars in the Sales Chart highlights the corresponding Summary Card.

4

Step 4: Select the Summary Card component.

Add an 'On Hover' interaction. Set the action to highlight the related data in the Sales Chart by changing bar colors or adding emphasis.

Expected Result

Hovering over the Summary Card highlights related bars in the Sales Chart.

5

Step 5: Test the prototype in Figma Presentation mode.

Click filters and hover over charts and cards to verify interactions work smoothly.

Expected Result

Filters update charts on click; hovering highlights related components as expected.

Final Result

┌───────────────────────────────┐
│ Region Filter [Dropdown]       │
├───────────────────────────────┤
│ Product Filter [Dropdown]      │
├───────────────────────────────┤
│ Sales Chart [Bar Chart]        │
│  ┌─────┐  ┌─────┐  ┌─────┐     │
│  │     │  │     │  │     │     │
│  └─────┘  └─────┘  └─────┘     │
├───────────────────────────────┤
│ Summary Card [Info Box]        │
│  Total Sales: $1,200,000       │
│  Top Region: East              │
└───────────────────────────────┘

Interactions:
- Click Region/Product Filter updates Sales Chart
- Hover Sales Chart highlights Summary Card
- Hover Summary Card highlights Sales Chart

✓Clicking filters dynamically updates the Sales Chart to reflect selected data.

✓Hovering over chart bars visually connects to summary information, improving user understanding.

✓Hovering summary cards emphasizes related chart data, creating intuitive navigation.

Bonus Challenge

Add a tooltip that appears when hovering over bars in the Sales Chart, showing exact sales numbers.

Show Hint

Use Figma's 'On Hover' interaction with an overlay frame positioned near the hovered bar containing the sales details.