Figma Prototyping Basics

A prototype turns static screens into a clickable simulation. Stakeholders click through it like a real app, even though nothing is coded yet. Prototypes help teams test ideas, present to clients, and communicate how screens connect before any development starts.

Entering Prototype Mode

Click the Prototype tab in the right panel. The canvas now shows connection arrows between frames. Every interaction you create appears here as a blue noodle line linking one frame to another.

Creating a Basic Connection

1. Select an object (a button, for example) in Prototype mode.
2. Hover over the object until a blue circle appears on its right edge.
3. Drag the circle to a destination frame.
4. A connection arrow appears and an interaction settings panel opens.
5. Set the trigger, action, and animation.

Interaction Anatomy

Trigger → Action → Animation

Example:
  Trigger:   On Click (user taps the button)
  Action:    Navigate To (go to Frame 2)
  Animation: Smart Animate, 300ms, Ease Out

Triggers

• On Click – Fires when the user clicks or taps the element.
• On Hover – Fires when the cursor moves over the element.
• On Press – Fires while the mouse button is held down.
• On Drag – Fires when the user drags the element.
• After Delay – Fires automatically after a set number of milliseconds. Useful for loading screens or auto-advancing onboarding slides.
• Key/Gamepad – Fires when a specific keyboard key is pressed.

Actions

• Navigate To – Takes the viewer to another frame.
• Open Overlay – Displays a frame on top of the current screen (like a modal or dropdown).
• Swap Overlay – Replaces an existing overlay with a new one.
• Close Overlay – Closes the open overlay.
• Scroll To – Scrolls to a specific position in the frame.
• Back – Returns to the previous screen in the navigation history.

Animations

• Instant – No animation; jumps directly to the destination.
• Dissolve – Cross-fades between the two screens.
• Smart Animate – Animates matching layers between two frames. If a button exists in the same position in both frames, Figma moves/resizes it smoothly. This is the most realistic animation type.
• Move In / Move Out – New screen slides in from a direction.
• Push – Current screen pushes off as the new screen slides in.
• Slide In / Slide Out – Current screen stays; new screen slides over it.

Setting a Starting Frame

Click the frame that represents the first screen of your prototype. In the right panel under Prototype, click + next to Flow starting point. This marks it as the starting point. You can have multiple flows (for example, one for a logged-out state and one for a logged-in state).

Previewing a Prototype

Click the Play button (triangle icon) in the top right of the toolbar. Figma opens the prototype in a new browser tab or preview window. Click through the interactions to test the flow.

Prototype Settings

With nothing selected, click the Prototype tab. You see global settings:

• Device – Choose the device frame to display around the prototype (iPhone, Android, browser window, etc.).
• Background – Color shown behind the device frame in the preview.
• Starting frame – Confirms which frame the flow begins on.

Scrollable Frames

To make a frame scroll vertically (like a long web page), set the frame to a specific height (e.g., 844px to match the phone screen) but extend the content below 844px. In Prototype mode, click the frame and set Overflow behavior to Vertical scrolling. The prototype now scrolls when the user drags down.

Sharing a Prototype

Click Share in the top right and set permissions to Anyone with the link can view. Copy the link and send it to stakeholders. They can view and interact with the prototype in a browser without needing a Figma account.