Bird
Raised Fist0
Figmabi_tool~8 mins

Multi-step flows in Figma - Dashboard Guide

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Dashboard Mode - Multi-step flows
Goal: Understand User Progress Through a Multi-Step Signup Flow

This dashboard helps us see how many users start and complete each step of a signup process. It answers: "Where do users drop off?" and "How many finish the signup?"

Sample Data: User Signup Steps
User IDStepStatusTimestamp
U001Step 1: Enter EmailCompleted2024-06-01 09:00
U001Step 2: Verify EmailCompleted2024-06-01 09:05
U001Step 3: Set PasswordCompleted2024-06-01 09:07
U002Step 1: Enter EmailCompleted2024-06-01 09:10
U002Step 2: Verify EmailFailed2024-06-01 09:15
U003Step 1: Enter EmailCompleted2024-06-01 09:20
U003Step 2: Verify EmailCompleted2024-06-01 09:25
U003Step 3: Set PasswordFailed2024-06-01 09:30
U004Step 1: Enter EmailCompleted2024-06-01 09:35
U004Step 2: Verify EmailCompleted2024-06-01 09:40
U004Step 3: Set PasswordCompleted2024-06-01 09:45
Dashboard Components
  • KPI Cards: Show total users started, completed each step, and final completions.
    • Total Users Started = COUNT(DISTINCT User ID where Step = 'Step 1: Enter Email' and Status = 'Completed') = 4
    • Completed Step 2 = COUNT(DISTINCT User ID where Step = 'Step 2: Verify Email' and Status = 'Completed') = 3
    • Completed Step 3 = COUNT(DISTINCT User ID where Step = 'Step 3: Set Password' and Status = 'Completed') = 3
  • Funnel Chart: Visualizes user drop-off across steps.
    • Steps on X-axis: Step 1, Step 2, Step 3
    • Y-axis: Number of users completed each step (4, 3, 3)
  • Table: Lists users with their last completed step and status.
    • Columns: User ID, Last Step Completed, Status
    • Example row: U002, Step 1, Failed at Step 2
Dashboard Layout
+----------------------+-----------------------+
|      KPI Cards       |      Funnel Chart      |
|  (Total, Step 2, 3)  |                       |
+----------------------+-----------------------+
|                      User Progress Table                      |
+--------------------------------------------------------------+
Interactivity

Filter by Status: Choose Completed or Failed to update KPI cards, funnel, and table.

Filter by Step: Select a step to see users currently at or beyond that step.

All filters update all components to keep data consistent and show where users are in the flow.

Self Check

Apply a filter to show only users with Status = 'Failed'. Which components update and what changes?

  • KPI Cards: Numbers decrease showing only failed users.
  • Funnel Chart: Bars shrink to show fewer users completing steps.
  • User Table: Shows only users who failed and their last step.
Key Result
Dashboard shows user counts and drop-offs at each step of a signup flow with KPIs, funnel chart, and user progress table.

Practice

(1/5)
1. What is the main purpose of creating multi-step flows in Figma prototypes?
easy
A. To create a single static image
B. To add more colors and fonts to the design
C. To export the design as a PDF
D. To break complex tasks into smaller, manageable steps

Solution

  1. Step 1: Understand the concept of multi-step flows

    Multi-step flows are used to divide a complex task into smaller parts for easier user interaction.

  2. Step 2: Identify the main purpose

    The main goal is to make the task manageable and clear by breaking it down.

  3. Final Answer:

    To break complex tasks into smaller, manageable steps -> Option D

  4. Quick Check:

    Multi-step flows = smaller steps [OK]
Hint: Think of multi-step flows as step-by-step guides [OK]
Common Mistakes:
  • Confusing multi-step flows with design styling
  • Thinking multi-step flows create static images
  • Assuming multi-step flows are for exporting files
2. Which Figma feature is essential to link frames in a multi-step flow prototype?
easy
A. Components
B. Auto Layout
C. Prototype interactions
D. Vector networks

Solution

  1. Step 1: Identify how frames connect in prototypes

    Frames are linked using prototype interactions to simulate navigation.

  2. Step 2: Choose the correct Figma feature

    Prototype interactions allow clicking buttons to move between frames in a flow.

  3. Final Answer:

    Prototype interactions -> Option C

  4. Quick Check:

    Link frames = prototype interactions [OK]
Hint: Link frames with prototype interactions, not components [OK]
Common Mistakes:
  • Confusing components with navigation links
  • Using Auto Layout for linking frames
  • Thinking vector networks connect frames
3. In a multi-step flow prototype, if you want users to go back to the previous step, which interaction should you add to the 'Back' button?
medium
A. Navigate to the previous frame using 'On Click' interaction
B. Change the button color on hover
C. Add a comment to the button
D. Duplicate the current frame

Solution

  1. Step 1: Understand the purpose of the 'Back' button

    The 'Back' button should let users return to the previous step in the flow.

  2. Step 2: Identify the correct interaction

    Using 'On Click' to navigate to the previous frame enables backward navigation.

  3. Final Answer:

    Navigate to the previous frame using 'On Click' interaction -> Option A

  4. Quick Check:

    'Back' button = navigate previous frame [OK]
Hint: Use 'On Click' navigation for back buttons [OK]
Common Mistakes:
  • Changing button color instead of linking frames
  • Adding comments instead of interactions
  • Duplicating frames instead of linking
4. You created a multi-step flow but clicking the 'Next' button does not move to the next frame. What is the most likely cause?
medium
A. The frames are not named correctly
B. The 'Next' button has no prototype interaction linked
C. The button color is too light
D. The file is not saved

Solution

  1. Step 1: Check the 'Next' button setup

    If clicking does nothing, the button likely lacks a prototype interaction.

  2. Step 2: Confirm prototype interaction linking

    Without linking the button to the next frame, navigation won't work.

  3. Final Answer:

    The 'Next' button has no prototype interaction linked -> Option B

  4. Quick Check:

    No interaction = no navigation [OK]
Hint: Always link buttons with prototype interactions [OK]
Common Mistakes:
  • Assuming frame names affect navigation
  • Blaming button color for navigation issues
  • Thinking saving the file fixes prototype links
5. You want to create a multi-step flow with 4 steps in Figma. Each step is a frame. How do you ensure users can move forward and backward smoothly through all steps?
hard
A. Link each frame's 'Next' button to the following frame and 'Back' button to the previous frame using prototype interactions
B. Use Auto Layout to arrange all frames in a row
C. Group all frames into one component
D. Export each frame as a separate image and link them externally

Solution

  1. Step 1: Set up navigation buttons on each frame

    Add 'Next' and 'Back' buttons on each frame to guide users forward and backward.

  2. Step 2: Link buttons with prototype interactions

    Connect 'Next' buttons to the next frame and 'Back' buttons to the previous frame for smooth navigation.

  3. Final Answer:

    Link each frame's 'Next' button to the following frame and 'Back' button to the previous frame using prototype interactions -> Option A

  4. Quick Check:

    Buttons linked forward/back = smooth flow [OK]
Hint: Link 'Next' and 'Back' buttons to frames for smooth flow [OK]
Common Mistakes:
  • Using Auto Layout instead of prototype links
  • Grouping frames without interactions
  • Exporting frames instead of prototyping