Multi-step flows in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with the business intelligence team.

📋 Request: Your manager wants you to design a clear multi-step flow for users to input sales data and view monthly sales reports.

📊 Data: You have access to sales data input screens and report visualization screens in Figma.

🎯 Deliverable: Create a multi-step flow prototype in Figma showing the user journey from entering sales data to viewing the monthly sales report.

Sample Data

Step	Screen Name	Description
1	Sales Data Entry	User inputs sales details: date, region, product, amount
2	Data Validation	System checks for missing or incorrect data
3	Confirmation	User reviews and confirms the entered data
4	Report Selection	User chooses monthly sales report to view
5	Monthly Sales Report	Dashboard shows sales trends by region and product

1

Step 1: Create the first screen in Figma named 'Sales Data Entry' with input fields for date, region, product, and sales amount.

Use Figma's input components and label each field clearly. Arrange fields vertically for easy reading.

Expected Result

A clean, accessible data entry screen with all required input fields visible.

2

Step 2: Design the 'Data Validation' screen that shows error messages if any input is missing or invalid.

Add text components below each input field to display validation messages in red color. Use clear language like 'Please enter a valid date.'

Expected Result

Users can see exactly which fields need correction before proceeding.

3

Step 3: Create a 'Confirmation' screen where users can review all entered data before submission.

Display the entered data in a simple list format with labels and values. Add 'Edit' and 'Confirm' buttons.

Expected Result

Users can easily verify their input and choose to edit or confirm.

4

Step 4: Design the 'Report Selection' screen with options for different report types, highlighting 'Monthly Sales Report'.

Use buttons or cards for each report type. Highlight the monthly sales report option with a distinct color or border.

Expected Result

Users can clearly see and select the monthly sales report option.

5

Step 5: Build the 'Monthly Sales Report' dashboard screen showing sales trends by region and product using charts.

Include a line chart for sales over months and a bar chart comparing regions. Use clear legends and labels.

Expected Result

Users can understand sales trends visually and identify top-performing regions and products.

6

Step 6: Link all screens in Figma using prototyping connections to create a smooth multi-step flow.

Connect buttons like 'Next', 'Confirm', and report selections to their respective screens with transitions.

Expected Result

A clickable prototype that guides users step-by-step from data entry to report viewing.

Final Result

Sales Data

Entry Screen

↓

Report

Selection

✓The multi-step flow guides users clearly through data entry, validation, confirmation, report selection, and viewing.

✓Validation messages help users correct errors before submission, reducing mistakes.

✓The final dashboard visually presents sales trends, making insights easy to understand.

Bonus Challenge

Add accessibility features to the Figma prototype, such as keyboard navigation hints and ARIA labels.

Show Hint

Use Figma's accessibility plugins and add text descriptions for screen readers and focus indicators for keyboard users.

Practice

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