Variants vs variables

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?

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[kristinagroeger]

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.

[hueyfreeman]

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

[ytRap]

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

[rfigo]

Thank you! And thanks for the snack :D

[gianlucacroci]

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

[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. :)

[JohnPeele]

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

[vaanresvaanica]

Please share the file ! that would even more helpful

[welling]

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.

[rjabrm]

Why don't you combine them together?

[romanvernik]

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?

[twinnieee]

Really helpful! Do you mind sharing the file?

[jinskim]

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

[jakecoventry]

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