Multi-step flows in Figma - Step-by-Step Guide

Introduction

Multi-step flows help you show a process or journey in steps. This makes it easy for users to follow complex tasks one step at a time. You can create clickable flows that guide users through each stage clearly.

When you want to show a signup process with multiple screens

When your dashboard needs to guide users through data entry step-by-step

When explaining a workflow like order processing in a presentation

When designing onboarding screens that require user actions in sequence

When you want to test user navigation through a series of screens

Steps

Step 1: Create frames for each step of your flow

- Canvas area

You see separate frames representing each step of the process

💡 Name each frame clearly to match the step it represents

Step 2: Select the first frame

- Canvas area

The frame is highlighted and ready for interaction setup

Step 3: Click the Prototype tab in the right sidebar

- Right sidebar

Prototype options appear for the selected frame

Step 4: Drag the circular node from the first frame to the second frame

- Canvas area, on the first frame's right edge

A connection arrow appears showing the link between step 1 and step 2

Step 5: Set the interaction details in the Prototype tab

- Prototype tab

Interaction is set to 'On Click' with navigation to the second frame

💡 Choose 'Navigate To' action for smooth step transitions

Step 6: Repeat linking frames for all steps in your flow

- Canvas area and Prototype tab

All frames are connected in order, forming a multi-step flow

Step 7: Click the Present button at the top-right

- Top-right corner

The flow opens in presentation mode, allowing you to click through steps

Before vs After

Before

Frames are separate with no links; clicking does nothing

After

Frames are connected; clicking on elements moves to the next step smoothly

Settings Reference

Interaction Trigger

📍 Prototype tab

Defines how the user moves from one step to the next

Default: On Click

Animation Type

📍 Prototype tab

Controls the visual effect when changing steps

Default: Instant

Transition Duration

📍 Prototype tab

Sets how long the animation lasts between steps

Default: 0.3s

Common Mistakes

Not linking all frames in the correct order

Users get stuck or jump to wrong steps, breaking the flow

Ensure each frame links to the next step in sequence

Using 'Instant' animation for all transitions

The flow feels abrupt and confusing without smooth changes

Use slide or dissolve animations for clearer step changes

Forgetting to test the flow in Present mode

You might miss broken links or unexpected behavior

Always preview your flow to check navigation works as expected

Summary

Multi-step flows guide users through processes step-by-step in Figma

You create flows by linking frames with interactions in the Prototype tab

Remember to set clear triggers and smooth animations for best user experience