Rectangle and ellipse tools in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a rectangle shape in Figma.

Figma

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

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

Acolor

Bheight

Cradius

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width

Trying to set color property which is not a direct property

The width property sets the rectangle's width in pixels.

2fill in blank

medium

Complete the code to create an ellipse with a height of 150 pixels.

Figma

const ellipse = figma.createEllipse();
ellipse.[1] = 150;

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

Awidth

BcornerRadius

Cheight

DstrokeWeight

Attempts:

3 left

💡 Hint

Common Mistakes

Setting width instead of height

Using cornerRadius which applies to rectangles

The height property sets the vertical size of the ellipse.

3fill in blank

hard

Fix the error in the code to set the corner radius of a rectangle.

Figma

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

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

ARadius

BCornerRadius

CradiusValue

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

Capitalizing the 'R' in radius

Using incorrect property names like cornerRadiusValue

The correct property name is cornerRadius with a lowercase 'r'.

4fill in blank

hard

Fill both blanks to create a rectangle and set its width and height.

Figma

const rect = figma.createRectangle();
rect.[1] = 200;
rect.[2] = 100;

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

Awidth

Bheight

CcornerRadius

DstrokeWeight

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up width and height

Using cornerRadius instead of size properties

Set width and height properties to define rectangle size.

5fill in blank

hard

Fill all three blanks to create an ellipse, set its width, height, and stroke weight.

Figma

const ellipse = figma.createEllipse();
ellipse.[1] = 120;
ellipse.[2] = 80;
ellipse.[3] = 5;

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

Awidth

Bheight

CstrokeWeight

DcornerRadius

Attempts:

3 left

💡 Hint

Common Mistakes

Using cornerRadius for ellipse which does not apply

Mixing up strokeWeight with other properties

Set width, height, and strokeWeight to define ellipse size and border thickness.