How to Add Variants in Figma?

Adding variants in Figma is a fundamental way to manage different states or styles of your UI components efficiently. It allows you to combine multiple versions of a component into a single, master component set.

What are Variants?

Variants are individual versions of a component that belong to a larger component set. Think of a button component: you might have default, hover, pressed, disabled, and loading states. Instead of having five separate button components, you can group them into one component set and define these states as variants. This makes your design system cleaner and easier to maintain.

Variants are particularly useful when working with interactive elements and creating design systems.

How to Add a Variant

The most common and straightforward method to add a new variant to an existing component set is directly on the canvas:

1. Start with a Component Set: Ensure you have already created a component set. If you only have a single component, right-click it and select "Add variant" or use the keyboard shortcut Shift + A to Auto Layout it and then click the + in the properties panel.
2. Select an Existing Variant: On the canvas, select any variant within your component set.
3. Use the Add Button: Look for the purple + button that appears next to the selected variant on the canvas.
4. Click the + Button: To add a new variant, we can select an existing variant and hit the purple ``+'' that shows up next to it on the canvas. Clicking this button will duplicate the selected variant and add it to the component set.
5. Define the New Variant: The new variant will appear next to the one you duplicated. You can then modify its appearance (colors, text, size, etc.) and, importantly, rename its properties in the right-hand Properties panel to define its state or style (e.g., change Property 1=Default to State=Hover).

Alternative Method: Using the Properties Panel

You can also add variants using the Properties panel on the right sidebar:

1. Select the entire component set frame on the canvas.
2. In the "Variants" section of the Properties panel, you'll see the existing properties and their values.
3. To add a completely new variant that might not be a direct visual duplicate of an existing one, you can sometimes add a new value under an existing property or add a new property altogether. However, the canvas + method is the most direct way to visually add a new state based on an existing one.

Organizing Variants with Properties

Once you add a variant, you'll need to define its properties. Properties act like attributes (e.g., State, Type, Size) that have different values (e.g., Default, Hover, Primary, Secondary, Small, Large). By changing these property values in the right-hand panel when an instance is selected, you can switch between the different variants in your component set.

Here’s a simple example of how properties define variants:

Property: State	Property: Type	Variant Appearance
Default	Primary	Blue button
Hover	Primary	Darker blue button
Default	Secondary	White button with border
Disabled	Primary	Light grey button

By using variants and properties effectively, you can create robust and flexible component libraries in Figma.