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.

Practice

1. What does the On Click interaction in Figma prototypes do?

easy

A. Automatically plays an animation without user input

B. Triggers an action when the user hovers over an element

C. Triggers an action when the user clicks on an element

D. Changes the color of an element permanently

Solution

1. Step 1: Understand interaction types in Figma

   Figma uses different triggers like 'On Click' and 'While Hovering' to create interactive prototypes.

2. Step 2: Identify the trigger for 'On Click'

   'On Click' means the action happens when the user clicks on an element, not on hover or automatically.

3. Final Answer:

   Triggers an action when the user clicks on an element -> Option C

4. Quick Check:

   On Click = action on click [OK]

Hint: Click means action happens on mouse click, not hover [OK]

Common Mistakes:

• Confusing 'On Click' with 'While Hovering'
• Thinking 'On Click' triggers automatically
• Assuming 'On Click' changes styles permanently

2. Which of the following is the correct way to create a hover interaction in Figma?

easy

A. Select the element, then choose 'While Hovering' and link to a frame

B. Select the element, then choose 'On Click' and link to a frame

C. Select the element, then choose 'After Delay' and link to a frame

D. Select the element, then choose 'On Drag' and link to a frame

Solution

1. Step 1: Identify interaction triggers for hover

   Hover effects in Figma are created using the 'While Hovering' trigger, not 'On Click' or others.

2. Step 2: Confirm correct trigger selection

   Choosing 'While Hovering' and linking to a frame sets the hover interaction properly.

3. Final Answer:

   Select the element, then choose 'While Hovering' and link to a frame -> Option A

4. Quick Check:

   Hover = While Hovering trigger [OK]

Hint: Hover uses 'While Hovering' trigger, not 'On Click' [OK]

Common Mistakes:

• Selecting 'On Click' instead of 'While Hovering' for hover
• Using 'After Delay' which triggers automatically
• Confusing 'On Drag' with hover

3. Given a prototype where a button has an interaction set to While Hovering that changes the frame to 'Details', what happens when the user moves the mouse away from the button?

medium

A. The prototype stays on the 'Details' frame permanently

B. The prototype crashes due to invalid interaction

C. Nothing happens; the frame does not change

D. The prototype returns to the previous frame automatically

Solution

1. Step 1: Understand 'While Hovering' behavior

   This interaction triggers only while the mouse is over the element; moving away cancels it.

2. Step 2: Determine what happens after hover ends

   When the mouse leaves, the prototype returns to the previous frame automatically, reversing the hover effect.

3. Final Answer:

   The prototype returns to the previous frame automatically -> Option D

4. Quick Check:

   Hover off = revert frame [OK]

Hint: Hover effects revert when mouse leaves element [OK]

Common Mistakes:

• Assuming hover changes are permanent
• Thinking nothing happens after hover ends
• Believing prototype crashes on hover

4. You set an interaction on a button with 'On Click' to navigate to a frame, but clicking does nothing. What is the most likely cause?

medium

A. The interaction is set to 'While Hovering' instead of 'On Click'

B. The linked frame does not exist or is deleted

C. The prototype is not in Present mode

D. The button is not selected before creating the interaction

Solution

1. Step 1: Check interaction setup

   If clicking does nothing, verify the linked frame exists and is correctly named.

2. Step 2: Confirm frame availability

   If the linked frame is missing or deleted, the interaction cannot navigate, causing no response.

3. Final Answer:

   The linked frame does not exist or is deleted -> Option B

4. Quick Check:

   Missing frame = no navigation [OK]

Hint: Ensure linked frames exist before linking [OK]

Common Mistakes:

• Confusing 'While Hovering' with 'On Click'
• Not entering Present mode to test
• Not selecting the button before linking

5. You want to create a prototype where hovering over a product image shows details, and clicking the image opens a purchase page. How should you set up the interactions?

hard

A. Set 'While Hovering' to show details overlay, and 'On Click' to navigate to purchase page

B. Set 'On Click' to show details overlay, and 'While Hovering' to navigate to purchase page

C. Set both 'On Click' and 'While Hovering' to navigate to purchase page

D. Set 'While Hovering' to navigate to purchase page, and no 'On Click' interaction

Solution

1. Step 1: Assign hover interaction for details

   Use 'While Hovering' to show details overlay because hover triggers temporary display.

2. Step 2: Assign click interaction for purchase

   Use 'On Click' to navigate to the purchase page because click triggers a permanent action.

3. Final Answer:

   Set 'While Hovering' to show details overlay, and 'On Click' to navigate to purchase page -> Option A

4. Quick Check:

   Hover = show details, Click = navigate [OK]

Hint: Hover for temporary info, click for permanent navigation [OK]

Common Mistakes:

• Swapping hover and click actions
• Using click for temporary hover effects
• Not setting both interactions properly