Connection creation (click, hover) in Figma - Step-by-Step Guide

Introduction

This feature lets you link one frame or object to another in Figma. It helps you show how users move through your design by creating interactive connections using clicks or hover actions.

When you want to show what happens when a user clicks a button in your app design

When you need to create a hover effect to display extra information on a card

When building a clickable prototype to demonstrate navigation between screens

When you want to test user flow by linking pages with interactive hotspots

When presenting your design to stakeholders and need to simulate real app behavior

Steps

Step 1: Select the object or frame you want to make interactive

- Canvas area

The selected object or frame is highlighted with a blue outline

Step 2: Click the Prototype tab in the right sidebar

- Right sidebar

Prototype options appear below the Design tab

Step 3: Drag the circular node from the selected object to the target frame or object

- Circular node on the right edge of the selected object

A blue arrow appears showing the connection from the source to the target

Step 4: Click the connection arrow to open interaction details

- Connection arrow on the canvas

Interaction panel opens showing trigger and action settings

Step 5: Select 'On Click' or 'While Hovering' as the trigger

- Interaction panel under Trigger dropdown

The trigger type updates to either click or hover for the connection

Step 6: Choose the action such as 'Navigate To' and select the destination frame

- Interaction panel under Action dropdown

The connection is set to navigate to the chosen frame on the selected trigger

Step 7: Click the Present button at the top-right to test the interaction

- Top-right corner of Figma window

Prototype opens in presentation mode where you can click or hover to see the connection work

Before vs After

Before

No connections exist; clicking or hovering on objects does nothing

After

Clicking or hovering on objects triggers navigation or overlays as set by connections

Settings Reference

Trigger

📍 Prototype tab > Interaction panel

Defines what user action starts the interaction

Default: On Click

Action

📍 Prototype tab > Interaction panel

Defines what happens after the trigger

Default: Navigate To

Animation

📍 Prototype tab > Interaction panel

Controls how the transition between frames looks

Default: Instant

Common Mistakes

Dragging the connection node to empty canvas space instead of a frame

The connection will not link to any frame and won't work in prototype

Always drag the node to a valid target frame or object to create a working link

Setting trigger to 'While Hovering' but testing on a mobile device

Hover does not work on touch devices, so interaction won't trigger

Use 'On Click' trigger for mobile prototypes to ensure interaction works

Summary

Connection creation links objects or frames to simulate user interactions in prototypes

You can set triggers like click or hover to control how users navigate your design

Always connect to valid targets and choose triggers suitable for your testing device

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