Why shapes build visual elements in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a rectangle shape in Figma.

Figma

const rectangle = figma.create[1]();

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

ARectangle

BText

CLine

DEllipse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Ellipse' instead of 'Rectangle' will create a circle or oval shape.

Using 'Text' creates text elements, not shapes.

The Rectangle shape is created using figma.createRectangle() in Figma's plugin API.

2fill in blank

medium

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

Figma

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

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

A0

B0.5

C255

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 is incorrect because Figma uses 0-1 scale, not 0-255.

Using 0 means no red color.

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

3fill in blank

hard

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

Figma

figma.currentPage.[1](rectangle);

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

Aappend

BaddChild

CappendChild

DappendChildNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' causes an error because Figma API uses 'appendChild'.

Using 'addChild' is not a valid method.

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

4fill in blank

hard

Fill both blanks to create a circle shape and set its radius.

Figma

const circle = figma.create[1]();
circle.[2] = 50;

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

AEllipse

BRectangle

Cradius

DcornerRadius

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Rectangle' creates a rectangle shape, not a circle.

Using 'radius' property does not exist on the shape.

Circles are created with createEllipse(). The radius is set by cornerRadius for perfect circles.

5fill in blank

hard

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

Figma

const text = figma.create[1]();
text.[2] = 'Hello World';
figma.currentPage.[3](text);

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

AText

Bcharacters

CappendChild

DRectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Rectangle' instead of 'Text' creates a shape, not text.

Using 'text' property instead of 'characters' causes no text to appear.

Using 'append' instead of 'appendChild' causes an error.

Text elements are created with createText(). The text content is set with characters. To add it to the page, use appendChild().