Why efficient workflows save time in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a 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 createCircle instead of createFrame

Using createText when a frame is needed

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

2fill in blank

medium

Complete the code to set the width of a frame to 300 pixels.

Figma

frame.[1] = 300;

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

Alength

Bheight

Csize

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width

Using size which is not a direct property

The width property sets the horizontal size of the frame in pixels.

3fill in blank

hard

Fix the error in the code to add a rectangle inside the frame.

Figma

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

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

AappendChilds

BappendChild

CappendChildNode

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using append which is not a method in Figma nodes

Misspelling appendChild

The correct method to add a child node in Figma is appendChild().

4fill in blank

hard

Fill both blanks to set the fill color of a rectangle to red.

Figma

rect.fills = [{ [1]: { r: 1, g: 0, b: 0 }, [2]: 1 }];

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

Acolor

Bopacity

Calpha

Dfill

Attempts:

3 left

💡 Hint

Common Mistakes

Using alpha instead of opacity

Using fill inside the fill object

The color property defines the RGB values, and opacity sets transparency.

5fill in blank

hard

Fill all three blanks to create a text node, set its content, and add it to the frame.

Figma

const text = figma.create[1]();
text.characters = [2];
frame.[3](text);

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

AText

B"Hello, world!"

CappendChild

DRectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Rectangle instead of Text

Forgetting quotes around text content

Using append instead of appendChild

Create a text node with createText(), set its characters, then add it to the frame with appendChild().