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.