How to Prototype in Figma for Interactive Designs

The gap between a screen that looks right and a screen that works right is where most design reviews stall out. Somebody points at a static mockup, asks what happens after the tap, and gets a verbal answer that three people in the room picture three different ways.

Figma closes that gap without anyone leaving the file the screens already live in. Link two frames, tell Figma what starts the interaction and what it should do, and the mockup turns into something a person can click through. Designers, PMs, and engineers all end up in there testing the same flow before any production code exists.

Worth knowing who’s on the receiving end of that share link. Figma’s S-1 filing with the Securities and Exchange Commission puts developers at 30% of its monthly active users for the three months ended March 31, 2025. The prototype you send out for review is probably reaching someone who ships code, not just another designer.

What Is Prototyping in Figma?

Three words get thrown around like they mean the same thing, and they don’t.

A wireframe maps out structure and content placement. Click it and nothing happens, which is fine. That was never the job.

A mockup gets further along. Colors, type, real spacing, the whole thing looks shipped. It also sits perfectly still on the screen.

Prototyping is the layer where design starts behaving like software. It runs on triggers, actions, and animation, and it needs zero code. Connect Frame 1 to Frame 2, set a trigger, and the person reviewing your work taps through the flow instead of imagining it.

• product designers building flows for review
• PMs validating an idea before a sprint gets scoped
• engineers checking edge cases before writing a line of code

The adoption numbers are lopsided in a way that surprised me the first time I saw them. UX Tools’ 2022 Design Tools Survey, based on responses from over 4,200 designers worldwide, found 91% used Figma for basic prototyping, ahead of every dedicated prototyping tool in the same survey.

Triggers, Actions and Animations in a Figma Prototype

Every interaction breaks down the same way. Something starts it, something happens next, and that something has a look while it’s happening. Miss one piece and the hotspot just sits there doing nothing.

Triggers attach to almost any interactive elements on the canvas, not just buttons. A whole card works. So does an icon, or a full section of a screen.

Trigger Types

The panel is longer than most flows ever need. Mouse, touch, keyboard, and video events all get their own entries, twelve trigger types in total according to Figma’s help documentation.

• on click or on tap
• on drag
• while hovering
• while pressing
• keyboard or gamepad
• mouse enter
• mouse leave
• mouse down and mouse up
• after delay
• when video hits and when video ends

In practice you’ll live in about three of them. On click for navigation, while hovering for tooltips, after delay for anything that plays on its own.

Action Types

Navigation dominates the core set.

• navigate to
• back
• open overlay
• close overlay
• swap overlay
• scroll to
• open link

Past that you get set variable, set variable mode, and conditional, which handle logic rather than movement, plus change to for switching a component’s variant.

Add it up and that’s 11 action types before you count the video-only ones (play, pause, mute, jump forward or back), according to Figma’s own prototype actions documentation.

Animation Types

Instant is the default. It swaps the frame with no motion at all.

• dissolve fades one frame into the next
• smart animate moves individual layers into their new position
• move in, move out, push, and slide describe which direction the new frame travels from

My default is instant for hard page swaps and dissolve for simple state changes. Smart animate goes anywhere position, size, or color actually moves on screen.

How Do You Build a Clickable Prototype in Figma?

Nothing in this needs a plugin or a paid seat. Any editor with edit access to the file can wire up interactions.

1. Start with a file that has at least two frames already built.
2. Select an element on the first frame, then open the Prototype tab in the right panel.
3. Drag the blue connection node from that element to the destination frame.
4. Set the trigger (on click is the default), pick an action like navigate to, and choose an animation.
5. Repeat the connection across every screen in the flow, then click Present to run it.

Starting from a blank canvas? Spend a minute setting up your frames properly. Messy structure makes every connection after it harder to manage, and you won’t notice until the flow is twenty screens deep.

The mistake I see constantly: dragging the connection from the wrong layer. Usually the frame itself instead of the button sitting inside it.

Present mode plays the flow the way a viewer would see it, hotspots and all. It’s the fastest way to catch a broken link before a stakeholder does.

Once a flow spans multiple pages, it’s worth understanding how pages connect to each other, so reorganizing a file doesn’t quietly break the prototype.

How Does Smart Animate Work in Figma?

Smart animate automatically interpolates matching layers between two frames.

Position, size, rotation, opacity, and fill color all animate on their own, with no manual keyframing. Somewhat like how CSS keyframes interpolate between defined states, just without writing any code.

The result reads like a real micro-interaction. A card growing into a detail view, a toggle sliding across, a button settling into its pressed state.

What Smart Animate Needs to Detect a Match

It matches on layer name, exactly, between both frames. The layer also has to sit in the same position within the layer hierarchy.

Miss either one and Figma quietly falls back to a plain dissolve instead of animating anything.

Duplicating a frame before you edit it is the easiest way to keep both conditions intact. The copy carries every layer name over untouched, which saves you from renaming archaeology later.

Choosing Between Instant, Dissolve and Smart Animate

Instant fits full page changes where nothing visually connects the two screens.

Dissolve is for when a state changes but nothing needs to visibly travel. Swapping an icon, that kind of thing.

