Ultimate Guide to Figma Variables and Design Tokens!
Vložit
- čas přidán 5. 08. 2024
- 🚀 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 - Krátké a kreslené filmy
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
The way you have explained the difference between variables and tokens is incredible !!
Thanks for the next-level content
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 ❤
Only from you I can expect this much detailed content, Kudos to you Chethan!
Great Video! Thanks for sharing! Especially the last part - the comparison of other famous design systems
Thanks for the video! Really cleared out this entire design tokens thing for me 🙌🏽
Thanks a lot for this clear, detailed and useful explanation.
You made my day! Keep going 🚀
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! 💯👍
Wow i just amazed how you explained this things in 30 minutes, that's incridible 🤩! now i understand how tokens works
You explain very easily what we really want to understand. Thank you.
i watched many videos about variables , they all teach well , but you are explaining why variable should use instead of color style. 💯
So much to learn from you man. Thank you! 🙌❤
Thanks chethan for this amazing tutorial ❤
Chethan has explained everything in a way that anyone can get it even if they are not in design or even new to figma! ❤ 😊
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
Awesome! Thanks for your easy to understand explanation!
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
Thank you so much, I like the Uber's defination.
Thank you for creating this content, you're amazing!
thanks a ton as usual for providing killer content chethan bro 👊😎
This video helps a lot, thanks man 👍
awesome thank you! hard to find this kind of tutorial!
Wow another understated video
Thanks a ton for such an Informative video 👏
Woah new outro with cool music 🔥
tank you! great explanation!
Been waiting!
Thank you for guiding me. :)
Much waited🎉
Thank you so much
Great content 👏
7:35 tututututu tuuukens... Love you man😊
Manifesting Chethan at next Config Design Event 💯
You are the MVP
Another well explained video,many thanks
So it seems for a beginner the best design system to start with would be ubers'
Thank you chethan. Your are making a skillful design community. ❤
Once again a super didactic content and with a simple and objective explanation. Well done.
Figma: We have made the detailed videos for you to make you understand our new features.
Me: Sorry, Figma, Chetan's got this!🤩
🤣🤣
legend
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
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
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!
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.
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
No other designers teach the way you do, you just mix butter to get this into our mind 😅
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
Thanks for your sharing！
But how can UI designer align these tokens with Devs？
Discuss with them
Do u have a video for figma variables ?
This is the video
After seeing this variable and variants
My brain: 😵💫🤯
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 CZcams videos and interviews and articles.
@@DesignPilot thanks for your video and comment! I really loved it!!
is there any AirBnB design token website like this?
Nope
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.
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: czcams.com/video/r4t5FlcRPg8/video.html
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
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