Variant properties (boolean, enum) in Figma - Step-by-Step Guide

Introduction

Variant properties let you create different versions of a design component in one place. Boolean properties switch between two states like on/off. Enum properties let you pick from multiple options like colors or sizes. This helps keep your design organized and easy to update.

When you want a button that can be either enabled or disabled without making separate components

When you need a card that can have different background colors like red, blue, or green

When you want to switch between icon sizes like small, medium, and large in one component

When you want to toggle visibility of an element inside a component, like showing or hiding a badge

When you want to manage multiple style options for a component without duplicating it

Steps

Step 1: Select the component set in the Layers panel

- Layers panel

The component set is highlighted and its properties show in the right sidebar

Step 2: Click the plus (+) button next to Properties in the right sidebar

- Properties section in the right sidebar

A new property field appears for you to name and choose the type

Step 3: Type a name for the property, like 'State' or 'Color'

- Property name input in the right sidebar

The property is named and ready for type selection

Step 4: Select the property type: choose 'Boolean' for two states or 'Enum' for multiple options

- Property type dropdown in the right sidebar

The property type is set, and options appear if Enum is selected

Step 5: If Enum, add option names like 'Red', 'Blue', 'Green' by typing and pressing Enter

- Enum options input in the right sidebar

Options are listed and can be selected for each variant

Step 6: Assign property values to each variant by selecting the variant and choosing the property value

- Variant properties panel in the right sidebar

Each variant shows the correct property value, controlling its appearance

Step 7: Use the component with variant properties in your designs and switch states using the property controls

- Instance properties panel when the component is placed on the canvas

The component changes appearance based on the selected property value

Before vs After

Before

A component set with multiple separate variants for each color and state, no properties defined

After

A component set with a Boolean property 'Active' and an Enum property 'Color' controlling all variants in one organized set

Settings Reference

Property name

📍 Properties section in the right sidebar of the component set

Names the variant property for easy identification

Default: None

Property type

📍 Properties section in the right sidebar

Defines if the property toggles between two states or multiple options

Default: Boolean

Enum options

📍 Properties section when Enum type is selected

Lists the possible values for the Enum property

Default: None

Common Mistakes

Naming multiple properties with the same or confusing names

It makes it hard to know which property controls what, causing mistakes when switching variants

Use clear, distinct names like 'State' for Boolean and 'Color' for Enum to avoid confusion

Using Boolean type when more than two options are needed

Boolean only supports two states, so you cannot add more options like multiple colors

Use Enum type when you need more than two options to cover all cases

Not assigning property values to all variants

Variants without property values won't switch correctly and can cause errors in design

Make sure every variant has the correct property value assigned to work properly

Summary

Variant properties let you control multiple versions of a component with simple switches.

Boolean properties handle two states, Enum properties handle many options.

Clear naming and assigning values to all variants are key for smooth use.

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