First Figma design - Interactive Code Practice

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'

AFrame

BRectangle

CEllipse

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createFrame()

Trying to create a text node instead of a frame

The createFrame() method creates a new frame in Figma.

2fill in blank

medium

Complete the code to set the frame's width to 300 pixels.

Figma

frame.[1] = 300;

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

Awidth

By

Cheight

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Setting height instead of width

Trying to set position properties instead of size

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

3fill in blank

hard

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

Figma

figma.currentPage.[1](frame);

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

Aappend

BremoveChild

CaddChild

DappendChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild which is not a Figma API method

Using removeChild which removes nodes

The appendChild() method adds a node to the current page in Figma.

4fill in blank

hard

Fill both blanks to set the frame's fill color to red.

Figma

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

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

ASOLID

BGRADIENT_LINEAR

CIMAGE

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong fill type like IMAGE or VIDEO

Setting green or blue channel instead of red

The SOLID fill type is used for solid colors. The red channel is set to 1 for full red.

5fill in blank

hard

Fill all three blanks to create a text node with content 'Hello' and font size 24.

Figma

const text = figma.createText();
await figma.loadFontAsync({ family: '[1]', style: '[2]' });
text.fontName = { family: '[1]', style: '[2]' };
text.characters = '[3]';
text.fontSize = 24;

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

ARoboto

BRegular

CHello

DBold

Attempts:

3 left

💡 Hint

Common Mistakes

Not loading the font before setting text

Using wrong font family or style names

Setting characters before font is loaded

You must set fontName to the loaded 'Roboto Regular' font before setting characters to 'Hello'.