How to Create and Use Variants in Figma

Variants in Figma allow you to create multiple versions of a single component, such as different states of a button (e.g., default, hover, active) or variations of an element like form fields (e.g., with or without labels). Using variants helps you keep your design system organized and makes it easy to switch between different versions of a component in your designs. Here’s a step-by-step guide on how to create and use variants in Figma:

1. Create a Component

• Start by designing the base element you want to create variants for, such as a button or an icon.

• Once the element is fully designed, select it and convert it into a component by right-clicking and selecting “Create Component” or using the shortcut Cmd + Option + K (on Mac) or Ctrl + Alt + K (on Windows).

2. Add Variants to the Component

• With the component selected, go to the right-hand properties panel.

• Look for the "Variants" section and click on the “+” button next to “Add variant.” This action will create a new variant of the component.

• A new variant will appear next to the original component, and both will be grouped under a "Variants" container.

3. Design the Variants

• Modify the new variant to represent a different state or version of the component. For example, if you’re working on a button, you might change the background color or add a different border to represent a "hover" state.

• Repeat the process to add more variants as needed (e.g., “active,” “disabled,” etc.).

• Each variant should visually represent a specific state or version of the component.

4. Naming the Variants

• Figma automatically organizes variants into a “Variants” container and gives them generic names (e.g., Variant 1, Variant 2). It’s important to rename them for clarity.

• Click on each variant, then go to the properties panel on the right and rename it according to its state or variation (e.g., “Default,” “Hover,” “Active”).

• Use a clear and consistent naming convention to make it easy to identify each variant.

5. Organizing Variants with Properties

• You can define properties that describe what differentiates each variant. For example, you might use a property called "State" with values like "Default," "Hover," and "Active."

• To do this, select the Variants container and look for the "Properties" section in the right-hand panel.

• Click on "Add new property" and enter the property name (e.g., "State"). Then, set the values for each variant (e.g., “Default,” “Hover,” “Active”).

• This organization helps in managing and switching between variants easily within your design system.

6. Using Variants in Your Designs

• To use the variants, go to the “Assets” panel and drag the component set onto your canvas.

• When the component is selected on your canvas, you can switch between the different variants by using the dropdown menus in the right-hand properties panel under the "Instance" section.

• Select the desired property value (e.g., “Hover”) to change the variant.

7. Adjusting Variants

• If you need to adjust or add new variants, go back to the Variants container.

• Make the necessary changes to each variant (e.g., adjusting padding, changing colors, etc.).

• Figma will automatically update all instances of that component with the new variant options.

8. Benefits of Using Variants

• Consistency: Variants help maintain consistency across your design system by ensuring that all states of a component are grouped together and easy to access.

• Efficiency: With variants, you can quickly switch between different states or versions of a component without having to create separate components for each variation.

• Organization: Variants keep your design system organized and scalable, making it easier to manage complex designs with multiple states or versions.