Variant properties (boolean, enum) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a boolean variant property named "isActive".

Figma

component.variantProperties = { "isActive": [1] }

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

Atrue

B"true"

CTrue

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around true makes it a string, not a boolean.

Using capitalized True is invalid in JavaScript/JSON context.

The boolean variant property should be set as a boolean value true without quotes.

2fill in blank

medium

Complete the code to define an enum variant property named "size" with options "small", "medium", and "large".

Figma

component.variantProperties = { "size": [1] }

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

A{small, medium, large}

B"small, medium, large"

C["small", "medium", "large"]

Dsmall | medium | large

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single string with commas instead of an array.

Using curly braces without quotes which is invalid syntax.

The enum variant property should be an array of strings representing the options.

3fill in blank

hard

Fix the error in the code to correctly set a boolean variant property "disabled" to false.

Figma

component.variantProperties = { "disabled": [1] }

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

Afalse

BFalse

C"false"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around false makes it a string.

Using capitalized False is invalid in JavaScript/JSON.

The boolean value false must be lowercase and without quotes.

4fill in blank

hard

Fill both blanks to define an enum variant property "color" with options "red", "green", and "blue", and set its default to "green".

Figma

component.variantProperties = { "color": [1] };
component.defaultVariant = { "color": [2] };

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

A["red", "green", "blue"]

B"green"

C"red"

D"blue"

Attempts:

3 left

💡 Hint

Common Mistakes

Setting default to a value not in the enum options.

Using a string with commas instead of an array for options.

The enum options are an array of strings, and the default value is one of those strings.

5fill in blank

hard

Fill all three blanks to define a boolean variant property "visible", an enum variant property "theme" with options "light" and "dark", and set default values for both.

Figma

component.variantProperties = { "visible": [1], "theme": [2] };
component.defaultVariant = { "visible": [3], "theme": "dark" };

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

Atrue

B["light", "dark"]

Cfalse

D"true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around boolean values.

Setting default boolean value as a string.

Using incorrect enum option format.

Boolean variant properties use true/false without quotes. Enum options are arrays of strings. Default values must match the property type.

Practice

1.

What is the main purpose of variant properties in Figma components?

easy

A. To create different versions of a component without duplicating it

B. To add animations to components

C. To export components as images

D. To change the color of a component automatically

Solution

1. Step 1: Understand variant properties

   Variant properties allow you to manage multiple versions of a component in one place.

2. Step 2: Identify the benefit

   This avoids creating many duplicate components and keeps design organized.

3. Final Answer:

   To create different versions of a component without duplicating it -> Option A

4. Quick Check:

   Variant properties = different versions without duplicates [OK]

Hint: Variants group versions to avoid duplicates [OK]

Common Mistakes:

• Thinking variants add animations
• Confusing variants with export options
• Believing variants change colors automatically

2.

Which of the following is the correct way to define a boolean variant property in Figma?

{
  "property": "isActive",
  "type": "boolean",
  "values": [true, false]
}

easy

A. Incorrect because boolean values should be strings

B. Correct syntax for a boolean variant property

C. Incorrect because values array should have more than two options

D. Incorrect because property name must be numeric

Solution

1. Step 1: Check property type

   The type is set to "boolean", which is correct for true/false values.

2. Step 2: Check values array

   The values array contains true and false, which are the two valid boolean options.

3. Final Answer:

   Correct syntax for a boolean variant property -> Option B

4. Quick Check:

   Boolean variant = true/false values [OK]

Hint: Boolean variants always have true and false values [OK]

Common Mistakes:

• Using strings instead of boolean true/false
• Adding more than two values for boolean
• Using numbers as property names

3.

Given this enum variant property definition:

{
  "property": "size",
  "type": "enum",
  "values": ["small", "medium", "large"]
}

What will be the selected variant if the property size is set to "medium"?

medium

A. The component variant with size set to "medium" will be shown

B. An error will occur because "medium" is not a boolean

C. The component will default to "small" size

D. The component will show all sizes at once

Solution

1. Step 1: Understand enum variant property

   Enum properties let you pick one option from a list of named values.

2. Step 2: Check the selected value

   Setting size to "medium" selects the variant with that exact value.

3. Final Answer:

   The component variant with size set to "medium" will be shown -> Option A

4. Quick Check:

   Enum property selects one named option [OK]

Hint: Enum picks one named option from list [OK]

Common Mistakes:

• Confusing enum with boolean type
• Expecting multiple variants to show
• Assuming default is always first value

4.

Identify the error in this variant property definition:

{
  "property": "visible",
  "type": "boolean",
  "values": ["true", "false"]
}

medium

A. Values array must have more than two options

B. Property name cannot be "visible"

C. Boolean values should be true and false without quotes

D. Type should be "enum" for these values

Solution

1. Step 1: Check boolean values

   Boolean variant values must be the boolean literals true and false, not strings.

2. Step 2: Identify the mistake

   Using "true" and "false" as strings is incorrect syntax for boolean type.

3. Final Answer:

   Boolean values should be true and false without quotes -> Option C

4. Quick Check:

   Boolean values = true/false literals [OK]

Hint: Boolean values never use quotes [OK]

Common Mistakes:

• Using strings instead of boolean literals
• Changing property name unnecessarily
• Confusing boolean with enum type

5.

You want to create a Figma component with a variant property theme that can be either "light" or "dark", and another boolean variant property disabled. How should you define these variant properties?

hard

A. { "property": "theme", "type": "enum", "values": [true, false] }, { "property": "disabled", "type": "boolean", "values": ["light", "dark"] }

B. { "property": "theme", "type": "boolean", "values": ["light", "dark"] }, { "property": "disabled", "type": "enum", "values": [true, false] }

C. { "property": "theme", "type": "boolean", "values": [true, false] }, { "property": "disabled", "type": "boolean", "values": ["disabled", "enabled"] }

D. { "property": "theme", "type": "enum", "values": ["light", "dark"] }, { "property": "disabled", "type": "boolean", "values": [true, false] }

Solution

1. Step 1: Define enum property for theme

   The theme property has multiple named options, so it should be an enum with values "light" and "dark".

2. Step 2: Define boolean property for disabled

   The disabled property is true or false, so it should be boolean with values true and false.

3. Final Answer:

   { "property": "theme", "type": "enum", "values": ["light", "dark"] }, { "property": "disabled", "type": "boolean", "values": [true, false] } -> Option D

4. Quick Check:

   Enum for multiple options, boolean for true/false [OK]

Hint: Enum = multiple named options, Boolean = true/false [OK]

Common Mistakes:

• Mixing enum and boolean types incorrectly
• Using strings for boolean values
• Assigning wrong values to properties