Frame vs group difference in Figma - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Frame in Figma.

Figma

const container = figma.currentPage.[1]({ name: 'Main Frame' });

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

AcreateFrame

BcreateGroup

CcreateComponent

DcreateRectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using createGroup instead of createFrame

Confusing frames with components

Use createFrame to create a Frame in Figma. Groups are created with createGroup.

2fill in blank

medium

Complete the code to create a Group in Figma.

Figma

const group = figma.currentPage.[1](nodes);

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

AcreateFrame

BcreateGroup

CcreateComponent

DcreateInstance

Attempts:

3 left

💡 Hint

Common Mistakes

Using createFrame instead of createGroup

Trying to create a group without nodes

Use createGroup to group nodes together without layout constraints.

3fill in blank

hard

Fix the error in the code to add a child to a Frame.

Figma

frame.[1](child);

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

Aadd

BaddChild

Cappend

DappendChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild which does not exist

Using append which is not a Figma method

Use appendChild to add a child node to a Frame or Group in Figma.

4fill in blank

hard

Fill both blanks to check if a node is a Frame or a Group.

Figma

if (node.type === [1] || node.type === [2]) {
  console.log('Node is a container');
}

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

A"FRAME"

B"GROUP"

C"COMPONENT"

D"INSTANCE"

Attempts:

3 left

💡 Hint

Common Mistakes

Using COMPONENT or INSTANCE instead of FRAME or GROUP

Using lowercase strings instead of uppercase

Frames have type "FRAME" and groups have type "GROUP" in Figma.

5fill in blank

hard

Fill all three blanks to create a Frame, add a child, and set layout mode.

Figma

const frame = figma.currentPage.[1]({ name: 'Container' });
frame.[2](childNode);
frame.layoutMode = [3];

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

AcreateFrame

BappendChild

C"HORIZONTAL"

DcreateGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Using createGroup instead of createFrame

Using addChild instead of appendChild

Setting layoutMode to an invalid value

Create a Frame with createFrame, add a child with appendChild, and set layout mode to "HORIZONTAL" for horizontal auto-layout.