Connection creation (click, hover) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Connection Creation on Click

In a BI dashboard prototype in Figma, you want to create a connection that triggers when a user clicks on a chart element. Which interaction setting correctly achieves this?

A Set the interaction trigger to 'On Click' and link it to the target frame or overlay.

B Set the interaction trigger to 'While Hovering' and link it to the target frame.

C Use 'After Delay' trigger with 0 seconds and link to the target frame.

D Set the interaction trigger to 'On Drag' and link it to the target frame.

💡 Hint

Think about what happens when a user clicks versus when they hover.

To create a connection that activates on a click, you must set the interaction trigger to 'On Click'. Hover triggers respond to mouse movement without clicking, and 'After Delay' or 'On Drag' are unrelated to clicks.

🧠 Conceptual

intermediate

Hover Interaction Behavior

When creating a hover connection in Figma for a BI dashboard prototype, what is the expected user experience?

A The target frame appears only after the user clicks the element.

B The target frame or overlay appears immediately when the mouse pointer moves over the interactive element.

C The target frame appears after a fixed delay regardless of mouse position.

D The target frame appears only when the user drags the element.

💡 Hint

Hover means moving the mouse over something without clicking.

Hover triggers show the linked frame or overlay as soon as the mouse pointer is over the element, without any click or drag.

❓ dax_lod_result

advanced

DAX Measure for Click Interaction Count

You have a BI report tracking user interactions. You want a DAX measure that counts how many times users clicked on a specific dashboard element, stored in a table 'UserClicks' with columns 'ElementID' and 'ClickTimestamp'. Which DAX measure correctly counts clicks for element 'E123'?

Figma

Clicks for E123 = COUNTROWS(FILTER(UserClicks, UserClicks[ElementID] = "E123"))

A Clicks for E123 = COUNTROWS(FILTER(UserClicks, UserClicks[ElementID] = "E123"))

B Clicks for E123 = CALCULATE(COUNTROWS(UserClicks), UserClicks[ElementID] = "E123")

C Clicks for E123 = COUNT(UserClicks[ClickTimestamp])

D Clicks for E123 = SUM(UserClicks[ElementID] = "E123")

💡 Hint

Use FILTER to select rows where ElementID equals 'E123' before counting.

Option A uses FILTER to select only rows with ElementID 'E123' and then counts them. Option A uses CALCULATE with a filter expression that overrides any existing filters on ElementID. Option A counts timestamps without filtering. Option A tries to sum a boolean expression, which is invalid.

❓ visualization

advanced

Best Visualization for Hover Interaction Feedback

You want to show users a tooltip with detailed data when they hover over a bar in a sales chart. Which visualization approach follows best practices?

A Change the bar color to red without any text or explanation.

B Show a popup window that covers the entire chart area on hover.

C Use a tooltip that appears near the mouse pointer with clear text and contrasting colors.

D Display a permanent label on the chart that never changes.

💡 Hint

Think about clarity and user focus when hovering.

Tooltips near the pointer with clear text and good contrast provide immediate, accessible feedback. Popups covering the chart or permanent labels clutter the view. Color changes without explanation can confuse users.

🔧 Formula Fix

expert

Debugging a Hover Connection Not Triggering

You created a hover interaction in Figma linking a chart to a detail frame, but the detail frame does not appear on hover. Which is the most likely cause?

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

B The target frame is not connected to any interaction.

C The prototype is set to 'Presentation' mode instead of 'Design' mode.

D The interactive element is covered by another invisible layer blocking hover events.

💡 Hint

Check if something might block mouse events on the element.

If an invisible layer covers the interactive element, hover events won't reach it, so the connection won't trigger. Other options describe different issues but do not explain why hover specifically fails.

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