Creating and resizing frames in Figma - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new frame in Figma using the API.

Figma

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

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

AFrame

BRectangle

CGroup

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createFrame()

Using createGroup() which creates a group, not a frame

In Figma 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'

Aheight

Blength

Csize

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Setting height instead of width

Using a non-existent property like size or length

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

3fill in blank

hard

Fix the error in the code to resize a frame proportionally by setting its height to 200 pixels while keeping the aspect ratio.

Figma

const aspectRatio = frame.width / frame.[1];
frame.height = 200;
frame.width = 200 * aspectRatio;

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

Alength

Bheight

Cwidth

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using width instead of height in the ratio calculation

Using a non-existent property like length or size

The aspect ratio is width divided by height, so frame.height is needed.

4fill in blank

hard

Fill both blanks to set the frame's size to 400x300 pixels.

Figma

frame.[1] = 400;
frame.[2] = 300;

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

Awidth

Bheight

Clength

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using length or size which are not valid properties

Swapping width and height values

Use width and height properties to set frame size.

5fill in blank

hard

Fill all three blanks to create a frame, set its width to 500, and add it to the current page.

Figma

const frame = figma.[1]();
frame.[2] = 500;
figma.currentPage.[3](frame);

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

AcreateFrame

Bwidth

CappendChild

DaddChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild instead of appendChild

Forgetting to add the frame to the page

Using wrong method names

Create a frame with createFrame(), set width with width, and add it to the page with appendChild().