Figma prototype: how to make a clickable prototype

Step 1

Plan the flow and prepare frames

A prototype isn't every screen of the product but a user's path through one task. Choose it and list the steps: for example, home → product page → cart → confirmation. Each screen should be a separate top-level frame: Figma plays only what's inside frames, and connections lead to top-level frames.

• •give frames clear names such as Home, Product and Cart, so they're easier to connect and find;
• •lay the screens out on the canvas in the order of the flow, left to right;
• •check that the buttons people should click are separate layers or components, not part of an image.

💡 Not yet comfortable with frames and auto layout? Start with Figma for beginners.

Step 2

Create your first connections

Switch to the Prototype tab in the right sidebar (Shift + E toggles between Design and Prototype). Select a button, hover over it and drag the blue plus to the frame the click should lead to. Figma sets the trigger to On click and the action to Navigate to, and a Flow 1 label appears on the first frame: that's the flow's starting point.

• •hotspot: the object where the interaction happens, such as a button, icon or card;
• •connection: the blue arrow from the hotspot to the destination frame; it holds the trigger, action and animation;
• •Back: the action for a back button; it returns to the previous screen, so you don't need to draw an arrow back by hand;
• •Open link: opens an external URL in a new tab.

💡 Rename Flow 1 after the task, for example “Checkout”, and add a description: it shows in presentation view and works well as instructions for test participants.

Step 3

Add transitions, overlays and scrolling

Once the flow clicks through, make it feel like a real app. On a connection, choose an animation: Instant, Dissolve, Move In / Move Out, Push, Slide In or Smart Animate. Smart Animate looks for matching layers on two frames (by name and position in the hierarchy) and smoothly animates the difference; that's how toggles, sliders and expanding text are made.

• •Open overlay: shows a frame on top of the current screen, for alerts, menus, tooltips or an on-screen keyboard;
• •scrolling: if content extends beyond the frame, give the frame vertical or horizontal scrolling; a header or navigation bar can be fixed so it doesn't scroll;
• •Scroll to: scrolls to an object within the frame, like an anchor link on a landing page.

💡 Smart Animate only works when layers on both frames have the same names and sit in the same place in the hierarchy. If the animation jumps, check the layer names first.

Step 4

Build interactive components

If you have a component with variants, say a button in Default, Hover and Pressed states, or a checkbox on and off, connect the variants to each other right in the component set. Then every instance of that component in your design is already interactive. Figma's own example: prototyping every combination of five checkboxes without this would take 32 copies of the frame and 160 connections; with interactive components, you just drop in the checkbox.

💡 Variables, conditionals and multiple actions on one trigger are only on Figma's paid plans. Connections, overlays and interactive components are plenty for a first prototype.

Step 5

Preview, test and share

Preview (Shift + Space) plays the prototype right in the editor, and your edits show up in the preview immediately. Present opens the prototype in presentation view in a new tab. In the prototype settings, set the device, starting frame and background color. In preview, press R to restart the prototype.

• •on a phone: open the file in the Figma mobile app and choose View prototypes, or use Mirror;
• •sharing: click Share and copy the link; a prototype-only link is a paid-plan feature, and on Starter viewers can open the source file from the prototype view;
• •testing: give someone the task from the flow description and don't help; wherever they stop or click the wrong thing is what needs fixing.

💡 Post the prototype link in the community and ask people to go through a specific flow. That way you get feedback on the logic, not just the colors.