How to Use Variant Property in Figma for Component Variations

In Figma, the variant property lets you group similar components with different states or styles into one organized set called a variant. You create variants by selecting components and clicking Create multiple variants, then use the variant property panel to switch between them easily.

Syntax

In Figma, variants are created by grouping components with shared properties. The key parts are:

• Component Set: A group of variants combined into one set.
• Variant Property: The name of the characteristic that changes (e.g., State, Size).
• Property Values: The different options for the property (e.g., Default, Hover, Pressed).

You use the right sidebar in Figma to define and switch variant properties.

plaintext

Component Set {
  Variant Property: "State"
  Values: ["Default", "Hover", "Pressed"]
}

Usage:
Select Component Set
Change "State" property to switch variant

Example

This example shows how to create a button with three variants: Default, Hover, and Pressed states.

plaintext

1. Create three button components with different styles for Default, Hover, and Pressed.
2. Select all three components.
3. Right-click and choose "Create multiple variants".
4. In the right sidebar, rename the variant property to "State".
5. Rename each variant's property value to "Default", "Hover", and "Pressed" respectively.
6. Use the variant property dropdown to switch between button states in your designs.

Output

You will see a single component set named "Button" with a property "State" that you can toggle between Default, Hover, and Pressed states.

Common Pitfalls

Common mistakes when using variant properties in Figma include:

• Not grouping components into a component set before creating variants.
• Using inconsistent property names or values, which makes switching confusing.
• Forgetting to rename variant property values, leaving default names like "Variant 1".
• Trying to create variants from components that differ too much in structure, causing layout issues.

Always keep variant properties clear and consistent for easy use.

plaintext

Wrong way:
- Create variants without renaming property values:
  Property: "Property 1"
  Values: "Variant 1", "Variant 2"

Right way:
- Rename property to "State"
- Rename values to "Default", "Hover", "Pressed"

Quick Reference

Action	Description
Create Variants	Select components and click 'Create multiple variants'
Rename Property	Change default property name to something meaningful like 'State' or 'Size'
Rename Values	Set clear names for each variant value like 'Default', 'Hover', 'Pressed'
Switch Variants	Use the variant property dropdown in the right sidebar to change states
Use in Design	Drag the component set and toggle variants as needed

Key Takeaways

Use variant properties to group similar components with different states or styles.

Always rename variant properties and values for clarity and easy switching.

Create variants by selecting components and choosing 'Create multiple variants'.

Keep component structure consistent to avoid layout problems in variants.

Use the variant dropdown in the sidebar to switch between different versions quickly.