Component library organization in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new component in Figma.

Figma

const button = figma.create[1]();

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

ARectangle

BText

CFrame

DEllipse

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text instead of Rectangle for button shape.

Trying to create a Frame instead of a basic shape.

In Figma, a button is often created as a Rectangle component.

2fill in blank

medium

Complete the code to add a component to the library.

Figma

const component = button.[1]();

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

Apublish

BcreateComponent

Cdetach

Dimport

Attempts:

3 left

💡 Hint

Common Mistakes

Using import instead of createComponent.

Trying to publish instead of createComponent.

To add a component to the library, you create it with createComponent.

3fill in blank

hard

Fix the error in the code to rename a component in the library.

Figma

component.[1] = 'Primary Button';

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

Aid

Btitle

Clabel

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'title' or 'label' which do not rename the component.

Trying to change 'id' which is unique and not editable.

The property to rename a component is 'name'.

4fill in blank

hard

Fill both blanks to create a variant set with two variants.

Figma

const variantSet = figma.create[1]();
variantSet.[2] = ['Primary', 'Secondary'];

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

AComponentSet

Bvariants

CvariantNames

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Component' instead of 'ComponentSet' for variant sets.

Using 'variantNames' which is not a valid property.

You create a variant set with createComponentSet and assign variant names using the 'variants' property.

5fill in blank

hard

Fill all three blanks to detach an instance and change its color.

Figma

const instance = figma.currentPage.findOne(node => node.type === 'INSTANCE');
const detached = instance.[1]();
detached.fills = [{ type: '[2]', color: { r: 1, g: 0, b: 0 } }];
figma.currentPage.[3](detached);

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

AdetachInstance

BSOLID

CappendChild

DremoveChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'removeChild' instead of 'appendChild' to add the detached node.

Using wrong fill type like 'GRADIENT' instead of 'SOLID'.

To modify an instance, you detach it first, then set its fill color with type 'SOLID', and finally add it to the page with appendChild.