Connection creation (click, hover) in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of creating connections with click and hover interactions in BI dashboards?

Connections with click and hover help users explore data details and relationships easily by interacting with visuals, making dashboards more interactive and insightful.

beginner

How does a 'click' interaction typically work in a BI dashboard connection?

A click interaction usually filters or highlights related data in other visuals, allowing users to focus on specific information by selecting an element.

intermediate

What is the difference between 'hover' and 'click' interactions in BI connections?

Hover shows quick info or highlights related data temporarily when the mouse is over an element, while click makes a persistent selection or filter until changed.

intermediate

Why is it important to design accessible hover and click connections in BI tools?

Accessible connections ensure all users, including those using keyboards or screen readers, can interact with data, improving usability and inclusiveness.

beginner

Name one best practice when creating click or hover connections in BI dashboards.

Use clear visual cues like color changes or tooltips to show what will happen on click or hover, so users understand the interaction easily.

What does a hover interaction usually do in a BI dashboard?

A Permanently filters data

B Temporarily highlights or shows info

C Deletes data

D Exports data

Hover interactions temporarily highlight or show additional info when the mouse is over an element.

Which interaction typically makes a persistent selection in a dashboard?

A Click

B Double hover

C Hover

D Scroll

Click interactions usually make a persistent selection or filter until changed.

Why should BI connections be designed with accessibility in mind?

A To speed up loading

B To make dashboards colorful

C To reduce file size

D To ensure all users can interact, including keyboard and screen reader users

Accessibility ensures everyone can use the dashboard, including those with disabilities.

What is a good visual cue for a clickable connection?

A Making text smaller

B Hiding the element

C Changing cursor to pointer

D Using random colors

Changing the cursor to a pointer signals that an element is clickable.

Which of these is NOT a typical effect of clicking a connection in BI?

A Automatically printing the report

B Highlighting data

C Showing detailed info

D Filtering related visuals

Clicking connections usually filters or highlights data, not printing reports.

Explain how click and hover interactions improve user experience in BI dashboards.

Think about what happens when you move your mouse or click on a chart.

List best practices for designing accessible and clear click and hover connections in BI tools.

Consider how to help all users understand and use interactions.

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