Ultimate Guide to Figma Variables and Design Tokens!

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, I dive into the complete basics of Figma variables and design tokens. We'll explore how they can help engineers build faster, reduce miscommunication, and make future changes easier. I'll explain the concept of variables and how they differ from color styles, and I'll show you practical examples of how to use them in Figma. By the end, you'll have a solid understanding of design tokens and how they can improve your design system.
🔗 Basics of Design Tokens - • Beginner's Guide to DE...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
02:20 Why do we need Design Tokens?
07:12 Multiple Levels of Design Tokens
10:40 Color Styles vs Figma Variables
21:46 Uber's Design System
26:51 Atlassian's Design System
29:17 Material Design Tokens
--------------------------------------­---
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#productdesign #figma #uiuxdesign🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, I dive into the complete basics of Figma variables and design tokens. We'll explore how they can help engineers build faster, reduce miscommunication, and make future changes easier. I'll explain the concept of variables and how they differ from color styles, and I'll show you practical examples of how to use them in Figma. By the end, you'll have a solid understanding of design tokens and how they can improve your design system.
🔗 Basics of Design Tokens - • Beginner's Guide to DE...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
02:20 Why do we need Design Tokens?
07:12 Multiple Levels of Design Tokens
10:40 Color Styles vs Figma Variables
21:46 Uber's Design System
26:51 Atlassian's Design System
29:17 Material Design Tokens
--------------------------------------­---
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#productdesign #figma #uiuxdesign

[@niral_patel]

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

[@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 ❤

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

[@vedpathak9503]

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

[@mrif45]

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

[@uiux.jayesh]

Thanks chethan for this amazing tutorial ❤

[@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! ❤ 😊

[@Paulsign]

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

[@titangaming9292]

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

[@borgvommork]

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

[@niharbhagat]

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

[@shreyasborakhadikar]

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

[@johanartzen]

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

[@piero100fanti]

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

[@tubaiqbal3436]

Wow another understated video

[@joypong9203]

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

[@klyuvert]

This video helps a lot, thanks man 👍

[@StoriesMails]

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

[@kishorekumar8216]

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

[@WidiantoZhu]

Awesome! Thanks for your easy to understand explanation!

[@phunut6041]

Thank you so much

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

[@Fabi-Moreno]

tank you! great explanation!

[@user-jz9vs4gn4j]

Thanks a ton for such an Informative video 👏

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

[@mrair8259]

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

[@maxxtime1720]

Woah new outro with cool music 🔥

[@nazeerahmed8204]

Much waited🎉

[@kolavic]

Been waiting!

[@designwithdharmik6479]

Thank you for guiding me. :)

[@ronitpaul817]

Great content 👏

[@DoingwondersAlone]

Manifesting Chethan at next Config Design Event 💯

[@macakuaya]

You are the MVP

[@borkocurcic9622]

7:35 tututututu tuuukens... Love you man😊

[@ananths8968]

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

[@kindnessorimolade641]

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

[@luan_nunez]

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

[@aryanagrawal1011]

legend

[@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]

🤣🤣

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

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

[@user-gi1gt2hj3t]

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

[@user-gi1gt2hj3t]

@@DesignPilot thanks!

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

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

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

[@user-uy6iq7so6b]

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

[@DesignPilot]

Discuss with them

[@cherry-lp8yq]

Do u have a video for figma variables ?

[@DesignPilot]

This is the video

[@makhnagames]

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

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

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

[@pabitrashow9748]

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

[@mrajax_0101]

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

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

[@user-ci6wc4of8d]

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

[@user-sw5py9py7d]

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

[@DesignPilot]

That’s not possible

[@user-cu2ki4km6h]

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?

[@user-cu2ki4km6h]

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.

[@user-cu2ki4km6h]

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

[@user-cu2ki4km6h]

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