Chethan takes his time to explain things in a granular way. Dude is not only a great designer but also a great teacher. I understood variables at once, the use case of mj and it’s subordinates was easy to understand. Nice one as always chethan 👏🏻
Man you solved all my problems about tokens with great communication skills and perfect ability to resume complex concepts in simple words, Thanks for this video ❤
First time watch just processing the information, definately very informative but wow there is a ton that needs processing. Looking forward to your future videos
What I don't really get is this: at 25:50 you see the tokens are set to $black. But what if you only want to change the color of contentPrimary, and not borderSelected? Because, if you change the black color, it will change for the whole tree, right?
So if you want Content Primary and Border Selected to have a different color, you need to break that tree and assign a different color for example Grey 800 to Content Primary. Grey 800 could be used for something else too.
Thanks for the great content. I subscribed to your channel and liked your video. You're very good at explaining the material, making it easy to understand. Naming is getting longer. Keep up the good work! 💯👍
Thanks for the lesson, very insightfull. Something I don't understand is how Designers and Dev's connect on the tokens, they have a plugin between Figma and CSS files or only use the same naming convention with no connection at all?
First of all, thanks for this great content I agree with you that 3 levels are enough for us designers. But I'm experiencing that setting a 4th level gives you more flexibility when you need to go design dark mode. If you don't dive into a 4th level, you're stuck with the raw color translations that you have from the primitive colors, which may end up working but might not be the perfect fit for your UI
OYYY chethan I want to make you understand something about the developer side of what you were wishing for with combining opacity with colors 20:25 , its not a common practice in itself to do that in the developer world, all these tokens get converted into variables inside a config files. All the mapping that is present now is one to one there is no merging magic between tokens in figma and in most developer configs. If figma wants to impliment that they can make it avilable in the form of "token=function(color, opacity)" with a result of "token=rgba(255,231,234, #THE OPACITY)". But merging variables in a certain fashion of your choice inside token config file is not something that is normal setup in the developer world, the pattern of doing something like this "token=function(color, opacity)" is not commonly present inside developer config files. You should take a look at adding custom styles in tailwind [ a popular frontend library which forced tokens in dev world.... if u don't know :) ]. That might give you an idea on why its not a normal setup.
Thanks for the prompt reply!:) this has been overwhelming for me because I already have styles in a design library I’m doing which i want to replace it with tokens and is it better to remove all colour styles and replace it with tokens ? Once i assign the variables into tokens i would see a list of variables and a list of tokens which can also be messy . what is your opinion on this?
@youtu13ejunkie I would say that it’s better to remove the color styles and add tokens if you feel it would make it easy for your team and the engineering team.
Almost every video has same style of thumbnail and your latest video thumbnail is very good. font selection is good and its readable. last few weeks i followed your content. but i really frustrated with thumbnail and the thumbnail text style its not readable and not clear understand which kind of video it is. please try to make Thumbnail different for each video
Chethan takes his time to explain things in a granular way. Dude is not only a great designer but also a great teacher. I understood variables at once, the use case of mj and it’s subordinates was easy to understand. Nice one as always chethan 👏🏻
It is the same for most Indians. They break things down perfectly for learning
Man you solved all my problems about tokens with great communication skills and perfect ability to resume complex concepts in simple words, Thanks for this video ❤
The way you have explained the difference between variables and tokens is incredible !!
Thanks for the next-level content
Incredible video friend, I don't understand English, but with the subtitles and the way you explain it is very easy to understand, thank you very much
Wow i just amazed how you explained this things in 30 minutes, that's incridible 🤩! now i understand how tokens works
Great Video! Thanks for sharing! Especially the last part - the comparison of other famous design systems
Only from you I can expect this much detailed content, Kudos to you Chethan!
Thanks for the video! Really cleared out this entire design tokens thing for me 🙌🏽
i watched many videos about variables , they all teach well , but you are explaining why variable should use instead of color style. 💯
Manifesting Chethan at next Config Design Event 💯
First time watch just processing the information, definately very informative but wow there is a ton that needs processing. Looking forward to your future videos
Awesome! Thanks for your easy to understand explanation!
Thank you so much, I like the Uber's defination.
Thank you for creating this content, you're amazing!
What I don't really get is this: at 25:50 you see the tokens are set to $black. But what if you only want to change the color of contentPrimary, and not borderSelected? Because, if you change the black color, it will change for the whole tree, right?
So if you want Content Primary and Border Selected to have a different color, you need to break that tree and assign a different color for example Grey 800 to Content Primary. Grey 800 could be used for something else too.
Ah allright! Thanks for responding so fast!@@DesignPilot
thanks a ton as usual for providing killer content chethan bro 👊😎
You explain very easily what we really want to understand. Thank you.
Thanks a lot for this clear, detailed and useful explanation.
You made my day! Keep going 🚀
Thanks a ton for such an Informative video 👏
Thanks chethan for this amazing tutorial ❤
Wow another understated video
Chethan has explained everything in a way that anyone can get it even if they are not in design or even new to figma! ❤ 😊
This video helps a lot, thanks man 👍
Woah new outro with cool music 🔥
So much to learn from you man. Thank you! 🙌❤
Thanks for the great content. I subscribed to your channel and liked your video. You're very good at explaining the material, making it easy to understand. Naming is getting longer. Keep up the good work! 💯👍
Hi Chetan, thanks for this guide.
Can we combine a 3rd-level and 4th-levels for a few use cases like border-form, and content-input-value?
You can
@@DesignPilot thanks!
Thank you for guiding me. :)
Another well explained video,many thanks
So it seems for a beginner the best design system to start with would be ubers'
Figma: We have made the detailed videos for you to make you understand our new features.
Me: Sorry, Figma, Chetan's got this!🤩
🤣🤣
awesome thank you! hard to find this kind of tutorial!
Thanks for the lesson, very insightfull. Something I don't understand is how Designers and Dev's connect on the tokens, they have a plugin between Figma and CSS files or only use the same naming convention with no connection at all?
Every team does it differently
Great Video Chethan, A small doubt, What is the right time to start building a design system?
Upto you. Once you start finalising on the general look and feel and behaviour of components.
@@DesignPilot Thank You
First of all, thanks for this great content
I agree with you that 3 levels are enough for us designers. But I'm experiencing that setting a 4th level gives you more flexibility when you need to go design dark mode. If you don't dive into a 4th level, you're stuck with the raw color translations that you have from the primitive colors, which may end up working but might not be the perfect fit for your UI
The 4th level is a component level token. I’m not sure how that would affect dark mode.
@@DesignPilot true, I messed with my reasoning. Keep up with the videos
@@DesignPilot Component level token can be used for buttons, badges where text(or icon) need to same color across both modes.
tank you! great explanation!
whats is difference between reference tokens and system tokens ?
A system token is when you want to differentiate between multiple products or design systems. Everything else is a reference token
Once again a super didactic content and with a simple and objective explanation. Well done.
OYYY chethan I want to make you understand something about the developer side of what you were wishing for with combining opacity with colors 20:25 , its not a common practice in itself to do that in the developer world, all these tokens get converted into variables inside a config files. All the mapping that is present now is one to one there is no merging magic between tokens in figma and in most developer configs.
If figma wants to impliment that they can make it avilable in the form of "token=function(color, opacity)" with a result of "token=rgba(255,231,234, #THE OPACITY)". But merging variables in a certain fashion of your choice inside token config file is not something that is normal setup in the developer world, the pattern of doing something like this "token=function(color, opacity)" is not commonly present inside developer config files. You should take a look at adding custom styles in tailwind [ a popular frontend library which forced tokens in dev world.... if u don't know :) ]. That might give you an idea on why its not a normal setup.
Do u have a video for figma variables ?
This is the video
is there any AirBnB design token website like this?
Nope
Thank you so much
Hey you mentioned designers in other companies follow certain stuff
How do we get that insights?
What do you mean by stuff?
@@DesignPilot I think he means how do you know that in other companies work with only 3 levels of tokens? (I have this questions too)
Well, when you see open source design systems you learn, and then there are UA-cam videos and interviews and articles.
@@DesignPilot thanks for your video and comment! I really loved it!!
Great content 👏
No other designers teach the way you do, you just mix butter to get this into our mind 😅
Thank you chethan. Your are making a skillful design community. ❤
You are the MVP
Thanks for your sharing！
But how can UI designer align these tokens with Devs？
Discuss with them
You can’t create variables for typography right?
Not yet
Thanks for the prompt reply!:) this has been overwhelming for me because I already have styles in a design library I’m doing which i want to replace it with tokens and is it better to remove all colour styles and replace it with tokens ? Once i assign the variables into tokens i would see a list of variables and a list of tokens which can also be messy . what is your opinion on this?
@youtu13ejunkie I would say that it’s better to remove the color styles and add tokens if you feel it would make it easy for your team and the engineering team.
thanks for your reply again and help :D @@DesignPilot
After seeing this variable and variants
My brain: 😵💫🤯
Much waited🎉
❤ thank you ❤
Been waiting!
Bro Add this video to Playlist "The Super Untimate Guide to Design System" so it will be more easier to save it
Actual Video Starts Here: ua-cam.com/video/r4t5FlcRPg8/v-deo.html
legend
Why don't you use variables inside a color style?
That’s not possible
Please change the thumbnail for each video separately, it is very very difficult to find the video by looking at the thumbnail.
Which videos?
Almost every video has same style of thumbnail and your latest video thumbnail is very good. font selection is good and its readable. last few weeks i followed your content. but i really frustrated with thumbnail and the thumbnail text style its not readable and not clear understand which kind of video it is. please try to make Thumbnail different for each video
@user-cu2ki4km6h I’ve done A/B tests. And the current thumbnail seems to have a better CTR for me.
@@DesignPilot Yes . Ultimate Guide to Figma Variables and Design Tokens! Video thum is the pretty good.
@@DesignPilot BTW your videos are so much helpful. Thank you for your kind of support
please use a better mic
Sorry, the settings were a bit messed up for this video. Realised it too late. The other videos in this series show be much better
Let's start
What is going on 14:58
Can you elaborate?