Navigation Flows in Figma are used to define and visualize how users move from one screen, page, or state to another inside a digital product prototype. A navigation flow connects frames through prototype interactions so designers can simulate realistic user journeys such as onboarding, login, signup, shopping, checkout, profile navigation, and dashboard workflows.
Figma allows designers to create multiple flows within the same prototype. Each flow can represent a different user journey and can have its own starting point. For example, an e-commerce prototype can contain separate flows for Login, Product Browsing, Add to Cart, Checkout, and Order Confirmation.
Learn more through JustAcademy Figma Training and Register for Figma Course Demo.
A Navigation Flow is a connected sequence of screens that represents the path a user follows while interacting with a website, mobile application, dashboard, or digital product.
In Figma, navigation flows are created by connecting frames using prototype interactions. Each flow normally starts from a flow starting point and continues through connected frames.
User Action
↓
Hotspot
↓
Trigger
↓
Action
↓
Destination Frame
↓
Next User Action
↓
Next Screen
Navigation Flow means the complete path a user follows from one screen to another while using a digital product.
For example:
Home
↓
Product List
↓
Product Details
↓
Cart
↓
Checkout
↓
Payment
↓
Order Confirmation
| Navigation Flow | Prototype Connection |
|---|---|
| Represents a complete user journey | Represents a connection between interaction points |
| Can contain many screens | Usually connects a hotspot to a destination |
| Has a starting point | Defines an interaction between objects or frames |
| Used for complete scenarios | Used to create individual navigation behavior |
| Example: Checkout Flow | Example: Cart Button → Cart Screen |
A navigation flow generally contains the following elements:
A Flow Starting Point defines where a particular user journey begins. Figma displays the starting point with a blue preview icon and flow name.
For example, a shopping application may have:
Shopping Flow
Starting Point → Home Screen
A top-level frame can have one flow starting point, while a frame can participate in multiple flows through its connections.
Figma can also create a starting point automatically when the first prototype connection is created between frames without an existing flow.
Flow: Login Journey
↓
Login Screen
↓
Dashboard
Here, the Login Screen acts as the starting frame for the Login Journey.
Frames represent the screens or major states of the product. A navigation flow is built by connecting these frames together.
Example:
Frame 1: Welcome
Frame 2: Login
Frame 3: Home
Frame 4: Profile
Frame 5: Settings
A hotspot is the object that the user interacts with to start an interaction. It can be a button, icon, image, text link, card, menu item, or another interactive object.
Example:
Login Button
↓
Hotspot
↓
Navigate to Dashboard
A trigger determines what user interaction causes the prototype to respond.
Common triggers include:
An action defines what happens after a trigger occurs.
Common actions include:
A basic navigation interaction can be understood using three important parts:
Trigger
↓
Action
↓
Destination
Example:
On Click
↓
Navigate To
↓
Dashboard Frame
A connection visually links a hotspot with its destination. In Figma, connections appear as blue arrows or lines between prototype elements.
[Home Screen]
|
| On Click → Navigate To
↓
[Product Screen]
The destination is the screen or state that the user reaches after an interaction. Most navigation connections lead to another top-level frame.
Example:
Source:
Home Screen
Action:
Navigate To
Destination:
Profile Screen
Home
↓
Products
↓
Product Details
↓
Cart
↓
Checkout
↓
Payment
↓
Success
This is a complete e-commerce navigation flow.
Create Frames
↓
Design Screens
↓
Open Prototype Tab
↓
Select Hotspot
↓
Create Connection
↓
Choose Trigger
↓
Choose Action
↓
Choose Destination
↓
Configure Animation
↓
Set Flow Starting Point
↓
Preview
↓
Test User Journey
On Click or On Tap is one of the most common triggers for navigation flows. It is useful for buttons, menu items, cards, navigation links, and calls to action.
Button Click
↓
On Click
↓
Navigate To
↓
Dashboard
A login flow demonstrates how users move from authentication to the main application.
Welcome
↓
Login
↓
Enter Credentials
↓
Click Login
↓
Dashboard
Possible interactions:
Welcome
↓
Sign Up
↓
Personal Details
↓
Verification
↓
Profile Setup
↓
Home
This flow can be used to demonstrate a multi-step registration experience.
Home
↓
Categories
↓
Product Listing
↓
Product Details
↓
Add to Cart
↓
Cart
↓
Address
↓
Payment
↓
Order Confirmation
This is one of the most useful navigation flow examples for practicing Figma prototyping.
Home
↓
Restaurant List
↓
Restaurant Details
↓
Food Details
↓
Add to Cart
↓
Cart
↓
Delivery Address
↓
Payment
↓
Order Tracking
Mobile applications commonly use bottom navigation to move between major sections.
Home | Search | Orders | Profile
Home → Home Screen
Search → Search Screen
Orders → Orders Screen
Profile → Profile Screen
Login
↓
Dashboard
├── Users
├── Orders
├── Products
├── Reports
└── Settings
Each dashboard menu item can navigate to a separate screen while remaining part of the overall product experience.
A navigation menu contains links that allow users to move between major sections of an application or website.
Navigation Bar
├── Home
├── About
├── Services
├── Portfolio
└── Contact
The Back action allows users to return to a previous screen in the navigation journey. It is especially useful for detail pages, modal workflows, checkout steps, and nested navigation.
Product List
↓
Product Details
↓
Back
↓
Product List
Open Overlay is useful when the user needs to see temporary content without leaving the current screen.
Examples include:
Home
↓
Click Menu
↓
Open Overlay
↓
Menu Overlay
Close Overlay removes the currently displayed overlay and returns the user to the underlying screen.
Home
↓
Open Menu
↓
Menu Overlay
↓
Close
↓
Home
Swap Overlay replaces one overlay with another without requiring the user to leave the overlay-based experience.
It can be useful for multi-step modal interactions.
Filter Overlay
↓
Apply Filter
↓
Filter Result Overlay
Scroll To allows a prototype to move to a specific object inside a scrollable container.
Home
↓
Click "About"
↓
Scroll To
↓
About Section
This is useful for long landing pages and single-page applications.
Open Link can be used when an interaction should open an external URL rather than navigate to another Figma frame.
Website Button
↓
On Click
↓
Open Link
↓
External Website
After Delay automatically triggers an interaction after a specified amount of time. It is useful for splash screens, loading screens, welcome screens, and automatic transitions.
Splash Screen
↓
After Delay
↓
Home Screen
Keyboard or Gamepad triggers can be used to create keyboard-controlled prototype experiences.
Press Enter
↓
Navigate To
↓
Next Screen
This can be useful for desktop applications, presentations, games, and keyboard-accessible experiences.
While Hovering, Mouse Enter, and Mouse Leave can be used to create interactive desktop navigation menus.
Mouse Enter
↓
Change To
↓
Hover State
When the cursor leaves the object, another interaction can return the component to its normal state.
Interactive components can simplify navigation-related interactions by allowing designers to define reusable states and interactions.
For example, a navigation component can contain:
Home
Active
Hover
Pressed
Disabled
The Change To action can switch between component variants.
Navigation Button
↓
On Click
↓
Change To
↓
Active Variant
↓
Navigate To
↓
Destination Screen
A single Figma page can contain multiple prototype flows. This is useful when a product has different user journeys.
Prototype
├── Login Flow
├── Signup Flow
├── Shopping Flow
├── Checkout Flow
├── Profile Flow
└── Settings Flow
| Flow | Starting Screen | Purpose |
|---|---|---|
| Login Flow | Login | User authentication |
| Signup Flow | Signup | New account creation |
| Shopping Flow | Home | Product browsing |
| Checkout Flow | Cart | Purchase completion |
| Profile Flow | Profile | Account management |
Use meaningful flow names instead of generic names such as Flow 1 or Flow 2.
Good examples:
Flow descriptions can provide additional information about the purpose of a flow. They can be useful for usability testing, documentation, and collaboration.
Example:
Flow Name:
Checkout Journey
Description:
Test the complete process of selecting a product,
adding it to the cart, entering an address,
and completing payment.
If the current starting frame is incorrect, the flow starting point can be moved to another top-level frame.
A flow starting point can be removed from the Prototype settings. Removing the starting point does not mean the frames are deleted; it changes how the prototype flow begins.
A frame can participate in more than one flow when its connections are used by different user journeys.
For example:
Login Screen
├── Login → Dashboard Flow
└── Signup → Signup Flow
This allows a shared screen to support multiple user journeys.
Conditional logic can be used when navigation depends on a specific state or value.
Click Login
↓
Check User Status
↓
IF user is verified
↓
Dashboard
↓
ELSE
↓
Verification Screen
Variables can store values such as strings, numbers, colors, and booleans. These values can influence prototype behavior and navigation logic.
Example:
isLoggedIn = true
IF isLoggedIn
↓
Dashboard
ELSE
↓
Login
Error states should be included in realistic navigation flows.
Login
↓
Submit
↓
Invalid Credentials
↓
Error Message
↓
Try Again
↓
Login
Form
↓
Submit
↓
Success Message
↓
Continue
↓
Dashboard
Loading screens can be included between an action and the final destination to simulate realistic application behavior.
Submit
↓
Loading
↓
Processing
↓
Success
↓
Dashboard
Form
↓
Enter Information
↓
Validate
↓
Valid?
├── Yes → Success
└── No → Error Message
Login
↓
Forgot Password
↓
Email / Phone
↓
Verification
↓
New Password
↓
Password Updated
↓
Login
Dashboard
↓
Profile
├── Edit Profile
├── Change Password
├── Notifications
└── Settings
Home
├── About
├── Services
│ ├── Service Details
│ └── Pricing
├── Portfolio
├── Blog
│ └── Blog Details
└── Contact
Home
↓
Category
↓
Product Listing
↓
Product Details
├── Add to Cart
└── Buy Now
↓
Checkout
↓
Payment
↓
Order Success
Animations make transitions between screens feel more natural and realistic. Figma prototype connections can include animation settings such as transition type, direction, easing, and duration.
Common transition concepts include:
Smart Animate can create smooth transitions when matching layers exist between source and destination frames.
Screen A
↓
Smart Animate
↓
Screen B
It is particularly useful for menus, cards, tabs, navigation indicators, and state changes.
After creating a flow, always test it in Preview or Presentation view.
Figma provides preview options for prototype flows. You can select a flow and preview it from its starting point to test the complete journey.
Flow Starting Point
↓
Preview
↓
User Interaction
↓
Next Screen
↓
Next Interaction
↓
Complete Journey
A specific flow can be shared so that stakeholders, developers, clients, or usability-test participants can review a particular user journey.
Sharing an individual flow is useful when you do not want reviewers to manually search through the entire prototype.
A large Figma project can become difficult to manage if all frames and flows are placed randomly. Organize related screens together and use clear naming conventions.
01_Authentication
02_Onboarding
03_Home
04_Product
05_Cart
06_Checkout
07_Payment
08_Profile
09_Settings
Build a login prototype using the following screens:
Welcome
↓
Login
↓
Dashboard
Add the following interactions:
Create the following screens:
Home
↓
Products
↓
Product Details
↓
Cart
↓
Checkout
↓
Payment
↓
Order Success
Connect each screen using appropriate triggers, actions, destinations, and animations.
Home
↓
Restaurants
↓
Restaurant Details
↓
Menu
↓
Food Details
↓
Cart
↓
Address
↓
Payment
↓
Order Tracking
Add overlays for filters, restaurant information, cart summaries, and confirmation dialogs.
Login
↓
Dashboard
├── Users
├── Products
├── Orders
├── Reports
└── Settings
Use a reusable sidebar component and connect each navigation item to the corresponding screen.
Home
├── Search
├── Notifications
├── Orders
└── Profile
Bottom Navigation
Home | Search | Orders | Profile
Make each bottom navigation item interactive and visually indicate the active state using component variants.
| Navigation Flow | User Flow |
|---|---|
| Focuses on movement between screens | Focuses on the complete user task |
| Built using prototype connections | Can be represented as a UX diagram or journey |
| Used heavily during prototyping | Used during UX planning and analysis |
| Example: Home → Cart | Example: User purchases a product |
| Concept | Meaning |
|---|---|
| Flow | Network of connected frames representing a user journey |
| Starting Point | Frame where a flow begins |
| Hotspot | Object where the interaction occurs |
| Trigger | Event that starts an interaction |
| Action | What happens after the trigger |
| Connection | Link between interaction point and destination |
| Destination | Target screen or state |
| Animation | Visual transition between states |
| Overlay | Temporary content displayed above the current screen |
| Preview | Used to test the prototype flow |
Figma Basics
↓
Frames
↓
Components
↓
Prototype Basics
↓
Triggers & Actions
↓
Prototype Connections
↓
Navigation Flows
↓
Multiple Flows
↓
Variables & Conditionals
↓
Interactive Components
↓
Advanced Prototyping
↓
Usability Testing
Navigation Flows are an essential part of Figma prototyping because they transform static UI designs into realistic user journeys. By combining frames, hotspots, triggers, actions, connections, destinations, starting points, animations, overlays, variables, and conditional logic, designers can simulate how users actually move through an application or website.
A well-designed navigation flow makes it easier to understand the product experience, identify usability problems, demonstrate interactions to stakeholders, perform usability testing, and communicate expected behavior to developers. For professional Figma projects, navigation flows should be organized, clearly named, consistently connected, thoroughly tested, and aligned with real user tasks.
