Component variants in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a variant set named 'Button' in Figma.

Figma

const buttonVariant = figma.createComponentSet();
buttonVariant.name = [1];

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

AButton

BVariant

CComponent

DSet

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'Component' or 'Set' instead of descriptive names.

Leaving the name empty.

The variant set name should be 'Button' to group button variants properly.

2fill in blank

medium

Complete the code to add a variant property named 'State' to the component set.

Figma

buttonVariant.[1] = { 'State': ['Default', 'Hover', 'Pressed'] };

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

AvariantPropertyDefinitions

Bvariants

CvariantGroup

DvariantProperties

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'variants' or 'variantGroup'.

Misspelling the property name.

The property to define variant properties is 'variantProperties' in Figma API.

3fill in blank

hard

Fix the error in the code to set the variant property value to 'Hover'.

Figma

const variant = buttonVariant.children[0];
variant.[1] = {'State': 'Hover'};

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

AvariantPropertyValue

BvariantProperties

CvariantPropertyValues

DvariantProperty

Attempts:

3 left

💡 Hint

Common Mistakes

Using plural forms which are not valid for setting a single variant's value.

Using incorrect property names.

The correct property to set a variant's property value is 'variantProperties'.

4fill in blank

hard

Fill both blanks to create a new variant with 'Pressed' state and add it to the variant set.

Figma

const newVariant = figma.[1]();
newVariant.[2] = {'State': 'Pressed'};
buttonVariant.appendChild(newVariant);

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

AcreateComponent

BvariantPropertyValue

CvariantProperties

DcreateVariant

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createComponent' instead of 'createVariant'.

Confusing property names for setting the variant value.

Use 'createComponent()' to create a new variant and set its 'variantProperties' to {'State': 'Pressed'}.

5fill in blank

hard

Fill all three blanks to filter variants with 'Default' state and map their names.

Figma

const defaultVariants = buttonVariant.children.filter(v => v.[1].State === [2]).map(v => v.[3]);

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

AvariantPropertyValue

B'Default'

Cname

DvariantProperties

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for filtering or mapping.

Forgetting to quote string values.

Filter by 'variantProperties.State' equal to 'Default' and map to each variant's 'name'.