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.