Why frames are the foundation of design in Figma - 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'

AFrame

BRectangle

CText

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createFrame()

Confusing frames with components

In Figma, createFrame() is used to create a new frame, which is the foundation for organizing design elements.

2fill in blank

medium

Complete the code to set the frame's layout mode to vertical.

Figma

frame.layoutMode = '[1]';

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

Agrid

BHORIZONTAL

CVERTICAL

DNONE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'HORIZONTAL' when vertical stacking is needed

Using 'grid' which is not a valid layoutMode value

Setting layoutMode to VERTICAL arranges child elements stacked top to bottom inside the frame.

3fill in blank

hard

Fix the error in the code to add a child rectangle to the frame.

Figma

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

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

AappendChild

BaddChild

Cappend

DappendChildNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild which does not exist

Using append which is not a method on frames

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

4fill in blank

hard

Fill both blanks to set the frame's padding and spacing between items.

Figma

frame.padding[1] = 16;
frame.item[2] = 8;

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

ATop

BBottom

CSpacing

DPadding

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing padding with spacing properties

Using incorrect property names like paddingBottom for top padding

Use paddingTop to set the top padding and itemSpacing to set space between child items in a frame.

5fill in blank

hard

Fill all three blanks to create a frame, set its layout, and add a text child.

Figma

const frame = figma.create[1]();
frame.layoutMode = '[2]';
const text = figma.create[3]();
frame.appendChild(text);

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

AFrame

BVERTICAL

CText

DRectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Rectangle instead of Text for the child node

Setting layoutMode to an invalid value

This code creates a frame, sets its layout to VERTICAL, creates a text node, and adds it as a child to the frame.