Smart animate earns its keep when an element needs to move, resize, or change color in a way the eye should actually follow. Duration and easing curve settings shape how that motion feels once it’s running, and the defaults are fine until they suddenly aren’t.

Interactive Components and Component Variants in a Figma Prototype

Interactive components let a single instance switch between component variants (default, hover, pressed) without a separate frame for every state.

Figma took the feature out of beta and opened it to every editor on October 26, 2021, according to Figma’s own community announcement at the time.

Before that, everyone faked state changes by duplicating whole frames. Flows got harder to maintain and broke constantly. Nobody misses it.

Get those variant states properly built first, before any interaction gets wired on top.

Building Variant States

A variant is a named state of the same component. Default, hover, pressed, and disabled cover most of what you’ll build.

• each variant shares the same structure and layer names
• auto layout keeps padding and spacing consistent as content changes
• constraints stop elements from breaking when the component resizes

Sloppy naming between variants is the number one reason a swap looks broken in preview. Not a bug, just a typo you can’t see.

Swapping Variants with an Interaction

Change to is the action that makes the swap happen. Set a trigger like on click, choose Change to as the action, then pick the target variant.

Combine it with smart animate on the same interaction and the swap doesn’t just happen, it moves.

A checkbox flipping from unchecked to checked, animated instead of instant, is the textbook example everyone builds first.

Nesting is where it gets weird. Applying Change to on a nested instance can update the parent component’s variant, which trips people up the first time they try it.

How Do Variables and Conditional Logic Work in a Figma Prototype?

A variable is a stored value that a prototype can read and change while it’s running. Boolean, string, number, or color.

Conditional logic is the if or else rule built on top of that value. Set the condition, and the same click leads to two different outcomes depending on what the variable currently holds.

Both features shipped together under Figma’s advanced prototyping release, announced at Config in June 2023.

Creating a Variable

The four types cover most of what a prototype needs to remember.

• a boolean might track whether a user is logged in
• a string might hold the label shown on a button
• a number might count items sitting in a cart
• a color might store a theme value the whole flow reads from

Set variable and set variable mode are the actions that change a value once a trigger fires. Full setup details live in this Figma variables guide.

Writing a Conditional Expression

A conditional action checks a variable, then branches. If isLoggedIn is true, navigate to the dashboard. If not, off to the sign-in screen instead.

Pair a conditional with smart animate and the branch transitions the same way any other interaction would, rather than snapping.

One dependency catches almost everyone: the variable has to be set before the conditional checks it. That usually means two interactions stacked on the same trigger instead of one, and the order matters.

When Should You Use an Overlay Instead of a New Frame?

Overlays are for content that sits on top of the current screen without replacing it. New frames are for when the user is meant to leave that screen behind entirely.

A modal is the clearest version of the pattern, a layer sitting above everything else until it gets dismissed.

A tooltip behaves the same way, appearing on hover and vanishing the moment the cursor moves off.

Three settings do most of the work on an overlay. Position (center, top, or manual), a background dim, and a close on outside click toggle that decides whether tapping away dismisses it.

What overlays buy you:

• context stays put, the screen behind remains visible
• fewer frames to manage across a large flow
• needs an explicit close trigger or it can trap a tester on that layer

New frames trade that away for something else:

• fits full navigation and multi-step flows
• easier to test in isolation, one frame per state
• adds up fast, a ten-screen flow means ten frames to maintain

If closing it should return the user to exactly where they were, build it as an overlay. That rule has never steered me wrong.

What Screen Size Should You Prototype For?

Pick the device frame that matches where the design will actually ship, then build every frame in the flow at that exact size.

Figma ships with named presets for phones, tablets, watches, and desktop, each carrying fixed pixel dimensions straight from Figma’s own preset library.

• iPhone 15 Pro Max: 430 by 932
• iPhone 14: 390 by 844
• Desktop: 1440 by 1024
• MacBook Pro 14 inch: 1512 by 982

Mixing presets on the same page causes trouble. Figma locks a page to a single device size once a frame is created, so a layout started at a smaller preset won’t resize just because a bigger device gets picked later.

Custom size (fit) scales the design to whatever screen it’s being viewed on, but only inside presentation view. Never in the inline preview panel, which confuses people constantly.

A prototype’s frame does not stretch to match a viewer’s actual screen the way a responsive design would on a live site.

Pick the wrong viewport size early and every connection built on top of it inherits the mismatch.

Is Figma Enough, or Do You Need a Dedicated Prototyping Tool?

Figma handles navigation, state changes, and basic logic well enough for most product reviews and usability tests. That covers a lot of ground.

It starts to strain once a flow needs real gestures, device sensors, or interactions tied to individual layers rather than whole frames.

In UX Tools’ 2023 Design Tools Survey, Figma ranked first in both the basic and advanced prototyping categories, with ProtoPie the closest challenger in both.

The deciding factor is usually the interaction itself, not preference. If a flow needs a phone’s gyroscope, a microphone, or real text input validation, none of those show up in Figma’s action list the way navigate to or open overlay do.

