How to Use Figma Prototyping

Figma's prototyping is capable enough for most design validation work. Knowing exactly what it can and can't do — and how to get the most out of it — saves you a lot of frustrated clicking.

Basic connections

Switch to the Prototype tab in the right panel. Select a frame or element, and drag the arrow that appears from the right edge to a destination frame.

Each connection has:

• Trigger: On click, on hover, on drag, after delay, keyboard shortcut
• Action: Navigate to, open overlay, swap overlay, scroll to, set variable
• Animation: Instant, dissolve, smart animate, move in/out, push, slide in/out
• Duration and easing

For simple flows — button leads to next screen — this is all you need. Set up 10–15 connections and you have a clickable prototype in minutes.

Smart Animate

Smart Animate is Figma's most powerful (and most misunderstood) prototyping feature. It animates the differences between two frames automatically — moving elements, resizing them, changing their properties.

For Smart Animate to work, the elements in the source and destination frames must have identical layer names. Figma compares layers by name, not by position or type. If a button is named Button/Primary in Frame A and PrimaryButton in Frame B, Smart Animate won't animate it — it'll just appear.

Practical use cases:

• An icon that changes from a hamburger menu to an X when clicked
• A card that expands from a collapsed state to a full detail view
• A toggle that slides left or right
• A list item that reveals action buttons on swipe

Set the animation to "Smart Animate" and set an easing curve. For UI motion, "Ease Out" at 300ms works for most cases. For snappier interactions, try 200ms.

Overlays

Overlays let you show a frame on top of the current screen without navigating away. Ideal for modals, dropdowns, tooltips, and side drawers.

Set the action to "Open Overlay" instead of "Navigate to." You can position the overlay:

• Centered: Modal behavior
• Manual: Position it exactly where you want it
• Top, bottom, left, right: Drawer behavior

To close the overlay: add a connection from the close button to "Close Overlay." You can also enable "Close when clicking outside" in the overlay settings.

For navigation dropdowns, use "Open Overlay" positioned below the nav item. Connect each option to the appropriate destination. This is more realistic than navigating to a new frame for every open state.

Scroll behavior

Set scroll behavior in the Frame settings (in the Design tab, not Prototype). A frame can scroll vertically, horizontally, or both.

For a mobile screen that scrolls: set the frame to the screen height (844px for iPhone 14) and the content inside it to the full content height. Enable vertical scrolling on the frame.

For sticky headers: put the header in a separate frame above the scrolling content, set to "Fixed" position in the frame settings.

Figma's scrolling is functional enough for usability testing. Don't use it for production-grade scroll animation — that's where ProtoPie takes over.

Try Figma Free

Variables in prototypes

Figma Variables unlock conditional logic in prototypes. Instead of building separate frames for every state, you manage state with variables and respond to it.

Boolean variables control layer visibility. Create a variable modal/isOpen = false. Set the modal frame visibility to be controlled by this variable. Add an interaction: on button click, set modal/isOpen to true. The modal appears. Add a close button that sets it back to false.

String variables control text content. A form that shows different messages based on which option is selected can use a string variable for the message text.

Number variables control numeric properties. A counter component can increment/decrement using variables.

To use variables in prototype interactions: select the element, go to Prototype, add an interaction, and choose "Set variable" as the action. Use "Conditional" interactions to branch: "If modal/isOpen equals true, navigate to success screen."

This gets complex quickly, but for typical interaction patterns — tabs, accordions, toggles — it eliminates a lot of frame duplication.

Sharing prototypes

Share a prototype link via the Share button, then toggle to "Prototype" mode. You can set access to "Anyone with the link" without requiring a Figma account.

Set the starting frame in the Prototype tab by dragging the "Start" indicator to the first frame of your flow. You can have multiple starting frames for different flows.

Use Figma's prototype comments for feedback — reviewers can add comments directly on the prototype view.

When Figma is enough

Figma prototyping handles:

• User flow validation (does this sequence make sense?)
• Usability testing (can users find and use key features?)
• Stakeholder presentations (does this concept get buy-in?)
• Simple micro-interactions via Smart Animate

When to move to ProtoPie

ProtoPie is worth the switch when you need:

• Sensor inputs: Accelerometer, gyroscope, microphone, camera
• Complex conditional logic: Multiple nested conditions, loops
• Real-time data: Dynamic content from APIs or spreadsheets
• Multi-device prototyping: Interactions that span phone and watch, or two phones
• Drag gestures with physics: Spring animations, momentum scrolling
• Realistic media: Video playback, audio triggers

ProtoPie starts at $17/month and has a free tier with limited features. The learning curve is steeper than Figma prototyping, but for interaction-heavy products — especially mobile apps — the output is significantly more realistic.

Most design workflows don't need ProtoPie. If your usability test requires it, you're testing interaction fidelity, not the concept. Get the concept right in Figma first.