Variants vs variables

In this video, we break down the differences between variants and variables (plus modes), and determine when it makes sense to use each one. Follow along with the community file here www.figma.com/community/file/...
00:38 The difference between variants and variables + modes
01:49 When do I use each one? The simple answer
02:47 When do I use each one? The more complex answer
05:32 Example 1: Button states
08:10 Example 2: Prototyping with logic
10:36 Example 3: Small visual difference vs large visual difference
12:34 Example 4: Will everything on the screen have a mode?
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[@kristinagroeger2839]

I spent an entire day trying to figure this out, thank you for the amazing demo.

[@Gobothechairman]

Omg, thank you! I was really confused until now.

[@r2figo]

Thank you! And thanks for the snack :D

[@rickyaznmartin]

Thank you!!🎉 ❤🔥

[@smart23033]

thank you!

[@ytRap007]

@Figma i hope we can set variable also for stroke and effects.

[@gianlucacroci3120]

Thanks for the video! All the information is clear and well explained! I have a doubt about this: If I use variables instead of variants, how a developer would know that the component have several versions? Example, like Figma did at config, 9 buttons became 3 because of variables and changes were applied on padding basically

[@hueyfreeman6215]

"There's and easy-ish answer, sometimes". LMAO. Great video and explanation!

[@eugostodecereal1]

love you Figma

[@JohnPeele]

Totally unrelated question… how do you achieve the custom mask shape for your headshot in the video? OBS?

[@ChandlerFaye]

Will it be possible to import a CSV to set variables? I've been doing a lot of data entry since the launch and it would be neat if I could flow content in eventually. :)

[@matissoM]

Great question to post on the Figma Community Forum, I guess. 🙃

[@andrewc3310]

SO true! Managing variables in the current UI is very manual and slow. Esp when I realize I should move a set of variables from one collection to another.

[@vaanresvaanica]

Please share the file ! that would even more helpful

[@Figma]

added a community file! www.figma.com/community/file/1284206072590997466/Variants-vs-variables

[@rjabrm]

Why don't you combine them together?

[@twinnieee]

Really helpful! Do you mind sharing the file?

[@Figma]

added a community file! www.figma.com/community/file/1284206072590997466/Variants-vs-variables

[@welling1]

Unless the endgame is turning Figma into a no-code tool, it's adding unnecessary levels of complexity for a tool that still requires manual coding.

[@platinumdynamite]

It really advances prototyping, though - when text inputs are implemented, it's going to be a lot easier to create realistic prototypes with actual interactivity rather than faking static states.

[@romanvernik1968]

Can you please explain for mortal ones why I can’t use variables for 80% of properties like font name, font size, stroke width, shadow attrs etc?

[@AlicePackard]

Hey Roman, my understanding is that Figma is actively working on making variables compatible with the types of inputs you listed! Hopefully we'll see them by the end of 2023. I don't work for Figma so I can't say why they chose to release what they did, but my best guess as an outsider is they wanted to ease customers into this new feature with a limited set of options: color vars on just fills and strokes, but not yet shadow colors or gradient stops... numbers for dimension values and auto layout, but not yet typographic attributes like font size... and booleans and strings for prototyping and mode switching, but not yet direct binding to variants (there's a workaround with strings but i don't fully trust it's stability). This probably also allowed them to ship an open beta in time for Config, so there's no doubt a "hype" aspect too.

[@romanvernik1968]

@@AlicePackard Yes, makes sense.

[@md.junayedhossain7955]

See the config 23 of figma, the ceo Dylan Field literally said they are working on the typography and much more will be coming at the end of this year. One day, Styles might become obsolete, thats my two cents.

[@jinskim7615]

1:50 Is Variants the same as Instances of Components?

[@platinumdynamite]

Variants are properties in components. (different versions of the component)
Variables are global properties.

[@eugeniat5460]

My understanding is that Variants can be used used on Instances of Components

[@jakecoventry9004]

Only 4 modes are allowed, unless you pay for enterprise, which is ridiculous. Shame on you Figma.