Multi-step flows in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the best practice for multi-step flow navigation

You are designing a multi-step flow in a BI dashboard for data input. Which navigation method improves user experience the most?

A Use a progress bar with clickable steps allowing users to jump freely between steps.

B Provide only 'Next' and 'Back' buttons without any progress indicator.

C Show all steps on one page without any navigation controls.

D Use a dropdown menu to select any step at any time.

💡 Hint

Think about how users track their progress and navigate easily.

A progress bar with clickable steps helps users see where they are and jump to any step, improving clarity and control.

🧠 Conceptual

intermediate

Purpose of multi-step flows in BI dashboards

Why are multi-step flows commonly used in BI dashboards for data entry or configuration?

A To force users to complete all steps without skipping any.

B To make the dashboard load slower and appear more complex.

C To hide important information from users until the last step.

D To break complex tasks into smaller, manageable steps and reduce user errors.

💡 Hint

Consider how users handle complex tasks best.

Breaking tasks into smaller steps helps users focus and reduces mistakes, improving overall experience.

🔧 Formula Fix

advanced

Identify the accessibility issue in this multi-step flow design

Review this multi-step flow design snippet. What accessibility problem does it have?

Step 1: Input data
Step 2: Review data
Step 3: Confirm submission

Navigation: Only 'Next' and 'Back' buttons with no keyboard focus indicators or ARIA labels.

A The flow should use dropdowns instead of buttons.

B Too many steps cause confusion for users.

C Missing keyboard focus indicators and ARIA labels make it hard for screen reader and keyboard users to navigate.

D The 'Next' button should be disabled on the first step.

💡 Hint

Think about users who rely on keyboard or screen readers.

Without focus indicators and ARIA labels, users with disabilities cannot tell which element is active or understand button purposes.

🎯 Scenario

advanced

Optimizing multi-step flow for mobile BI dashboard

You are designing a multi-step flow for a mobile BI dashboard. Which approach best improves usability on small screens?

A Show all steps horizontally with small buttons to fit the screen.

B Use vertical stacking of steps with large touch targets and minimal text per step.

C Use pop-up modals for each step with complex forms.

D Require users to zoom in to read small text and buttons.

💡 Hint

Consider touch usability and screen size constraints.

Vertical stacking with large touch targets and concise content makes navigation easier on mobile devices.

❓ dax_lod_result

expert

Calculate total sales up to current step in a multi-step flow

Given a table 'Sales' with columns 'StepNumber' and 'SalesAmount', which DAX measure correctly calculates the cumulative sales up to the current step in a multi-step flow?

Figma

Total Sales Up To Step = CALCULATE(SUM(Sales[SalesAmount]), FILTER(ALL(Sales), Sales[StepNumber] <= MAX(Sales[StepNumber])))

A Total Sales Up To Step = CALCULATE(SUM(Sales[SalesAmount]), FILTER(ALL(Sales), Sales[StepNumber] <= MAX(Sales[StepNumber])))

B Total Sales Up To Step = SUMX(FILTER(Sales, Sales[StepNumber] >= MAX(Sales[StepNumber])), Sales[SalesAmount])

C Total Sales Up To Step = CALCULATE(SUM(Sales[SalesAmount]), FILTER(Sales, Sales[StepNumber] < MAX(Sales[StepNumber])))

D Total Sales Up To Step = SUM(Sales[SalesAmount])

💡 Hint

Think about how to include all steps up to the current one, ignoring filters.

Option A uses ALL to remove filters and FILTER to include all steps less than or equal to the current step, correctly calculating cumulative sales.