Component instances in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a component instance from a main component named 'Button'.

Figma

const buttonInstance = figma.currentPage.create[1]();
buttonInstance.mainComponent = figma.root.findOne(n => n.name === 'Button');

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

AComponentNode

BInstance

CComponentSet

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createComponentNode instead of createInstance

Confusing ComponentNode with Instance

Trying to create a Frame instead of an Instance

In Figma, to create an instance of a component, you use createInstance(). The instance is of type Instance.

2fill in blank

medium

Complete the code to set the position of a component instance to x=100 and y=200.

Figma

buttonInstance.x = [1];
buttonInstance.y = 200;

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

A100

B200

C0

D150

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping x and y values

Using string values instead of numbers

Setting x to 200 instead of 100

The x property sets the horizontal position. To place it at 100, assign buttonInstance.x = 100;.

3fill in blank

hard

Fix the error in the code to properly detach a component instance from its main component.

Figma

buttonInstance.[1]();

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

AremoveInstance

BdeleteInstance

CdetachInstance

DdetachComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using removeInstance instead of detachInstance

Trying to delete the instance instead of detaching

Using detachComponent which does not exist

To detach an instance from its main component in Figma, use the detachInstance() method.

4fill in blank

hard

Fill both blanks to change the text content of a text node inside a component instance.

Figma

const textNode = buttonInstance.findOne(n => n.type === [1]);
textNode.characters = [2];

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

ATEXT

B'Click me'

C'Submit'

DFRAME

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'FRAME' instead of 'TEXT' for the node type

Assigning a non-string value to characters

Not finding the text node correctly

The type of a text node is TEXT. To change its content, assign a string like 'Click me' to characters.

5fill in blank

hard

Fill all three blanks to create a new instance, set its position, and add it to the current page.

Figma

const newInstance = figma.currentPage.[1]();
newInstance.mainComponent = figma.root.findOne(n => n.name === [2]);
newInstance.[3] = 50;

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

AappendChild

B'Icon'

CcreateInstance

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Using appendChild instead of createInstance

Forgetting quotes around component name

Setting y instead of x for position

Use createInstance() to make a new instance. Set its main component by name, e.g., 'Icon'. Then set its x position to 50.