Creating components in Figma - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a component from a selected frame in Figma.

Figma

const component = figma.createComponent();
component.name = [1];

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

Afigma.currentPage.name

BselectedFrame.id

Ccomponent.id

DselectedFrame.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using the component's own id instead of the frame's name.

Using the page name instead of the frame's name.

We use the name of the selected frame to name the new component.

2fill in blank

medium

Complete the code to detach an instance from its main component.

Figma

const detachedNode = instance.[1]();

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

Adetach

BremoveInstance

CdetachInstance

DbreakInstance

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'detach' which is not a valid method.

Using 'removeInstance' which does not exist.

The correct method to detach an instance is detachInstance().

3fill in blank

hard

Fix the error in the code to create a component set from selected variants.

Figma

const componentSet = figma.[1](variants);

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

AcreateComponentSet

BcreateSetComponent

CmakeComponentSet

DcreateVariantSet

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping words in the method name.

Using 'createVariantSet' which is not a valid method.

The correct method to create a component set is createComponentSet().

4fill in blank

hard

Fill both blanks to correctly set the main component and add it to the page.

Figma

const mainComponent = figma.[1]();
figma.currentPage.[2](mainComponent);

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

AcreateComponent

BappendChild

CaddChild

DcreateInstance

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addChild' which is not a Figma method.

Using 'createInstance' instead of 'createComponent'.

Use createComponent() to create the component and appendChild() to add it to the page.

5fill in blank

hard

Fill all three blanks to create a component, set its name, and move it to the current page.

Figma

const comp = figma.[1]();
comp.[2] = 'Button';
figma.currentPage.[3](comp);

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

AcreateComponent

Bname

CappendChild

DcreateInstance

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createInstance' instead of 'createComponent'.

Trying to set 'title' instead of 'name'.

Using 'addChild' instead of 'appendChild'.

First, create the component with createComponent(). Then set its name. Finally, add it to the page with appendChild().