Ultimate Guide to Figma Variables and Design Tokens!

[@ikennagibson3933]

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 👏🏻

[@chidubemchinwuko9984]

It is the same for most Indians. They break things down perfectly for learning

[@salvatorealamia980]

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 ❤

[@niral_patel]

The way you have explained the difference between variables and tokens is incredible !! Thanks for the next-level content

[@johan_olaya]

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

[@DoingwondersAlone]

Manifesting Chethan at next Config Design Event 💯

[@titangaming9292]

i watched many videos about variables , they all teach well , but you are explaining why variable should use instead of color style. 💯

[@mrif45]

Wow i just amazed how you explained this things in 30 minutes, that's incridible 🤩! now i understand how tokens works

[@shriyashekhar4454]

Chethan has explained everything in a way that anyone can get it even if they are not in design or even new to figma! ❤ 😊

[@niharbhagat]

Thanks for the video! Really cleared out this entire design tokens thing for me 🙌🏽

[@vedpathak9503]

Only from you I can expect this much detailed content, Kudos to you Chethan!

[@borgvommork]

Great Video! Thanks for sharing! Especially the last part - the comparison of other famous design systems

[@WidiantoZhu]

Awesome! Thanks for your easy to understand explanation!

[@artworthi]

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

[@tubaiqbal3436]

Wow another understated video

[@joypong9203]

Thank you so much, I like the Uber's defination.

[@tanutyagi2550]

Figma: We have made the detailed videos for you to make you understand our new features. Me: Sorry, Figma, Chetan's got this!🤩

[@DesignPilot]

🤣🤣

[@uiux.jayesh]

Thanks chethan for this amazing tutorial ❤

[@piero100fanti]

Thanks a lot for this clear, detailed and useful explanation. You made my day! Keep going 🚀

[@PaulBrownTown]

You explain very easily what we really want to understand. Thank you.

[@StoriesMails]

Thank you for creating this content, you're amazing!

[@kishorekumarseenivasan]

thanks a ton as usual for providing killer content chethan bro 👊😎

[@maxxtime1720]

Woah new outro with cool music 🔥

[@keerthisayam]

Thanks a ton for such an Informative video 👏

[@shreyasborakhadikar]

So much to learn from you man. Thank you! 🙌❤

[@klyuvert]

This video helps a lot, thanks man 👍

[@ananths8968]

Thank you chethan. Your are making a skillful design community. ❤

[@djashawe88923]

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! 💯👍

[@kolavic]

Been waiting!

[@Fabi-Moreno]

tank you! great explanation!

[@ScutuRC]

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?

[@DesignPilot]

Every team does it differently

[@macakuaya]

You are the MVP

[@abhinavrv0092]

Great Video Chethan, A small doubt, What is the right time to start building a design system?

[@DesignPilot]

Upto you. Once you start finalising on the general look and feel and behaviour of components.

[@abhinavrv0092]

@@DesignPilot Thank You

[@nazeerahmed8204]

Much waited🎉

[@AkashUpadhyay-h5j]

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?

[@DesignPilot]

You can

[@AkashUpadhyay-h5j]

@@DesignPilot thanks!

[@abulut]

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?

[@DesignPilot]

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.

[@abulut]

Ah allright! Thanks for responding so fast!@@DesignPilot

[@phunut6041]

Thank you so much

[@kindnessorimolade641]

Another well explained video,many thanks So it seems for a beginner the best design system to start with would be ubers'

[@mrair8259]

awesome thank you! hard to find this kind of tutorial!

[@luan_nucci]

Once again a super didactic content and with a simple and objective explanation. Well done.

[@designwithdharmik6479]

Thank you for guiding me. :)

[@ronitpaul817]

Great content 👏

[@feelerino]

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

[@DesignPilot]

The 4th level is a component level token. I’m not sure how that would affect dark mode.

[@feelerino]

@@DesignPilot true, I messed with my reasoning. Keep up with the videos

[@amberagrawal385]

@@DesignPilot Component level token can be used for buttons, badges where text(or icon) need to same color across both modes.

[@smilli6415]

whats is difference between reference tokens and system tokens ?

[@DesignPilot]

A system token is when you want to differentiate between multiple products or design systems. Everything else is a reference token

[@ooogabooga5111]

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.

[@pabitrashow9748]

After seeing this variable and variants My brain: 😵‍💫🤯

[@cherry-lp8yq]

Do u have a video for figma variables ?

[@DesignPilot]

This is the video

[@DarrenLee-f9e]

Thanks for your sharing！ But how can UI designer align these tokens with Devs？

[@DesignPilot]

Discuss with them

[@mrajax_0101]

Bro Add this video to Playlist "The Super Untimate Guide to Design System" so it will be more easier to save it

[@iCosmictube]

❤ thank you ❤

[@pranavpatil2339]

Hey you mentioned designers in other companies follow certain stuff How do we get that insights?

[@DesignPilot]

What do you mean by stuff?

[@pilarsabogal2]

@@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)

[@DesignPilot]

Well, when you see open source design systems you learn, and then there are KZbin videos and interviews and articles.

[@pilarsabogal2]

@@DesignPilot thanks for your video and comment! I really loved it!!

[@archisapien4179]

is there any AirBnB design token website like this?

[@DesignPilot]

Nope

[@aryanagrawal1011]

legend

[@fernwehtwl]

You can’t create variables for typography right?

[@DesignPilot]

Not yet

[@fernwehtwl]

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?

[@DesignPilot]

@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.

[@fernwehtwl]

thanks for your reply again and help :D @@DesignPilot

[@makhnagames]

No other designers teach the way you do, you just mix butter to get this into our mind 😅

[@GiaBảoTrần-p8d]

Why don't you use variables inside a color style?

[@DesignPilot]

That’s not possible

[@SumitYadav-g2y2p]

Actual Video Starts Here: kzbin.info/www/bejne/qGXXZnmimLeDnZo

[@KoishikAhmed-e8q]

Please change the thumbnail for each video separately, it is very very difficult to find the video by looking at the thumbnail.

[@DesignPilot]

Which videos?

[@KoishikAhmed-e8q]

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

[@DesignPilot]

@user-cu2ki4km6h I’ve done A/B tests. And the current thumbnail seems to have a better CTR for me.

[@KoishikAhmed-e8q]

@@DesignPilot Yes . Ultimate Guide to Figma Variables and Design Tokens! Video thum is the pretty good.

[@KoishikAhmed-e8q]

@@DesignPilot BTW your videos are so much helpful. Thank you for your kind of support

[@AnindyaSengupta]

please use a better mic

[@DesignPilot]

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

[@Itachis_bro]

Let's start

[@hellboy6167]

What is going on 14:58

[@DesignPilot]

Can you elaborate?