How to Make a Prototype in Figma

Z cycles through Fit width, Actual size, Fit width and height, Fill screen and Responsive while presenting. More keys are in the Figma keyboard shortcuts guide.

Each connection is one interaction: a trigger, then an action. The common triggers are On click (tap on mobile), On drag, While hovering, While pressing, Mouse enter, Mouse leave, After delay and Keyboard/Gamepad. While hovering and While pressing revert as soon as the cursor leaves or the press ends, which makes them the right choice for hover and pressed states. See how to add a hover effect in Figma.

Actions decide what happens: Navigate to, Back, Scroll to, Open link, Open, Close or Swap overlay, Set variable, Conditional, video actions, and Change to for interactive components. Animation duration can be anything from 1 to 10,000 ms. For layer-by-layer motion between screens, use Smart animate.

Overlays are frames that open on top of the current screen, like a modal, menu or toast. Draw the overlay as its own top-level frame, then connect a button to it with the Open overlay action.

• Position: pick one of 7 preset positions or place it manually.
• Close when clicking outside: turn it on so a tap on the background dismisses the overlay.
• Background: add a colour and opacity behind the overlay to dim the screen.
• Swap overlay replaces one overlay with another. The new one keeps the original's position, and the swap isn't added to the prototype's history.

A flow is a path through the prototype with its own starting point. Figma adds one automatically when you make the first connection between two frames. To add another, select a frame and click + in the Flow starting point section, or right-click the frame and choose Add starting point.

Each frame can hold one starting point but can be part of several flows. Rename a flow in the panel or by double-clicking its name on the canvas. Flows also take a description, which shows in the presentation sidebar, and each has its own copyable link. Use one flow per task you want people to test, like sign-up or checkout.

Click Share in the toolbar and copy the link, or copy a specific flow's link from the Prototype tab. Set link access to decide who can open it. Prototype-only links are available on paid plans; on Starter, viewers can open the file in the editor. To open it on a phone, see how to view a Figma prototype on your phone.