How to get started with Figma Variants?

Let's understand what are Variants?

Variants is a feature of Figma that lets you create different versions of one element, with the properties.

Suppose you are creating a design system for a certain product and you have to create input fields for different scenarios like Default, Hover, Filled, Error, and Success then you should use variants to save time.

Let's see how you can use the variants!

I am going to take an example of buttons with different properties like Default, Pressed, Hover, and Disabled.

First of all, create a Default State button with Auto-Layout, and then head over to the top section and select the option "Create Component", now the button is converted into a component see the picture below to get a good idea:

Now in the next step, after creating the component you will see an icon in place of which the previous component icon was placed, it will be a plus icon and it will come only when you select your component. Now what you've to do is, select your component and press that plus icon to create a variant for that component. Look at the example below for a better understanding:

When you click on that plus icon, another identical component will be created and those two components will be enclosed inside a purple stroked box, see the example below before we can move to the next step:

Now, it's time to add variant properties, for that select the variant box and head over to the right panel, now you will see a properties panel above auto layout, and from there we will assign properties to the buttons, see the picture below:

Now select one variant inside the box and go to the properties panel and type the name of the property you want to assign, check the video below:

In the video above, I simply added two properties that are "Default" and "Hover" to the given two buttons, for hover, I changed the color of the button a bit and added the shadow. Now let's create two more variants of the buttons, for that select any one variant and you will see a plus icon underneath the variant, click the icon and an identical button will be created. Check the below video for a better understanding:

In the above video, you will see that I also assigned properties to the new variants after creating them. Now, we're almost done let's check our created variants, and for this what you're gonna do is, duplicate any one variant by Holding the Alt key and dragging the variant, after doing it we will check the variant by changing its property from the side panel, take a look at the video below:

In the video above, you will see how easily you can change the button state from the properties panel without having to create a new one or copy and paste the button to change it.

It's pretty convenient, right? So next time, when you're working on the app or a website, do not forget to create the variants for the elements that are to be used again and again in the app with different forms and states.

And there's one more thing I forgot to tell you, when you change something inside the variant box or in the component, then it will automatically reflect in the places where you have used that particular component. So you don't have to change it everywhere, IT SAVES YOUR TIME AND EFFORT!!

Note: Remember to make changes in the parent component, not in the duplicate of the component.

Next time, I will write an article on how to create complex variants with 8-10 properties. To stay tuned with the latest articles, subscribe to my newsletter!!

That's all for today. If you like my article then do give it a thumbs up and share it with your friends.?And do not forget to subscribe to my newsletter for more such articles every week! Thanks for reading, you're amazing! <3