Ultimate Guide to Figma Variables and Design Tokens!

Подписаться 100 тыс.

Просмотров 34 тыс.

50% 1

🚀 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: designpilot21@gmail.com
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: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#productdesign #figma #uiuxdesign

Кино

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 91

@niral_patel 10 месяцев назад

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

@ikennagibson3933 10 месяцев назад

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 10 месяцев назад

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

@vedpathak9503 10 месяцев назад

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

@salvatorealamia980 8 месяцев назад

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 ❤

@borgvommork 9 месяцев назад

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

@uiux.jayesh 10 месяцев назад

Thanks chethan for this amazing tutorial ❤

@shreyasborakhadikar 10 месяцев назад

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

@Paulsign 10 месяцев назад

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

@niharbhagat 3 месяца назад

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

@piero100fanti 5 месяцев назад

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

@djashawe88923 10 месяцев назад

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

@mrif45 8 месяцев назад

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

@kishorekumar8216 5 месяцев назад

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

@shriyashekhar4454 10 месяцев назад

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

@klyuvert 9 месяцев назад

This video helps a lot, thanks man 👍

@mrair8259 10 месяцев назад

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

@StoriesMails 4 месяца назад

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

@WidiantoZhu 3 месяца назад

Awesome! Thanks for your easy to understand explanation!

@tubaiqbal3436 10 месяцев назад

Wow another understated video

@joypong9203 Месяц назад

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

@titangaming9292 8 месяцев назад

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

@johanartzen 7 месяцев назад

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

@user-jz9vs4gn4j 4 месяца назад

Thanks a ton for such an Informative video 👏

@artworthi 10 месяцев назад

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

@maxxtime1720 10 месяцев назад

Woah new outro with cool music 🔥

@Fabi-Moreno 10 месяцев назад

tank you! great explanation!

@kolavic 10 месяцев назад

Been waiting!

@designwithdharmik6479 5 месяцев назад

Thank you for guiding me. :)

@luan_nunez 10 месяцев назад

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

@nazeerahmed8204 10 месяцев назад

Much waited🎉

@phunut6041 7 месяцев назад

Thank you so much

@ronitpaul817 10 месяцев назад

Great content 👏

@ananths8968 10 месяцев назад

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

@DoingwondersAlone 10 месяцев назад

Manifesting Chethan at next Config Design Event 💯

@kindnessorimolade641 5 месяцев назад

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

@macakuaya 8 месяцев назад

You are the MVP

@borkocurcic9622 10 месяцев назад

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

@tanutyagi2550 10 месяцев назад

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

@DesignPilot 10 месяцев назад

🤣🤣

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

@feelerino 6 месяцев назад

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 6 месяцев назад

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

@feelerino 6 месяцев назад

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

@abulut 5 месяцев назад

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 5 месяцев назад

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 5 месяцев назад

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

@ScutuRC 2 месяца назад

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 2 месяца назад

Every team does it differently

@abhinavrv0092 9 месяцев назад

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

@DesignPilot 9 месяцев назад

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

@abhinavrv0092 9 месяцев назад

@@DesignPilot Thank You

@aryanagrawal1011 10 месяцев назад

legend

@makhnagames 10 месяцев назад

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

@cherry-lp8yq 12 дней назад

Do u have a video for figma variables ?

@DesignPilot 12 дней назад

This is the video

@user-uy6iq7so6b 9 месяцев назад

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

@DesignPilot 9 месяцев назад

Discuss with them

@smilli6415 5 месяцев назад

whats is difference between reference tokens and system tokens ?

@DesignPilot 5 месяцев назад

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

@pabitrashow9748 9 месяцев назад

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

@ooogabooga5111 8 месяцев назад

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 10 месяцев назад

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

@DesignPilot 10 месяцев назад

What do you mean by stuff?

@pilarsabogal2 10 месяцев назад

@@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 10 месяцев назад

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

@pilarsabogal2 10 месяцев назад

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

@archisapien4179 9 месяцев назад

is there any AirBnB design token website like this?

@DesignPilot 9 месяцев назад

Nope

@mrajax_0101 9 месяцев назад

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

@user-ci6wc4of8d 10 месяцев назад

Actual Video Starts Here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-r4t5FlcRPg8.html

@fernwehtwl 6 месяцев назад

You can’t create variables for typography right?

@DesignPilot 6 месяцев назад

Not yet

@fernwehtwl 6 месяцев назад

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 6 месяцев назад

@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 6 месяцев назад

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

@user-sw5py9py7d 9 месяцев назад

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

@DesignPilot 9 месяцев назад

That’s not possible

@user-cu2ki4km6h 10 месяцев назад

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

@DesignPilot 10 месяцев назад

Which videos?

@user-cu2ki4km6h 10 месяцев назад

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 10 месяцев назад

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

@user-cu2ki4km6h 10 месяцев назад

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

@user-cu2ki4km6h 10 месяцев назад

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