Figma keeps prototyping inside the file. You draw a connection from one frame to another in the Prototype tab, and anyone with the link can click through the flow without opening a second app.
The connection lives on the frame, not on the page holding it. Same mechanism whether you’re wiring up a three-screen onboarding sequence or a whole website built on the canvas.
This landed with the Figma 2.0 release in July 2017, which replaced the plugin-based prototyping most competing tools still required back then (Figma, 2017).
What Linking Pages in Figma Actually Means
Nobody links a page. Not technically, anyway. The Page tab in the left sidebar is a container, and containers aren’t valid destinations. What gets connected is the frame sitting inside one.
The phrase covers two different things, which is where the confusion usually starts. A prototype link joins one frame to another inside the Prototype tab. A hyperlink is the other one, and it attaches a plain URL to a chunk of text or an object.
UX Tools surveyed 4,260 designers in 2022. 91% used Figma for basic prototyping, more than any other tool in the same category (UX Tools, 2022).
Worth noting why. Plenty of design tools make you install a plugin or push an export somewhere before a click does anything. Figma just builds the connection into the file.
Never touched the feature? This guide on how to build a working prototype in Figma covers it from scratch.
Figma Pages vs Frames: What You’re Really Connecting
A page is the canvas-level container you see in the left sidebar. It holds frames, and you use it to keep onboarding separate from checkout separate from settings. Frames are the actual screens.
Only frames can be destinations.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Big files tend to spread across five or six pages, and that’s fine. Figma’s frame picker reaches across every page in the file, so a click on page one can land on a frame sitting on page four.
Most people opening the frame tools in Figma for the first time treat page and frame as the same word. They aren’t, and that gap is exactly what makes cross-page prototypes work.
Prototype Links vs Hyperlinks: Two Different Connection Types
A prototype link connects a frame, or something inside a frame, to another frame. It only fires in Presentation view or through a shared prototype link.
Hyperlinks work differently. Attach a URL to selected text or an object, and clicking it opens a browser tab outside Figma entirely.
So the jobs split cleanly. Prototype links keep someone inside the flow you built. Hyperlinks send them away, which is what you’d want on a call-to-action pointing at a signup page hosted somewhere else.
What a prototype link buys you is the interaction itself. Trigger, action, transition. It reaches any frame in the same file, on any page, and it plays back in Presentation view so you can test as you go. It won’t reach a frame sitting in a different file, though. And it disappears the moment the design gets exported as a static image.
Hyperlinks trade all of that for reach. Any external destination works, and the link survives an export into the handoff tools developers actually open. You give up trigger options (click, and only click) plus every transition and animation between states.
Attach either type to a shape, an icon, or a piece of text like a button built for the prototype. Figma treats the connection the same way regardless of what’s carrying it.
How the Prototype Tab Builds a Connection
Drag from a frame’s edge handle to a target frame. That’s the whole gesture, and it opens the interaction settings for the link you just made.
Everything else follows from that one drag.
Interactions Panel Structure
Select an object or a frame while the Prototype tab is open, and a small connection node shows up on its right edge. From there you’re setting what starts the interaction, a click or a hover or a delay. Then what happens next, whether that’s navigating, opening an overlay, or scrolling. Then the frame it lands on.
There’s a shortcut for toggling between the Design and Prototype tabs without reaching for the mouse, and it sits among the handful of keyboard shortcuts in Figma worth memorizing once a file holds more than a few connections.
Flow Starting Points
A flow starting point marks the frame a prototype opens on. It’s separate from any individual link between two frames, and Figma sets one automatically the first time you draw a connection on a page.
Files can hold several flows. Onboarding as one, checkout as another, each named in Presentation view.
Enough of these connections and a flat stack of screens becomes something a viewer can actually click through.
Which Interaction Triggers Fire a Link
Figma’s Prototype tab documents 12 trigger types in total, covering everything from a simple click to a specific video timestamp (Figma Help Center). Most prototypes use four or five.
- On click or tap, which does the heavy lifting for buttons, menu items, and links
- While hovering, which reverses on its own once the cursor leaves the hotspot
- While pressing, held for as long as the mouse or the finger stays down
- Mouse down and Mouse up, often paired to mimic opening and picking from a hamburger menu
- After delay, the only one that fires without anybody doing anything, once a set number of milliseconds passes
On November 16, 2023, Figma changed how Mouse enter and Mouse leave behave, splitting continuous cursor movement into its own trigger so those two events wouldn’t fire on every pixel of motion (Figma Help Center, 2023).
That matters more than it sounds for micro-interactions. A tooltip should appear once, not flicker with every twitch of the mouse.
Keyboard and gamepad triggers fill out the rest of the list, mapped to a single key or a combination. Kiosk builds and game prototypes, mostly.
What Each Navigation Action Does
The trigger fires, then the action decides what the viewer sees. Figma documents 11 core navigation actions for that step, not counting the video-only set (Figma Help Center).
| Action | What It Does | Common Use |
|---|---|---|
| Navigate to | Replaces the current frame with the target frame | Moving between full screens |
| Open overlay | Layers a frame above the current one | Modals, tooltips, alerts |
| Swap overlay | Replaces an open overlay’s content | Switching tabs inside a modal |
| Scroll to | Jumps the view to a position in the same frame | Anchor links, carousels |
Close overlay is the quiet counterpart to Open overlay. It dismisses whatever sits on top and hands focus back to the frame underneath.
Navigate to carries most of a flow by itself, taking a viewer from a homepage tap straight into a full landing page frame.
Open link is the odd one. It’s the only action built to leave the prototype, dropping the viewer at a URL outside the file.
All of it runs on the same navigation logic underneath. The connection just decides where that logic points.
Which Transition Style Plays When a Link Fires
Transitions handle the visual change when a connection fires, which is a separate decision from the trigger and the action that set it off. Instant, dissolve, Smart Animate, and a set of directional moves.
Instant and Dissolve
Instant means no animation. The target frame is just there the moment the action fires.
Dissolve fades between the two frames over a duration you set, usually a few hundred milliseconds. Both are fine for plain screen swaps where the motion isn’t saying anything.
Smart Animate
Smart Animate matches layers sharing the same name across two frames, then animates whatever changed between them: position, size, color, opacity.
Rename a layer between frames and the match breaks silently. No warning anywhere in the interface, which is the kind of thing you find out about ten minutes before a demo.
It crosses page boundaries without complaint. A Smart Animate transition in Figma reaches a frame on a different page exactly the way it reaches one next door, because the matching runs on layer names rather than location.
Push, Slide, and Move
Directional transitions shift frames across the viewport left, right, up, or down.
- Push shifts both frames together, the old one leaving as the new one arrives
- Slide brings the new frame in over the old one, which doesn’t move
- Move shifts only the incoming frame
Mobile-style flows lean on these constantly, for tab switches and card reveals, anywhere the direction of motion should hint at where the content came from.
Linking Frames Across Different Pages
The frame picker in the Prototype tab lists every frame in the file, not just the ones on the page you happen to be looking at. Picking a destination on another page takes the same three clicks as picking one right next door.
Building a full app inside Figma usually means splitting the project across pages, and that’s an organizational choice rather than a technical requirement.
- Onboarding kept on one page, account creation on another
- Checkout separated from the marketing screens
- Settings and edge-case states tucked away from the main flow
None of that changes how connections behave. Drag a frame to a different page and its links come along, because the connection targets the frame itself, not a page path.
The file boundary is the only real wall, and it doesn’t move no matter how many pages sit inside.
How to Link One Frame to Another, Step by Step
The sequence inside the Prototype tab runs from picking a hotspot to watching the thing work in Presentation view.
- Select the object or the frame edge that will act as the hotspot
- Drag from the connection handle to the target frame
- Set the trigger, action, and transition in the interaction settings
- Press the play icon in the top right to open Presentation view
- Click through the connection and confirm it lands on the right frame
Cluttered files are where this goes wrong. Dragging the handle onto a stack of overlapping frames often lands on the wrong one, and Figma says nothing about it.
You’ll catch it the moment you click through in Presentation view. Then undo the connection and redraw it with the canvas zoomed in further.
How to Add a Hyperlink to Text or an Object
Text and objects take different paths to an external link, which is where most of the confusion in this part comes from.
Text gets the direct route.
- Select the text layer, or press Enter to edit the text and highlight just part of it
- Click Create link in the Text section of the right panel, or hit Shift-Command-U on Mac (Shift-Ctrl-U on Windows)
- Paste the URL into the field that shows up above the text
Pasting a URL onto selected text twice in a row applies it as a clickable link too, skipping that field entirely.
Shapes, frames, and buttons don’t get that field. Figma’s own support has confirmed Create link only works on text objects, so a shape needs the Open link action inside the Prototype tab instead, the same action already covered for external navigation.
Quick way to tell which one a design uses: hover over the element on the canvas. Linked text shows an underline and a small link icon. A linked shape shows nothing at all until you check its connections in the Prototype tab.
Sharing and Testing a Linked Prototype
You generate a URL from the Share modal, choose who can open it, and test it before it goes anywhere.
Figma’s 2025 S-1 filing disclosed 13 million monthly active users as of March 2025 (Figma S-1 filing, 2025). A shared link is how most of those people ever see somebody else’s prototype, without touching the source file.
Share Modal Permissions
Every shared link carries a file key plus a node-id parameter pointing at one specific frame, appended as node-id={id} to a figma.com/design or /proto link. Figma documents that format in its own developer resources.
Permissions do the rest. Owner and Can edit give full control over the file and its prototype settings. One step down, Can view lets someone look, comment, and inspect without changing anything. Then there’s Can view prototypes only, which plays the flow and leaves the working file underneath sealed.
That last tier is what covers sharing a prototype with someone who has no Figma account, since the link plays without asking anyone to sign in.
It’s also where most client-facing shares should sit by default. Nothing good comes from a stakeholder poking around the file mid-build.
Presentation View and Figma Mirror
Presentation view runs the prototype in a browser tab, the same way someone with a shared link would see it. Fastest way to catch a wrong destination or a trigger you forgot to set.
Figma Mirror pushes that same prototype to a connected phone in real time, which matters for anything built on touch-only triggers.
A hover state means nothing on a phone screen. Mirror is how you find that out before a client does.
Which Link Method Fits Your Use Case
What the click is supposed to do decides the method. Preference doesn’t come into it much.
| Method | Typical Trigger | Best For | Reversible |
|---|---|---|---|
| Navigate to | On click | Moving through an onboarding flow | Only with Back |
| Open overlay, Swap overlay | On click | Settings panels, filter menus | Yes, with Close overlay |
| Open link | On click | External calls to action, off-platform | No |
| Back | On click | Simulating an in-app back arrow | Not applicable |
Onboarding sequences run almost entirely on Navigate to, paired with a click trigger and either an instant cut or a directional push between steps.
Filter menus and settings panels behave differently. Open overlay brings the panel in, Swap overlay switches its internal states, Close overlay sends it away again.
Anything meant to leave the file (a support link, a signup page hosted elsewhere) belongs on Open link rather than a prototype connection.
Back arrows rarely need a destination frame of their own. The Back action already tracks where the viewer came from, so wiring one up by hand just creates a link that can go stale.
When Figma Links Don’t Work
Links stop working the moment a file leaves Figma’s own rendering engine. Static export, mismatched embed URL, or a different Figma product entirely.
Figma Slides makes the export problem worse than usual. Exporting a deck with an interactive prototype widget to PDF produced a blank slide where the widget should have been, a limitation Figma’s own support team confirmed and logged for future work (Figma Community Forum, 2024).
Embedding on an external page has a narrow requirement of its own. The embed URL has to match Figma’s pattern for design, board, or slides files, and anything outside that pattern falls back to a flat preview instead of a live embed. A raw image export pasted into a page carries no interaction at all, whatever the URL says.
Slides and FigJam aren’t exceptions to the Prototype tab either. They run separate systems. Slides links use their own file type in the URL, FigJam boards use another, both confirmed in Figma’s developer documentation on embeds. A connection built in a Design file’s Prototype tab doesn’t carry over, and it has to be rebuilt using whatever linking model that product offers on its own.
Permissions fail more quietly. Set a link to Only people invited without adding the recipient first, and they hit a request-access screen instead of your prototype, a friction point that comes up over and over in Figma’s own community forum.
FAQ on How To Link Pages In Figma
Is a Figma Prototype Link the Same as a Website Hyperlink?
No. A prototype link stays inside Figma and only fires in Presentation view. A hyperlink opens an external URL in a browser tab, prototype or no prototype.
Does Smart Animate Work Between Frames on Different Pages?
Yes, any page in the file. Smart Animate matches on layer names rather than location. Rename a matched layer and the animation breaks, whichever page the destination frame sits on.
Is Smart Animate Always Better Than an Instant Transition?
No. Smart Animate suits changes worth noticing: a menu expanding, a card resizing, an item shifting position. Instant is the better call for plain screen swaps where the motion carries no meaning for the viewer.
How Do You Remove or Edit an Existing Link?
Click the connection line itself rather than the frame, then change the trigger, action, or destination in the Interactions panel. Deleting means hovering over the connection and clicking the small delete icon that appears.
Why Does a Prototype Link Open the Wrong Frame or Nothing at All?
Usually the destination frame got renamed, moved, or deleted after the connection was made. The other common cause is a connection drawn from a parent container instead of the specific layer meant to be the hotspot.
Can You Link Two Separate Figma Files Together?
Not natively. The Prototype tab only reaches frames inside the same file. The workaround is a hyperlink pointing at the other file’s own shareable prototype link, which opens in a new tab.
Does Linking Work Through Figma’s Dev Mode?
Dev Mode’s inspect panel doesn’t surface prototype triggers, actions, or destinations, a gap developers have flagged on Figma’s own community forum. Checking an interaction still means switching back to the Prototype tab.
Where Does Linking Pages in Figma Break Down?
Files break before connections do. Once a prototype piles up enough frames and pages to strain its browser tab, things get slow and then they stop. Figma’s own guidance puts that ceiling near 2GB of active memory per tab, the point where large multi-page files stop loading (Figma Help Center).
As a flow approaches that, the order of the fixes matters more than the fixes themselves. Publish shared components as a library first. Split the file once pages keep multiplying. Clearing hidden layers and stale connections is the cleanup that comes after.
Publishing first keeps instances tied to their main component through the split, a failure point Figma’s own support team traces straight back to unpublished moves between files. You trade one version history for two lighter files. Worth it, once component best practices already shape how the file is built.
