Design sprint workflow 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'

AFrame

BCircle

CRectangle

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle instead of createFrame

Using createText when a frame is needed

In Figma's plugin API, createFrame() creates a new frame object.

2fill in blank

medium

Complete the code to set the frame's background color to white.

Figma

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

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

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

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

C{ r: 0.5, g: 0.5, b: 0.5 }

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

Attempts:

3 left

💡 Hint

Common Mistakes

Using black color { r: 0, g: 0, b: 0 }

Using red color instead of white

White color in RGB is represented by r=1, g=1, b=1 in Figma's color system.

3fill in blank

hard

Fix the error in the code to add the frame to the current page.

Figma

figma.currentPage.[1](frame);

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

Aappend

BaddChild

CappendChild

DappendChildNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild which does not exist

Using append which is not a method here

The correct method to add a node to the page is appendChild().

4fill in blank

hard

Fill both blanks to create a text node and set its content.

Figma

const text = figma.create[1]();
text.[2] = 'Design Sprint';

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

AText

Bcharacters

Cname

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' property instead of 'characters' to set text

Creating a Frame instead of Text node

Use createText() to create a text node and set its characters property to change the text content.

5fill in blank

hard

Fill all three blanks to group the frame and text into a component.

Figma

const component = figma.create[1]();
component.appendChild([2]);
component.appendChild([3]);

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

AComponent

Bframe

Ctext

DGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Using createGroup instead of createComponent

Appending wrong variables or in wrong order

Create a component with createComponent() and add the frame and text nodes as children.