How to Link Pages in Figma for Seamless Navigation

You’ve designed beautiful screens. Now they need to actually connect.

Learning how to link pages in Figma turns static frames into clickable prototypes that clients and developers can interact with.

The Prototype tab makes this surprisingly quick. A few drags, a couple of clicks, and your screens flow together like a real app.

This guide walks you through selecting hotspots, creating connections, configuring triggers, and testing your prototype in presentation mode.

You’ll also find troubleshooting fixes for common issues and three different methods depending on your workflow.

Takes about 3 minutes. No plugins required.

How to Link Pages in Figma

Linking pages in Figma is the process of creating interactive connections between frames using the Prototype tab.

You need this when building clickable mockups, testing user flows, or presenting multi-screen designs to clients.

This guide covers 5 steps requiring about 3 minutes and edit access to your design file.

The connections you create here become the foundation of your prototype in Figma, turning static screens into something people can actually click through.

Prerequisites

Before you start connecting frames, make sure you have these basics covered:

• Figma account (Free, Professional, or Organization plan)
• A file with multiple frames already created
• Edit access to the design file
• Frames named clearly for easy identification

Time estimate: 3 minutes.

If you’re working on a wireframe or high-fidelity mockup, the process works exactly the same.

Step One: How Do You Access the Prototype Tab?

Switch from the Design tab to the Prototype tab in the right sidebar to activate connection tools and see interaction handles on your selected elements.

Action

1. Look at the right sidebar and click “Prototype” at the top
2. Select any frame or object on your canvas
3. A blue circular node appears on the right edge of the selected element

Purpose

The Prototype tab contains all the interaction and animation settings you need.

Without switching to this tab, you won’t see the connection handles that let you drag links between frames.

This is where you’ll configure triggers, transitions, and destination frames for your entire navigation flow.

Step Two: How Do You Select the Hotspot Element?

Click on a button, icon, text layer, or image that you want users to interact with; this becomes your hotspot where the click action originates.

Action

1. On your canvas, click the button, icon, or text element
2. Selection highlights with a blue bounding box
3. The interaction handle (circular node) appears on the right edge

Purpose

The hotspot determines where users can click in your prototype.

Choose elements that make sense for user interface patterns. Buttons, nav items, cards, and call-to-action elements work best.

If you’re building a hamburger menu, select the menu icon itself as your hotspot.

Step Three: How Do You Create a Connection to Another Frame?

Drag from the hotspot’s circular node to any destination frame on your canvas; a blue line (called a “noodle”) connects them and opens the interaction details panel.

Action

1. Hover over your selected element, then drag the plus icon toward your destination frame
2. A blue connection line links the hotspot to the target
3. The interaction details panel opens automatically

Purpose

This visual connection establishes the navigation path between screens.

The blue noodle shows exactly which element leads where. You can see all connections at once by pressing Shift + E to toggle prototype view.

Think of it like creating the interactive elements that drive your entire user experience flow.

Step Four: How Do You Configure the Interaction Settings?

Use the interaction details panel to set your trigger (On click), action (Navigate to), and confirm the correct destination frame appears in the dropdown.

Action

1. Trigger dropdown: Select “On click” (this is the default)
2. Action dropdown: Select “Navigate to”
3. Destination: Confirm your target frame appears in the field

Purpose

These settings control how users interact with your prototype.

“On click” is the standard trigger for buttons and links. Other options include “On hover” for tooltip effects or “While pressing” for hold interactions.

The “Navigate to” action moves users to a new screen. You can also choose “Open link” if you need to send users to an external URL.

Step Five: How Do You Test the Linked Prototype?

Click the Present button in the top-right corner (or press Shift + Spacebar) to open the prototype viewer and verify all connections work correctly.

Action

1. Top-right corner: Click the “Present” button (or use the keyboard shortcut)
2. Prototype viewer opens in a new tab
3. Click your hotspot element to confirm it navigates to the destination frame

Purpose

Testing validates your connections before sharing with stakeholders or clients.

The presentation mode shows exactly what users will see. Click through your entire user flow to make sure every link lands on the right screen.

If something breaks, exit presentation mode and check that your destination is a top-level frame, not an object nested inside another frame.

Verification

After creating your prototype connections, confirm everything works before sharing with clients or developers.

Here’s how to verify your linked frames:

• Press Shift + E to toggle prototype view and see all blue noodles
• Check that a “Flow 1” label appears on your starting frame
• Run through presentation mode and click every hotspot
• Confirm each interaction lands on the correct destination frame

If you’re building something complex like a carousel in Figma, test each slide transition individually.

Missing connections show up fast when you click through the whole flow.

Troubleshooting

Connection Noodle Does Not Appear When Dragging

Issue: You drag from an element but no blue line appears.

Solution: Check that you’re in the Prototype tab, not the Design tab. Right sidebar > Prototype.

