Multi-step flows in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new frame in Figma.

Figma

const frame = figma.create[1]();

Drag options to blanks, or click blank then click option'

AText

BRectangle

CEllipse

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle instead of createFrame.

Confusing frame with other shapes like ellipse or text.

In Figma, to create a new frame, you use figma.createFrame().

2fill in blank

medium

Complete the code to add a rectangle to the frame.

Figma

const rect = figma.createRectangle();
frame.[1](rect);

Drag options to blanks, or click blank then click option'

AappendChild

BappendChildNode

CappendChildNodeToFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like appendChildNode or appendChildNodeToFrame.

Trying to assign the rectangle directly without appending.

To add a child node to a frame in Figma, use appendChild().

3fill in blank

hard

Fix the error in the code to set the rectangle's fill color to red.

Figma

rect.fills = [{ type: 'SOLID', color: [1] }];

Drag options to blanks, or click blank then click option'

A{ r: 1, g: 0, b: 0 }

B{ r: 0, g: 1, b: 0 }

C{ r: 255, g: 0, b: 0 }

D{ r: 0, g: 0, b: 255 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for color values.

Mixing up color channels.

Figma uses color values between 0 and 1, so red is { r: 1, g: 0, b: 0 }.

4fill in blank

hard

Fill both blanks to create a multi-step flow with two frames and navigate between them.

Figma

const frame1 = figma.create[1]();
const frame2 = figma.create[2]();

Drag options to blanks, or click blank then click option'

AFrame

BRectangle

CEllipse

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using shapes like Rectangle or Ellipse instead of Frame.

Mixing different object types for screens.

Multi-step flows use frames as screens, so both blanks should be 'Frame'.

5fill in blank

hard

Fill all three blanks to set up navigation between frames using prototype connections.

Figma

figma.currentPage.selection = [frame1];
figma.viewport.scrollAndZoomIntoView([frame1]);
frame1.[1] = [{
  [2]: frame2.id,
  [3]: 'ON_CLICK'
}];

Drag options to blanks, or click blank then click option'

AprototypeNodes

BdestinationId

Ctrigger

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' instead of 'prototypeNodes'.

Confusing property names for destination and trigger.

To create a prototype connection, use prototypeNodes with destinationId and trigger.

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