Variant matrix organization in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a variant with a specific property value.

Figma

const button = figma.createComponent();
button.variantProperties = { 'Size': [1] };

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

A'Large'

B'Blue'

C'Disabled'

D'Active'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property value that doesn't match the variant property name.

Forgetting to use quotes around the string value.

Setting the variant property 'Size' to 'Large' correctly assigns the size variant.

2fill in blank

medium

Complete the code to access the variant property named 'Color'.

Figma

const variantColor = component.variantProperties[[1]];

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

A'Color'

B'State'

C'Size'

D'Shape'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong property name string.

Not using quotes around the property name.

Accessing the 'Color' property retrieves the current color variant of the component.

3fill in blank

hard

Fix the error in setting multiple variant properties at once.

Figma

component.variantProperties = [1];

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

A[ 'Size', 'Large', 'Color', 'Blue' ]

B{ Size: Large, Color: Blue }

C{ 'Size': 'Large', 'Color': 'Blue' }

D['Size' => 'Large', 'Color' => 'Blue']

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting keys or values.

Using array syntax instead of object syntax.

The variantProperties must be an object with string keys and string values, both quoted properly.

4fill in blank

hard

Fill both blanks to create a variant matrix with two properties: Size and Color.

Figma

const variantMatrix = {
  [1]: ['Small', 'Medium', 'Large'],
  [2]: ['Red', 'Green', 'Blue']
};

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

A'Size'

B'Color'

C'State'

D'Shape'

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the property names.

Using incorrect property names not defined in the variant.

The variant matrix keys must match the variant property names exactly: 'Size' and 'Color'.

5fill in blank

hard

Fill all three blanks to set variant properties and retrieve a variant node by matching properties.

Figma

component.variantProperties = { [1]: 'Medium', [2]: 'Green' };
const variantNode = component.findVariant({ [1]: 'Medium', [3]: 'Green' });

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

A'Size'

B'Color'

C'State'

D'Shape'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different property names between setting and finding variants.

Forgetting quotes around property names.

Both setting and finding variants require the exact property names. 'Size' and 'Color' are used consistently.