How to Link Frames in Figma Prototype: Simple Steps

To link frames in a Figma prototype, select an object or frame, then click the Prototype tab and drag the blue node to the target frame. Set the interaction details like trigger and animation to create smooth navigation between frames.

Syntax

Linking frames in Figma prototype involves these steps:

• Select the object or frame you want to make clickable.
• Go to the Prototype tab in the right sidebar.
• Drag the blue circular node from the selected object to the target frame.
• Choose the interaction trigger (e.g., On Click, On Hover).
• Pick the animation type (e.g., Instant, Dissolve, Slide).

figma

Select object/frame -> Prototype tab -> Drag blue node -> Choose target frame -> Set trigger and animation

Example

This example shows how to link a button in Frame A to Frame B with a click interaction and slide animation.

figma

1. Select the button in Frame A.
2. Click the Prototype tab.
3. Drag the blue node from the button to Frame B.
4. Set Interaction to 'On Click'.
5. Set Animation to 'Slide In'.

Output

When you click the button in Frame A during prototype preview, it slides to Frame B.

Common Pitfalls

Common mistakes when linking frames include:

• Not dragging the blue node fully to the target frame, so no link is created.
• Forgetting to set the interaction trigger, resulting in no response on click.
• Linking to the wrong frame by mistake.
• Using complex animations that slow down prototype performance.

Always double-check your links in prototype preview mode.

figma

Wrong: Select object but forget to drag blue node.
Right: Drag blue node fully to target frame and set trigger.

Quick Reference

Step	Action
1	Select object or frame
2	Open Prototype tab
3	Drag blue node to target frame
4	Set interaction trigger (e.g., On Click)
5	Choose animation type (e.g., Slide)
6	Test in prototype preview

Key Takeaways

Drag the blue node from the source object to the target frame to create a link.

Always set an interaction trigger like 'On Click' to activate the link.

Choose simple animations for smooth prototype performance.

Test links in prototype preview to ensure they work correctly.