For code handoff specifically, Figma’s own answer is Dev Mode, covered in this Figma dev mode guide. It inspects and annotates rather than exporting a finished build, which is a distinction worth setting expectations around before a handoff meeting.

ProtoPie’s own customer notes mention Zillow choosing the tool when security and easier external sharing mattered more than staying inside Figma alone.

How Do You Test, Present and Share a Figma Prototype?

Present mode plays the flow. Sharing hands it to other people. Figma Mirror puts it on an actual phone in your hand.

Each one solves a different part of getting feedback once the connections exist.

Present Mode and the Flow Starting Point

A flow starting point marks which frame the prototype opens on when Present is clicked, and Figma sets one automatically the first time two frames get connected.

• a top level frame can only hold one starting point
• the same frame can still belong to more than one flow
• a page with several flows lists them all under the Flows section of the Prototype tab

Shift plus E swaps between the Design and Prototype tabs without reaching for the mouse. If you build flows often, that one and a handful of other keyboard shortcuts are worth burning into muscle memory.

Sharing a Link and Setting Viewer Permissions

Link access controls who can open it (anyone with the link, or only people invited). Permission level controls what they can do once they’re in, view or edit.

There’s also a separate setting called can view prototypes, which restricts a viewer to the prototype itself and keeps the underlying design file out of reach.

That option sits behind a paywall, so check Figma free vs professional before assuming every viewer can be locked out of the source file.

Password protection is another layer. Set one from the file’s link sharing settings and it covers the file and any prototypes inside it together, with no minimum length or character rule attached.

Previewing on a Phone with Figma Mirror

Figma Mirror runs the prototype on a real phone by scanning a QR code from inside Figma, using the same account signed into the desktop or web app.

It is not a sharing tool. Anyone testing on their own phone needs their own Figma sign in, not just the QR code. This surprises people in user testing sessions more often than it should.

The frame doesn’t resize to fit whatever phone is running it either, so testing on a screen smaller than the frame’s own dimensions usually means scaling or cropping.

Common Mistakes That Break a Figma Prototype

Broken prototypes almost always trace back to a repeatable problem, not bad design instincts.

Catch these before a review and you skip the awkward moment of clicking through a flow that goes nowhere.

None of these show up as an error message. The flow just quietly does the wrong thing, which is exactly why testing in Present mode before a review matters more than it seems like it should.

When Figma Prototyping Does Not Apply

There’s a point where Figma stops being the right tool, and it arrives faster than most people expect.

Native gestures and hardware sensors are the hard wall. Figma’s trigger and action list has nothing for a gyroscope, microphone, or camera.

Fine tuned physics motion is the second gap. Smart Animate offers named spring presets rather than adjustable stiffness, damping, or mass values, so if the motion spec is precise, you’re approximating.

Then there are data driven screens that need live numbers from a real API rather than a value typed into a variable once. And code accurate handoff, since Dev Mode reads out a design rather than generating a working build.

The spring gap is a known one, by the way. A Figma staff member acknowledged a bug in the prototyping API’s spring duration field back in September 2023, and a follow up post on the same thread in 2025 still showed it unresolved.

Variables carry a single stored value well. They were never meant to hold a live feed, so a dashboard prototype showing real numbers usually gets faked with static screens instead of wired to anything real.

For teams that need production code out the other end, a developer handoff workflow built around Dev Mode still leaves engineers translating variables and conditionals into actual application state by hand.

FAQ on How To Prototype In Figma

What Is the Difference Between a Figma Prototype and a Figma Design File?

Every screen you draw lives in the design file, static and unconnected. The prototype lives inside that same file but layers triggers, actions, and animation on top of the frames, turning flat screens into a flow someone can click through.

Do Figma Prototypes Update Automatically When the Design Changes?

Yes. A prototype reads live from the same frames as the design, so editing text or resizing a button updates instantly in the flow. The only thing that breaks is a connection whose destination frame got deleted or renamed.

Can You Prototype in Figma on the Free Plan?

Building and testing a prototype needs no paid seat. Any editor with edit access can add triggers and actions for free.

What sits behind a paid plan is the can view prototypes permission, which hides the design file from a viewer.

How Do You Hand a Figma Prototype Off to Developers?

Tag the file Ready for Dev, then switch a developer’s view to Dev Mode.

It reads out measurements, and generates CSS, iOS, or Android code snippets from the selected layer, with Jira, GitHub, and Storybook plugins linking the file to the codebase.

What Should You Fix First When Figma Prototyping Stops Scaling?

Prototypes rarely break from a single bad connection. They break from drift. Layer names diverge from the design system, variables get duplicated across files, and a flow that once took five connections now needs thirty to cover every edge case.

The order of the fixes matters, because each one depends on the previous one holding steady.

• lock layer names to the design system first
• centralize repeated values in variables second
• rebuild the flow instead of patching it third

Skipping straight to a rebuild without fixing naming just recreates the same drift on a fresh set of frames. I’ve watched that happen twice on the same project.

Locking names before wiring interactions costs an extra planning pass up front. It also keeps thirty connections editable instead of disposable, which is the whole point.

That discipline is really design system thinking applied to interactions, and it carries over directly into how to create a design system in Figma.