Web Development: How to Use Figma Variants

Sunday, July 4, 2021

How to Use Figma Variants

Figma variants save you the headache of searching through thousands of components, trying to find the right one for your design. They allow you to alter certain predefined aspects of single components, to make any variant you like.

In my opinion Figma is the best UI design tool available at the moment, and this feature is one of my personal favorites. So let’s take a look!

Components in the Days Before Figma Variants

Before Figma introduced variants, you may have managed your components like this:

You’d begin with frames, in which you’d design your component (a button in this example) in its default state. Then you might make a hover state, then perhaps a small version, and a hover version for that small button too.

Finally you’d make components of each one, so that whenever you needed one you’d be able to access it under Assets and drag it onto your design.

Better Components Nowadays with Figma Variants

Nowadays, with Figma variants, you can design a single component. Here, I’ve used the first default button and turned it into a component using the component button at the top of the screen. Please bear with me while I use the words “component” and “button” in all kinds of different contexts..

With that done, head over to the Variants pane in the Inspector to the right and hit the + symbol to add a new variant. Doing so will create a group of the variants, like so:

Organizing Variant Properties

Our two variants are now organized under the same property (called “property 1” until we change it) and we’re going to make this property relate to size. So our first step will be to rename it.

We can rename the actual variants too, so instead of “Default” and “Variant2” (as you can see above) we’ll call them “Default” and “Small”. And once they’re named, we can select each one and make actual changes to it (like making the small one small..)

Secondary Variant Properties

Now let’s add another property. In the Variants pane go to Add a New Property and give it a name (like “Style”).

Now let’s add a new button to our group by clicking the + symbol in the bottom corner of the group itself. We’ll make this one the same size as the Default button, but with different colors for a hover state. This will be our “Hover” style.

Repeat the process for a small hover variant, and you’ll have a group of 4 button variants.

Here’s the Cool Part

Having set everything up, let’s pretend we’re working on a new page. When we need one of our button components we go to Assets to see the available components which we can drag onto the page:

In the Inspector we can see the variant options for this component now, so we can select the size we want, and the style we want.

Conclusion

Figma Variants will save you a lot of time, especially if you’re already someone who likes organization hacks! Check out the video above for more tips on naming conventions, converting existing components into variants, and working with more complex components like navigation bars.