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'.

Practice

1. What is the main purpose of using component variants in Figma?

easy

A. To create completely unrelated designs in one file

B. To delete unused components automatically

C. To export designs faster without grouping

D. To group similar designs for easy switching between them

Solution

1. Step 1: Understand component variants concept

   Component variants group similar designs, like buttons with different colors or sizes, into one organized set.

2. Step 2: Identify the main benefit

   This grouping allows easy switching between variants without searching multiple components.

3. Final Answer:

   To group similar designs for easy switching between them -> Option D

4. Quick Check:

   Component variants = Group similar designs [OK]

Hint: Variants group similar designs for quick switching [OK]

Common Mistakes:

• Thinking variants create unrelated designs
• Confusing variants with export features
• Believing variants delete components

2. Which of the following is the correct way to create a variant in Figma?

easy

A. Select components and click 'Combine as Variants' in the right panel

B. Drag components into a new frame without grouping

C. Export components as PNG and re-import as variants

D. Rename components with the same name manually

Solution

1. Step 1: Recall variant creation method

   In Figma, you select multiple components and use the 'Combine as Variants' button in the right sidebar to create variants.

2. Step 2: Eliminate incorrect options

   Dragging into frames or exporting/importing does not create variants. Renaming alone doesn't group components as variants.

3. Final Answer:

   Select components and click 'Combine as Variants' in the right panel -> Option A

4. Quick Check:

   Combine as Variants button = create variants [OK]

Hint: Use 'Combine as Variants' button after selecting components [OK]

Common Mistakes:

• Trying to create variants by dragging into frames
• Exporting and re-importing components
• Assuming renaming groups variants

3. Given a button component with variants for color (red, blue) and size (small, large), how many variants will be created?

medium

A. 2

B. 4

C. 6

D. 8

Solution

1. Step 1: Calculate variants from properties

   Each property has options: color (2) and size (2). Total variants = 2 * 2 = 4.

2. Step 2: Confirm variant count

   All combinations of color and size create 4 unique variants.

3. Final Answer:

   4 -> Option B

4. Quick Check:

   2 colors x 2 sizes = 4 variants [OK]

Hint: Multiply options count for each property [OK]

Common Mistakes:

• Adding instead of multiplying options
• Counting only one property options
• Confusing variants with components

4. You tried to create variants but Figma shows an error. Which of these is a likely cause?

medium

A. Components have different names and are not selected together

B. You selected components and clicked 'Combine as Variants'

C. All components have the same properties and values

D. You grouped components inside a frame before combining

Solution

1. Step 1: Understand variant creation requirements

   Components must be selected together and have compatible names to combine as variants.

2. Step 2: Identify error cause

   If components have different names and are not selected simultaneously, Figma cannot combine them as variants.

3. Final Answer:

   Components have different names and are not selected together -> Option A

4. Quick Check:

   Different names + no selection = error [OK]

Hint: Select components with similar names before combining [OK]

Common Mistakes:

• Assuming grouping inside frames creates variants
• Thinking clicking combine always works
• Ignoring component names mismatch

5. You have a component with variants for state (default, hover, pressed) and color (green, yellow). You want to add a new size property with values small and medium. How many total variants will you have after adding size?

hard

A. 9

B. 6

C. 12

D. 5

Solution

1. Step 1: Calculate existing variants

   Current variants = state (3) x color (2) = 6 variants.

2. Step 2: Add new size property

   Adding size with 2 values multiplies variants: 6 x 2 = 12 total variants.

3. Final Answer:

   12 -> Option C

4. Quick Check:

   3 states x 2 colors x 2 sizes = 12 variants [OK]

Hint: Multiply all property options for total variants [OK]

Common Mistakes:

• Adding instead of multiplying property options
• Forgetting to multiply new property options
• Counting only existing variants without new property