Why Figma is the industry standard - Test Your Understanding

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

BCircle

CRectangle

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createFrame()

The createFrame() method creates a new frame in Figma, which is a container for design elements.

2fill in blank

medium

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

Figma

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

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

A1

B0

C255

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for color values

In Figma, color values range from 0 to 1. To set red fully, r should be 1.

3fill in blank

hard

Fix the error in the code to append a child node to a frame.

Figma

frame.[1](child);

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

Aadd

BappendChild

Cappend

DaddChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild() which does not exist in Figma API

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

4fill in blank

hard

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

Figma

const text = figma.create[1]();
text.[2] = 'Hello Figma!';

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 content

You create a text node with createText() and set its content using the characters property.

5fill in blank

hard

Fill all three blanks to create a rectangle, set its size, and add it to the current page.

Figma

const rect = figma.create[1]();
rect.[2] = 100;
rect.[3] = 50;
figma.currentPage.appendChild(rect);

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

ARectangle

Bwidth

Cheight

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Frame' instead of 'Rectangle' for shape creation

Mixing up width and height properties

Create a rectangle with createRectangle(), set its width and height, then add it to the page.