Why Variant properties (boolean, enum) in Figma? - Purpose & Use Cases

The Big Idea

Discover how one smart setting can save you hours of tedious design work!

The Scenario

Imagine you have dozens of design components, each with multiple states like active, disabled, or hovered. Manually creating separate versions for every combination means endless copies and confusion.

The Problem

Manually managing these variations is slow and error-prone. You risk inconsistent designs, wasted time updating each version, and difficulty tracking changes across many files.

The Solution

Variant properties let you define boolean or enum options inside a single component. This means you can switch states easily without duplicating components, keeping your design organized and consistent.

Before vs After

✗ Before

Create Button_Active, Button_Disabled, Button_Hovered as separate components

✓ After

Create one Button component with variant properties: isActive (true/false), state (normal/disabled/hovered)

What It Enables

It enables quick, error-free switching between component states, making design updates faster and more reliable.

Real Life Example

A product team uses variant properties to toggle button styles for different user interactions without juggling multiple files, speeding up their design process.

Key Takeaways

Manual copies cause confusion and slow updates.

Variant properties simplify managing multiple states.

They improve consistency and speed in design workflows.

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