Multi-step flows in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents a multi-step user flow in an app, showing each step number, the action taken, and the current status of that step.

Cell	Value
A1	Step
B1	Action
C1	Status
A2	1
B2	Login
C2	Completed
A3	2
B3	Select Product
C3	Completed
A4	3
B4	Add to Cart
C4	Pending
A5	4
B5	Checkout
C5	Pending

Formula Trace

IF(C2="Completed", IF(C3="Completed", IF(C4="Completed", "Flow Complete", "Step 3 Pending"), "Step 2 Pending"), "Step 1 Pending")

Step 1: C2="Completed"

Step 2: C3="Completed"

Step 3: C4="Completed"

Step 4: IF(C4="Completed", "Flow Complete", "Step 3 Pending")

Step 5: IF(C3="Completed", IF(C4="Completed", "Flow Complete", "Step 3 Pending"), "Step 2 Pending")

Step 6: IF(C2="Completed", IF(C3="Completed", IF(C4="Completed", "Flow Complete", "Step 3 Pending"), "Step 2 Pending"), "Step 1 Pending")

Cell Reference Map

    A       B             C
1 | Step | Action      | Status    |
2 | 1    | Login       | Completed |
3 | 2    | Select Product | Completed |
4 | 3    | Add to Cart | Pending   |
5 | 4    | Checkout    | Pending   |

References: C2, C3, C4

The formula checks the status cells C2, C3, and C4 to decide which step is pending or if the flow is complete.

Result

    A       B             C             D
1 | Step | Action      | Status    | Flow Status   |
2 | 1    | Login       | Completed | Step 3 Pending|
3 | 2    | Select Product | Completed |              |
4 | 3    | Add to Cart | Pending   |              |
5 | 4    | Checkout    | Pending   |              |

The formula result 'Step 3 Pending' is shown in column D for the first row, indicating the current flow status based on step completions.

Sheet Trace Quiz - 3 Questions

What does the formula check first?

A If Step 3 is completed

B If Step 1 is completed

C If Step 4 is completed

D If Step 2 is completed

Key Result

Nested IF statements check each step's status in order to determine the current flow progress.

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