How to Create and Use Variants in Figma

Figma is a powerful tool for designing and prototyping user interfaces. But did you know that you can also use Figma's variants feature to create and manage different versions of the same component?

Variants are a feature that allows you to group related components together and define custom properties for them, such as state, size, color, etc. For example, you can create a button component that has variants for primary, secondary, and disabled states.

With variants, you can simplify your component library and reduce duplication, as well as make your components more consistent and scalable. You can also switch between variants easily and dynamically in your designs and prototypes.

In this blog post, we'll show you how to create and use variants in Figma. We'll cover the following topics:

• How to enable variants in Figma
• How to create and edit variants for your components
• How to use variants in your designs and prototypes
• How to organize and document your variants in Figma

Let's get started!

How to Enable Variants in Figma

Variants is a beta feature that you need to enable in your Figma account before you can use it. To do so, follow these steps:

1. Open Figma and go to the File Browser.
2. Click on your profile icon in the top-right corner and select Account Settings from the dropdown menu.
3. Scroll down to the Beta Features section and toggle on Variants.
4. Click Save Changes

Create and use variants by Figma Learn

You can now use variants in any file or team project. You'll also see a new Variants tab in the Design panel.

How to Create and Edit Variants for Your Components

To create variants for your components, follow these steps:

1. Select the components that you want to group together as variants and press Command + Option + K(Mac) or Control + Alt + K(Windows) to create a component set.
2. In the Layers panel, rename your component set to something descriptive, such as Button.
3. In the Design panel, click on the +icon next to the Variants section to create a new variant property.
4. Rename your variant property to something descriptive, such as State.
5. Click on the dropdown menu next to your variant property name and select the type of values you want to use for your property, such as text, number, boolean, etc.
6. Click on the +icon next to the values section to add a new value for your property.
7. Rename your value to something descriptive, such as Primary.
8. Repeat steps 6-7 for any other values you want to add for your property, such as Secondary, Disabled, etc.
9. Select each component in your component set and assign them a value for your property by clicking on the dropdown menu next to the property name in the design panel.

You can also edit your components by changing their properties, such as fill color, stroke color, text, icons, etc.

You can also create multiple variant properties for your component set, such as size, color, shape, etc., and assign multiple values for each property.

How to Use Variants in Your Designs and Prototypes

Once you have created and edited your variants, you can use them in your designs and prototypes by following these steps:

1. Drag and drop your component set from the assets panel onto the canvas or into a frame.
2. Resize and position your component set as needed.
3. To switch between variants, click on the variant icon next to the component name in the design panel or on the canvas.
4. You'll see a dropdown menu with all the available variants for your component set.
5. Select the variant that you want to use for your component set.

You can also override some of the properties of your variants by selecting them and changing their properties in the design panel, such as fill color, text, icons, etc.

You can also use variants in your prototypes by adding interactions and logic to them. For example, you can create a toggle switch component that has two variants: on and off.

To use variants in your prototypes, follow these steps:

1. Select the variant of your component set that you want to add an interaction to.
2. In the prototype panel, click on the +icon next to the **Interactions section **to create a new interaction.
3. In the interaction modal, select the type of trigger you want to use for your interaction, such as On Click, On Hover, On Drag, etc.
4. Select the type of action you want to perform for your interaction, such as Change To, Swap With, Open Overlay, etc.
5. Select the variant of your component set that you want to change to or swap with for your interaction.
6. Optionally, you can add animation, easing, and duration options for your interaction by clicking on the More Options button in the interaction modal.
7. Optionally, you can add logic to your interaction by clicking on the +icon next to the Logic section in the interaction modal.
8. In the logic modal, select the type of condition you want to use for your logic, such as If, Else If, Else, etc.
9. Select the variant property and value that you want to use for your condition, such as State and On.
10. Repeat steps 2-9 for any other interactions and logic you want to add to your component set.

Figma Tutorial: Variants

You can also edit or delete your interactions and logic by clicking on them in the prototype panel and selecting the appropriate option from the context menu.

How to Organize and Document Your Variants in Figma

You can organize and document your variants in Figma by following these steps:

1. Open Figma and go to the File Browser.
2. Click on your profile icon in the top-right corner and select Account Settings from the dropdown menu.
3. Scroll down to the Plugins section and click on Browse Plugins.
4. Search for and install the Variant Organizer plugin by Figma.
5. Open a Figma file that contains your component sets with variants.
6. Go to the Menu bar at the top of the screen and click on Plugins > Variant Organizer > Organize Variants.
7. You'll see a modal window with some options for organizing your variants, such as sorting them by name, property, or value, grouping them by property or value, renaming them with a prefix or suffix, etc.
8. Select the options that suit your needs and click on Organize Variants.
9. You'll see your variants organized in the layers panel according to your preferences.

You can also document your variants by adding descriptions and notes to them using the built-in annotation feature in Figma.

To document your variants, follow these steps:

1. Select a component set with variants in the canvas or in the layers panel.
2. In the design panel, click on the annotation icon next to the component name.
3. You'll see a text box where you can add a description and notes for your component set and its variants.
4. Type your description and notes as needed and click on Save Changes.

How to Use Variants in Figma | Organize Your Design System Components

Variants are a feature that allows you to create and manage different versions of the same component. You can group related components together and define custom properties for them, such as state, size, color, etc.

In this blog post, we showed you how to enable variants in Figma, how to create and edit variants for your components, how to use variants in your designs and prototypes, and how to organize and document your variants in Figma.

We hope you enjoyed this tutorial and learned something