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.
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.
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?
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.
Was looking for a video explaining the difference between styles & variables. Super useful and informative, thank you!
Great to hear it was useful! All the best in your Figma journey
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.
Really appreciate the feedback - yea a lot of updates have happened since these videos!
It's very confusing😢can u show us how the global token semantic and component tokens works in a figma file?
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.
Thank you so much for putting this video together and explaining the differences clearly.
You're very welcome!
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?
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.
@@thejunboy Thanks for your explanation! I appreciate it.
Thanks, great explanation!
You're welcome! Thank you!
I miss Sketch
What do you miss about Sketch? I've used it once and found Figma much easier to grasp and use.
Great tips! I did not know much about variables before
Glad you could learn something !
@@thejunboy I always learn from you bless 🙌