Why visuals enhance design quality in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a rectangle shape in Figma.

Figma

const rect = figma.createRectangle(); rect.[1](100, rect.height);

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

Aheight

Bresize

Cfill

Dstroke

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing resize with direct property assignment like width = 100.

The resize method sets the rectangle's width to 100 (keeping height the same), which is essential for defining its size.

2fill in blank

medium

Complete the code to set the fill color of a shape to red.

Figma

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

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

A1

B0

C100

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for color values.

The red color channel uses a value between 0 and 1 in Figma's API, so 1 means full red.

3fill in blank

hard

Fix the error in the code to add a text node with content 'Hello'.

Figma

const text = figma.createText(); text.characters = [1];

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

AHello

B"Hello"

C'Hello'

D`Hello`

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around text string.

The characters property requires a string, so the text must be in quotes like 'Hello'.

4fill in blank

hard

Fill both blanks to create a frame and add a rectangle inside it.

Figma

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

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

AFrame

BRectangle

CText

DEllipse

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong shape types or incorrect creation methods.

You create a Frame and then add a Rectangle inside it as a child using figma.createRectangle().

5fill in blank

hard

Fill all three blanks to create a blue ellipse with width 150 and height 100.

Figma

const ellipse = figma.createEllipse(); ellipse.resize([1], [2]); ellipse.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: [3] } }];

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

A150

B100

C1

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping width and height order, or using 255 instead of 1 for color.

Call resize(150, 100) to set the size and blue color channel b to 1 for full blue.