Component set best practices in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a component set with multiple variants.

Figma

componentSet = createComponentSet({ variants: [1] })

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

A['small', 'medium', 'large']

Btrue

Cnull

D42

Attempts:

3 left

💡 Hint

Common Mistakes

Using a boolean or number instead of an array for variants.

Leaving variants as null or undefined.

The variants property should be an array of variant names like ['small', 'medium', 'large'] to define different component states.

2fill in blank

medium

Complete the code to set the default variant in a component set.

Figma

componentSet.defaultVariant = [1]

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

Afalse

Bnull

C0

D'medium'

Attempts:

3 left

💡 Hint

Common Mistakes

Setting defaultVariant to a number or boolean.

Leaving defaultVariant undefined.

The defaultVariant should be set to one of the variant names as a string, for example 'medium'.

3fill in blank

hard

Fix the error in the code that merges two component sets.

Figma

mergedSet = mergeComponentSets(setA, [1])

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

A42

Bnull

CsetB

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or a boolean instead of a component set.

Passing a number instead of a component set.

To merge two component sets, you must pass the second component set object, like setB.

4fill in blank

hard

Fill both blanks to define variant properties and their types in a component set.

Figma

componentSet.variantProperties = { size: [1], color: [2] }

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

A['small', 'medium', 'large']

B['red', 'green', 'blue']

C'string'

D'number'

Attempts:

3 left

💡 Hint

Common Mistakes

Using type strings like 'string' or 'number' instead of arrays.

Mixing types between variant properties.

Variant properties are defined as arrays of possible values, like sizes and colors.

5fill in blank

hard

Fill all three blanks to create a component set with variants, default variant, and description.

Figma

componentSet = {
  variants: [1],
  defaultVariant: [2],
  description: [3]
}

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

A['primary', 'secondary']

B'primary'

C'Button styles for main actions'

D'default'

Attempts:

3 left

💡 Hint

Common Mistakes

Setting defaultVariant to a value not in variants.

Using non-string for description.

Using a string instead of array for variants.

The variants array lists variant names, defaultVariant is one of those names, and description is a string explaining the component set.