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.
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.
Useful Resources and More Figma Tutorials
- FigmaHow to Turbocharge Your Components with Figma VariantsAndrei Marius
- Figma21+ Best Premium UI Kits for Adobe XD and FigmaPaula Borowska
- FigmaHow to Work with Auto Layouts, Components, and Dynamic Content in FigmaAndrei Marius
- FigmaHow to Fix Cropped Shadows or Overflowing Elements in FigmaAdi Purdila
- FigmaA Quick Guide to Figma’s Image Fill SettingsAdi Purdila
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post