Figma Prototype Flows: Isolate User Journeys

WHY IT EXISTS: A single design file often contains many user paths, like signing up, checking out, or changing a password. Presenting these as one giant, interconnected prototype is confusing. Prototype Flows were created to isolate and present these individual journeys cleanly from a single source of truth.

THE MENTAL MODEL: Think of your Figma page as a city map and Prototype Flows as different guided bus tours. One tour shows the 'Historic Downtown' (user onboarding), another shows the 'Shopping District' (product browsing). They might share some streets (common screens like a homepage), but each tour has a distinct start point and purpose.

HOW IT WORKS: A flow is a collection of connected frames that begins at a designated 'flow starting point' on a top-level frame. You create one by adding a prototype connection or by manually adding a starting point in the Prototype panel. Figma automatically names them 'Flow 1,' 'Flow 2,' etc., but you should rename them for clarity (e.g., 'New User Onboarding'). Any frame connected to the starting point, even indirectly, becomes part of that flow. A frame can exist in multiple flows; if a user reaches that shared frame, they can then access interactions leading to any of the flows it belongs to.

WHEN TO USE IT: Use flows to manage complexity in large application designs. They are perfect for user testing specific tasks, presenting different scenarios to stakeholders, or simply organizing your own work. For example, create separate flows for a new user's first experience versus a returning user's dashboard interaction, all within the same file.

WHEN NOT TO USE IT: For very simple prototypes with a single, linear path, creating a separate flow is unnecessary overhead. If your entire design is just a few screens showing one sequence, a single default prototype is sufficient.

ONE CANONICAL EXAMPLE: In a shopping app design, you can create three flows on one page. 'Flow 1: Account Creation' guides a user through sign-up screens. 'Flow 2: Browse Items' starts on the homepage and covers product discovery. 'Flow 3: Checkout Process' begins from the shopping cart. A single frame, like a product details page, could be part of both the browsing and checkout flows, allowing a user to transition between them.