Figma Variants Tutorial (With Examples!)

January 29, 2021 by Hannah Wright

figma variants tutorial

Figma variants can really help speed up your workflow, and so it's definitely worth learning more about how they work. If you're looking to learn more about what they are (and how to use them), then you've come to the right place.

This tutorial will help clear up and uncertainties or questions you may have about it.

By the end, you'll know exactly how to create your own and how everything is supposed to be organized for best results.

You'll also no longer feel intimidated by this feature, and you will see the benefits.

To help you dive in and start practicing right away, you can also access free exercise files in this post, if you're a visual learner and prefer to see an example for yourself.

So, what are Figma variants, anyway?

You can think of them as collections of components for different uses.

For example, you know how you never really have just one button state because you'll often have a button for "hover," "disabled" and so on?

And you might also have versions of buttons with or without icons, too.

Not to mention, you will often have primary and secondary buttons.

Now, using this feature, you won't have to sift through hundreds of different components in your assets panel. It allows you to easily find what you need, whether you're working on your own or with a team.

The other advantage is that you can make changes to multiple similar components at once, without changing their core structure, while keeping everything organized in one place.

No more sifting through tons of different buttons in the assets panel!

Free example resources to help get you started!

Want to check out some free example resources to help you get the hang of it?

We've got you!

You can open these in Figma:

Free design file 1

Free design file 2

Understanding properties

Before diving in, it's first very important to understand how "properties" work in this feature.

Properties are essentially different types (for example, primary or secondary).

Each property contains different states (for example, pressed or disabled if we're talking about buttons).

How it all works (with examples)

To create your own and get some practice, open up a new file and create a basic button.

Next, turn that button into a component (command+option+K). To use variants, you must always use components.

After that, on the right panel, click the "+" next to "Variants."

Now you should see two variants. You'll want to rename them in the variants panel by typing in "Primary" as the first button name.

Then click on the second button and rename it in the Variants panel to "secondary."

Next, click on the Component that holds both of the variants (you can click it from the layers panel). Rename it to "Type" by inputting the text in the field like so:

variants rename

Whenever you want to add some more, just remember to expand the box like this:


Now, copy the buttons and paste them into this newly-expanded space.

After that, select "Primary" variant for the first button so that it is properly linked. And do the same for the secondary button, selecting "Secondary."

change to primary

You will likely get a note about conflicting property values at this point — but no need for panic! :-)

Next, select the master component in the layers panel so that everything is highlighted.

Click the little menu and select "Add New Property."

add new property

Now, name that property "State."

At this point, we have to change the second pair in a way that reflects a hover state!

So, you can select the latest two and add any kind of hover design that you want.

Here's what I did in my example (which you can do, too).

hover example

Alright, so now we need to just link those new hover buttons to their matching "hover" states which hasn't been created yet, so you'll have to type it in as a new state, like so:

new state

After you've linked both of those new ones to their matching states, you'll be ready to test out your new creation!

Head on over to the "Assets" tab on the left, and then hold down + drag the button over to your canvas.

From there, you'll be able to switch states on the left and try out different ones to see if your version works as intended.

figma variant

Wrapping up

If you finished this exercise, great job!

As you can probably tell, this is a pretty amazing way to improve your workflow.

It may take a bit of practice in the beginning, but once you get into the swing of things, it'll be second nature to you.

That being said, I'd highly recommend going through these steps and practicing on your own for a bit.

And don't get discouraged because practice makes perfect! Even if it's not second nature to you in the beginning, simply running through these examples will help you master everything in no time.

Following these instructions will also help you get firsthand experience using this feature, and it'll help you better understand how things work and why it's such an effective way to stay organized in your files.

This is especially ideal for larger-scale design systems and complex projects that require multiple states and variations.

The bigger the project, the more this will come in handy for you and your team in the long-term.

If you want some exercise files like this one, you can find them for free in the beginning of this post.

Recommended watching

Want more? The more resources you have, the more manageable it will be for you.

Plus, it can help you see things in a new light.

We think that these videos from the community are really fantastic:

  • Intro to Figma variants by Antonija Pek
  • Variants in 10 Minutes by Mizko
  • Anyway, I hope you've enjoyed learning more about this, and that it helps you with your future UI design projects!

    It's an excellent way to stay organized and to find what you're looking for quickly and easily, without having to sort through thousands of components in your assets panel.

    So, good luck and have fun!

    Post last updated: January 31, 2021