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.