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.

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