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.