How to Create a User Flow Diagram in Figma
User flow diagrams map the path a user takes through your product to complete a goal. In Figma, flows are particularly powerful because you can link each step in the flow to the actual screen design, creating a live connection between the flow diagram and the UI.
This guide covers how to create user flows in Figma that are clear enough for engineering, detailed enough for design, and shareable with stakeholders.
Step-by-step guide
Create a dedicated Flow Diagrams page in your Figma file
Open your Figma file and click the + button next to the Pages panel on the left. Name the new page User Flows. Keeping flows on a separate page from screen designs prevents visual clutter. If you have multiple flows, name the page after the feature: Onboarding Flow or Checkout Flow.
Set up a frame and use shape conventions
Create a large frame (3000x2000) for the flow canvas. Use rectangles with 8px corner radius for regular steps, diamond shapes rotated 45 degrees for decision points, and ovals for start and end states. Color-code by meaning: green for start, white for steps, yellow for decisions, red for error states, grey for end states.
Use the Connector tool to link nodes
Press Shift+X or search for Connector in the toolbar. Click the edge of one node and drag to another to draw a connector with an arrowhead. Double-click connectors to add labels: Yes/No on decision branches, action verbs on step connectors such as Submits form or Clicks CTA. Connectors reroute automatically when you move nodes.
Add swimlanes for multi-actor flows
For flows involving multiple actors (user, system, third-party service), use colored rectangles as swimlane backgrounds. Place each actor's actions within their swimlane. Label each swimlane on the left with the actor name. Use the Figma Component feature to create a reusable swimlane frame you can resize.
Link flow nodes to screen designs using Prototype connections
Switch to the Prototype tab in the right panel. Select a flow node and drag the blue handle to the corresponding screen frame. This creates a hyperlink between the flow diagram and the actual design. Stakeholders can click a step in the flow and jump directly to the screen design.
Annotate edge cases and error states inline
Use text blocks with a light background to annotate edge cases adjacent to the relevant step: What happens if the API times out? or Empty state if no results. Place these annotations in yellow or light blue. This prevents edge cases from being discovered only during engineering.
Export and share the flow for review
Select all frames on the Flow page and go to File > Export. Export as PNG at 2x resolution for sharing. For stakeholder presentations, use Figma's Present mode (Cmd+Option+Enter on Mac) to walk through the flow full-screen. Share the Figma link with view access so engineering can reference it during development.
Common mistakes
Drawing the happy path only
Flows that show only the success path leave engineers guessing about error states, empty states, and edge cases. Draw every decision node with both Yes and No branches, and document what happens at each terminal state.
No shape consistency
Using rectangles, ovals, and free-form shapes interchangeably makes flows hard to read. Agree on a shape vocabulary before creating flows and apply it consistently across all flows in the file.
Flow diagram disconnected from screen designs
A flow diagram not linked to actual screen designs becomes stale the moment the design changes. Use Figma prototype connections to link flow steps to screens so the two stay in sync.
Tips
Install the Autoflow Figma plugin to automatically generate connectors between selected frames
Use the Flow starting point feature (right-click a frame) to define named user flows for prototype presentations
Number each step in the flow so engineers can reference specific steps in conversations
Keep each flow to a single user goal — if a flow covers two goals, split it into two diagrams
How Vantage helps
Vantage generates user journey maps directly from PRD content. The AI creates structured journey data covering the complete user path including edge cases, success criteria, and emotional context — all linked to the requirements that define each step. This complements Figma flow diagrams with the why behind each step.