Clicking Hotspot Does Nothing in Present Mode

Issue: Your button doesn’t respond when clicked in the prototype viewer.

Solution: Verify your destination is a top-level frame on the canvas, not an object nested inside another frame.

Cannot Link to a Frame on a Different Figma Page

Issue: You want to connect screens that live on separate pages within your file.

Solution: Move the destination frame to the same page temporarily, create the connection, then move it back if needed.

Alternative: Copy the prototype URL of the second page and use “Open link” action instead of “Navigate to.”

If you need to copy Figma files to another account, your prototype connections transfer with the frames.

Animation Is Instant With No Transition

Issue: Screens change abruptly without any visual effect.

Solution: Open the interaction details panel > Animation section > Select a transition type (Dissolve, Smart animate, Slide in).

Want smoother motion? Learn how to animate in Figma for more control over timing and easing curves.

Alternative Methods

Three ways to create prototype connections, each suited to different workflows.

Method A: Prototype Tab Drag

Visual drag-and-drop from element to frame. 3 steps total.

Best for single connections and quick linking.

Method B: Interactions Section in Right Sidebar

Click the “+” in the Interactions section > Select trigger > Select action > Choose destination.

Works better for adding complex interactions, overlays, or micro-interactions without dragging across the canvas.

Method C: Bulk Connections

Select multiple hotspots > Drag one connection node > All selected objects connect to the same destination frame.

Perfect for navbar elements or repeated buttons that all lead to the same screen.

When to Use Each Method

• Method A: Individual buttons, one-off links
• Method B: Overlays, scroll triggers, hover states
• Method C: Navigation bars, footer links, card grids pointing to the same page

If you’re building components in Figma, add prototype connections to the main component so every instance inherits the same behavior.

Related Processes

Once you’ve linked your pages, these related skills help you build more complete prototypes:

• Create variants in Figma for button states and interactive components
• Make Figma interactive with hover effects and scroll behaviors
• Share Figma prototype without account so clients can view without signing up
• Export Figma to PDF for static documentation
• Set fixed position when scrolling for sticky headers and navigation

For full app designs, check out how to use Figma to design an app from start to finish.

Need to hand off to developers? Learn how to turn Figma into code or export Figma to HTML directly.

FAQ on How To Link Pages In Figma

What is a hotspot in Figma prototyping?

A hotspot is any object that triggers an interaction when clicked. Buttons, icons, images, and text layers can all serve as hotspots.

You select the hotspot first, then drag a connection to your destination frame.

Can I link frames across different Figma pages?

Not directly. Figma only allows prototype connections between frames on the same page.

Workaround: move frames temporarily to link them, or use the “Open link” action with the prototype URL of another page.

Why is my prototype connection not working?

Check three things: you’re in the Prototype tab, your destination is a top-level frame, and the trigger is set correctly.

Press Shift + E to see all connections visually on your canvas.

How do I add animations between linked pages?

Click on the connection noodle or select your hotspot. In the interaction details panel, find the Animation section.

Choose Dissolve, Slide, or Smart animate. Adjust duration and easing as needed.

What triggers are available besides On Click?

Figma offers On hover, While pressing, Mouse enter, Mouse leave, After delay, and Key/gamepad input.

On click handles most navigation. On hover works great for tooltips and dropdown menus.

How do I create multiple connections from one element?

Select your hotspot and click the “+” in the Interactions section to add another trigger.

One button can have different behaviors for click, hover, and keyboard input simultaneously.

Can I link to an external URL instead of a frame?

Yes. Select your hotspot, set the action to Open link, and paste any URL.

External links open in a new browser tab when clicked during presentation mode.

How do I see all prototype connections at once?

Press Shift + E or click the flow icon in the toolbar. All blue noodles and connection paths become visible.

Flow starting points display labels on the first frame of each flow.

What is the difference between Navigate to and Swap overlay?

Navigate to moves users to a completely new screen. Swap overlay replaces the current overlay with another while staying on the same base frame.

Use Navigate to for page transitions, overlays for modals.

How do I delete a prototype connection?

Select the blue connection noodle and press Delete. You can also drag the noodle to an empty canvas area and release it.

The hotspot remains; only the connection disappears.

Conclusion

You now know how to link pages in Figma using the Prototype tab, hotspots, and connection noodles.

The whole process takes minutes. Select an element, drag to your destination frame, configure the trigger, and test in presentation mode.

Bulk connections speed things up when multiple buttons point to the same screen.

Smart animate and transition effects add polish to your user flows.

If connections break, check that destinations are top-level frames and that you’re working within the same Figma page.

Your static website design in Figma is now a clickable prototype ready for client review, usability testing, or developer handoff.

Start simple with basic click-through navigation, then explore overlays, scroll behaviors, and auto layout interactions as your designs get more complex.