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.
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.
Does this method work with those community UI Kits (Bootstrap)? Currently working with Bootstrap 5 UI Kit and there are no variables only styles but I do see samatic style {i guess) Not sure how to leverage variable in this case.
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.
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!
Thank you so much for putting this video together and explaining the differences clearly.
You're very welcome!
Thanks, great explanation!
You're welcome! Thank you!
Great tips! I did not know much about variables before
Glad you could learn something !
@@thejunboy I always learn from you bless 🙌
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.
Does this method work with those community UI Kits (Bootstrap)? Currently working with Bootstrap 5 UI Kit and there are no variables only styles but I do see samatic style {i guess) Not sure how to leverage variable in this case.
i like shorter videos and i like the video
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.
I miss Sketch
What do you miss about Sketch? I've used it once and found Figma much easier to grasp and use.