How to Create Variable Modes in Figma: Step-by-Step Guide

In Figma, you create variable modes by using Variants inside Components. Variants let you group different states or versions of a component, like colors or sizes, into one organized set that you can switch between easily.

Syntax

In Figma, variable modes are created using Variants within a Component. The syntax is:

• Create a base Component.
• Add Variants to that component to represent different modes.
• Use properties like Property Name and Property Values to define each mode.

This groups multiple versions of a component under one umbrella, making it easy to switch modes.

plaintext

Component: Button
  Variant 1: Color = Primary
  Variant 2: Color = Secondary
  Variant 3: Color = Disabled

Example

This example shows how to create a button component with three color modes using variants:

plaintext

1. Select your button design and create a component (Right-click > Create Component).
2. With the component selected, click the '+' icon next to 'Variants' in the right panel to add variants.
3. Rename the property to 'Color'.
4. Set the values for each variant: 'Primary', 'Secondary', and 'Disabled'.
5. Switch between these modes by selecting the variant property in instances of the component.

Output

A single button component with three selectable color modes: Primary, Secondary, Disabled.

Common Pitfalls

Common mistakes when creating variable modes in Figma include:

• Not grouping variants inside a single component, which makes switching modes harder.
• Using inconsistent property names or values, causing confusion when selecting modes.
• Forgetting to rename the variant property, leading to unclear mode labels.

Always keep property names clear and consistent for easy mode management.

plaintext

Wrong:
Component A (no variants)
Component B (no variants)

Right:
Component with Variants
  Property: Mode
  Values: Light, Dark

Quick Reference

Step	Action	Description
1	Create Component	Select design and create a component
2	Add Variants	Click '+' to add variants inside the component
3	Name Property	Rename variant property to describe mode (e.g., Color)
4	Set Values	Define variant values (e.g., Primary, Secondary, Disabled)
5	Use Instances	Switch modes by selecting variant values in component instances

Key Takeaways

Use Variants inside Components to create variable modes in Figma.

Name variant properties clearly to manage modes easily.

Group all mode variations under one component for better organization.

Switch modes by selecting variant values in component instances.

Avoid inconsistent naming to prevent confusion.