Figma Tutorial: Variants

Variants reduce the complexity of your design system, makes it easier to find components, and maps your design components more closely to code. In this video we'll teach you how to create and use variants and component sets.

Learn more on our Help Center:

#Figma #FigmaTutorial #Variants #Components

Timestamps:
0:00 Introduction
0:30 Define component sets, variants, properties, and values
0:58 Multi-dimension component sets, and map to code
1:47 Combine components as variants
2:05 Publish component sets to a library
2:19 Using and configuring variants
2:41 Step-by-step demo (checkbox component set from scratch)
3:22 Adding variants to a single Component
3:46 Naming syntax (property=value)
5:05 Rename values
5:29 Non-unique combination errors and how to fix it
5:40 Rename properties
6:23 Using and configuring variants from Assets panel
7:14 Add new variants to a component set
7:56 Boolean values, binary toggle switch
8:40 Adding another property / dimension
10:37 Instance swapping and component sets
11:03 Publish component sets to a library
12:08 The "slash" naming convention to create variants quickly
12:58 Use the "slash naming convention at a large scale
14:01 Outro

[Figma]

With the introduction of Component Properties, we changed how you create variants in Figma slightly.

[jeannekepaan]

I can't believe I've been plodding along without using this functionality for so long! Can't wait to begin building variants into my component libraries!

[LuckyLifeguard]

toggle switch is just that extra touch of detail that made this even cooler wow

[urmibhange]

This feature is incredible! I'm already implementing it in my projects. Thanks for making my life easier Figma team ❤️

[KayoDante]

One day before this function arrives I was suffering inside because of the work I had to organize everything. Opening Figma the next day and seeing this update make my head explode. You guys are awesome!

[MattBracewell]

Very excited to see this finally released! Hopefully all of my components will play nicely! 🤞
Awesome work @Figma. Much appreciated x

[guilhermesalles]

I started to learn Figma this year after working with complex softwares such as After Effects and Photoshop. I am blown away by how smart Figma is, this is an amazing, super complete software, but it is waaaay more intuitive than any other Adobe product. Amazing tool!

[TheChillBison]

This is mind-blowing in its ease-of-use. I've only done variations a couple times before there were variants, and creating, organizing, and naming was a pain, plus there was a lot of menus. Variants are exactly what you'd want, and make it so easy to find the base component and to get the configuration you want for the design. Love it!

[webtalk]

Figma was already a complete package! But now... NO WORDS! Very thankful to the Figma team! You guys are great!! <3

[SnafuGuitarBoy]

You guys are geniuses. The more time I spend discovering about your product, the more I am amazed.

[garaujos]

Thank you. Now the team will use the Design System in a much more practical way. You released this feature just before we released our updates to the team library. Since it works by converting the common hierarchical organization scheme, the Variants implementation becomes very simple.

[irhmkrm]

FINALLY!! Historical moment.. we have come a looong way for this, through pain & tears *photoshop & illustrator 😭✨💥🎉

[alexmartens]

Figma team, thank you for changing the world of design! 😭❤️

[ilyamiskov]

Absolutely in love with this feature! This makes it miles better than any other design software.

[abinashmohanty]

Figma variants: one of the best innovative solutions in order to maintain a design system. I love it. 🤘Can't wait to explore now. 🤓

[kabirsinghmehrok]

Incredible feature, glad I learnt to use it. Thanks Figma for making a crisp and helpful video!

[beatrizsampedro]

i'm still blown away with how incredible Figma is. You, my dear software, are the future.

[xDvDz]

Great video! Clear and concise yet thorough

[Figma]

Simplify your design system and bring your components closer to code using Variants, and let us know how Variants helped your team in the comments.

Subscribe to our channel to be notified when we release Interactive Components, so you can use your Variants in your Prototypes!

[BrentWMiller]

This is awesome. Figma is dope! Converting 84 button components into 1 was so cool.