Figma Prototypes: Build Interactive Flows, Not Just Screens

WHY IT EXISTS: Static design mockups can't answer the question, "what happens when I click this?" Prototyping was created to bridge that gap, allowing designers to build and test interactive user flows directly from their designs, without writing a single line of code. It makes designs testable, shareable, and easier to understand for stakeholders.

THE MENTAL MODEL: A Figma prototype is not just a set of linked screens; it's a collection of user flows. Think of a flow as a single, complete user journey, like signing up or checking out. Your prototype can contain many separate flows on the same page, turning a static file into an interactive map of the user's experience.

HOW IT WORKS: You build prototypes by creating connections. First, switch to the Prototype tab (shortcut: Shift + E). Select an object on a frame, which becomes your interactive hotspot. Click and drag the circular node that appears to another frame, which becomes the destination. This creates a connection. The first frame you connect from automatically becomes a "flow starting point." You can also manually assign a starting point to any top-level frame. A prototype can have multiple starting points, each beginning a new, independent flow. You can then share a link to the entire prototype or to a specific flow.

WHEN TO USE IT: Use prototyping to validate a design's user experience before development. It's ideal for user testing sessions to see how people navigate your design, for presenting a specific interaction to stakeholders for buy-in, or for sharing with developers to clarify functionality and transitions. It’s the primary way to explore how a user will actually interact with your designs.

WHEN NOT TO USE IT: Figma prototyping is for simulating user flows, not for building fully functional applications. It doesn't handle complex conditional logic, variables, or data input. If your prototype needs to react to real user data or manage complex state beyond simple screen navigation, you're pushing past the tool's intended purpose.

ONE CANONICAL EXAMPLE: Imagine designing an eCommerce app. On one Figma page, you can build multiple flows. One flow could start on the "Create Account" screen and walk through the entire sign-up process. A second, separate flow could start on the "Product Page" and map out the journey of adding an item to the cart and completing the checkout. Both flows live in the same file but are tested independently.