Frame nesting in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a frame inside another frame in Figma.

Figma

const parentFrame = figma.createFrame();
const childFrame = figma.createFrame();
parentFrame.[1](childFrame);

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

Aadd

BappendChild

Cappend

DaddChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' which is not a method in Figma API for nodes.

Using 'add' or 'addChild' which are not valid methods.

In Figma plugin API, appendChild is used to add a node inside another node, like nesting frames.

2fill in blank

medium

Complete the code to set the child frame's position inside the parent frame.

Figma

childFrame.x = [1];
childFrame.y = 50;

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

A100

B'100px'

Cx

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings like '100px' instead of numbers.

Using undefined variables.

Positions in Figma are numbers representing pixels, so use a number like 100 without quotes.

3fill in blank

hard

Fix the error in the code to properly nest the child frame inside the parent frame.

Figma

parentFrame.[1](childFrame);

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

AinsertChild

Bappend

CaddChild

DappendChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' which does not exist on frame nodes.

Using 'addChild' or 'insertChild' which are invalid.

The correct method to nest a frame inside another in Figma is appendChild.

4fill in blank

hard

Fill both blanks to set the child frame's width and height inside the parent frame.

Figma

childFrame.width = [1];
childFrame.height = [2];

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

A200

B300

C400

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers.

Setting width or height to zero.

Setting width to 200 and height to 300 pixels positions the child frame size properly.

5fill in blank

hard

Fill all three blanks to create a parent frame, a child frame, and nest the child inside the parent.

Figma

const parentFrame = figma.createFrame();
const childFrame = figma.createFrame();
parentFrame.[1](childFrame);
childFrame.x = [2];
childFrame.y = [3];

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

AappendChild

B150

C75

DaddChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid methods like 'addChild'.

Using strings for position values.

Use appendChild to nest frames, and set x and y positions with numbers.