Figma Tips ⚡ - Colour styles vs variables

Use colour variables as much as possible
Learn about their differences in properties and use cases
Time Stamps ⏱️
00:00 Introduction
00:21 What are colour styles and variables?
00:53 Colour variable properties
01:38 Colour style properties
02:47 Benefit of variables - Alias
04:54 Benefit of variables - Prototyping
05:08 Benefit of variables - Variable modes
07:03 Limitation of variables
08:46 Creating variables and styles
12:39 Assigning variables in styles
14:03 Concluding thoughts
14:41 Like, comment, subscribe fam
Colour Variable Perks 🔥
1. Variable alias = more control = design token scalability
2. More prototyping features
3. Variable modes
Differences by Figma: help.figma.com....
Fake shadows workaround: forum.figma.co...
Managing variables: help.figma.com...
Convert eligible styles into variables: • Backing color styles w...
Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
paypal.me/thej...
#ui #userinterface #figma

[@drewbeck1000]

Super useful video! I really appreciate the work you put into communicating the different layers of hierarchy. Very clear and clarifying.
I'll note that today it looks like they do now support variables in effects! You can select from your libraries when choosing an effect color.

[@NiveythaWaran]

Was looking for a video explaining the difference between styles & variables. Super useful and informative, thank you!

[@thejunboy]

Great to hear it was useful! All the best in your Figma journey

[@theblowupdollsmusic]

Thank you so much for putting this video together and explaining the differences clearly.

[@thejunboy]

You're very welcome!

[@user-mm4wz2kn9j]

Thanks, great explanation!

[@thejunboy]

You're welcome! Thank you!

[@streemsofwater]

On 3:33 - In Tokens section of Local Variables panel, I can see each token is connected to which primitive. Is there a way that I can see each primitive is connected which token?

[@thejunboy]

appreciate the comment - there isn't a native way to view this in Figma nor have I found a plugin that can allow us to manage all of the variables and see how they are all connected. noting that variables is still feature in beta, hopefully this feature comes in down the track.

[@streemsofwater]

@@thejunboy Thanks for your explanation! I appreciate it.

[@ericwangphotography447]

Great tips! I did not know much about variables before

[@thejunboy]

Glad you could learn something !

[@ericwangphotography447]

@@thejunboy I always learn from you bless 🙌

[@mtc1516]

It's very confusing😢can u show us how the global token semantic and component tokens works in a figma file?

[@thejunboy]

this concept is only relevant if you're working on a design system.
your base token variables you could create brand colours. e.g white = FFFFFF, primary brand colour = 000000.
your semantic token variables can then reference these base tokens through alias.
a light mode button component might have these alias.
border colour variable = primary brand colour variable
fill colour variable = white variable
text colour variable = primary brand colour variable
a dark mode button might be.
fill = primary brand colour
text = white.
if this concept is too complex, i would recommend exploring videos on design tokens and design systems.

[@tracyy6619]

I miss Sketch

[@thejunboy]

What do you miss about Sketch? I've used it once and found Figma much easier to grasp and use.