As a professional design who has worked alongside developers for almost 10 years, this is extremely accurate based on my experience. I have had those exact encounters with the dev team.
This is the best way I’ve heard it described- and I’ve gone through written articles, other videos , Reddit, etc. I somewhat got it but with these examples it’s thoroughly grasped. Thank you so much, so so helpful
This is brilliant, my current project is putting together a design system (for digital, print and front of house) for one of the biggest aps department in Australia. I've researched and learnt so much in the last few weeks about design systems. I've been looking at private companies and their design systems set up, and learning different terms like tokens, foundations etc... This video is so basic and straight to the point. Well done mate. Keep em coming. 👍
Really helpful examples as it’s reflects what discussions happen when moving between design and development in product design. You could also setup direct CSS or SASS variables to achieve a similar outcome
In my experience as a font-end developer, 'tokens' are mostly created as variables / constants by the developer, using whatever styleguide has been provided by the design team. It's often just a Figma/Sketch file with all the needed values for fonts, colours etc, and it's up to the dev team to translate these into re-usable variables in their projects. I personally haven't heard the term 'token' used for this purpose, but we've all been working in this way for a while, regardless of terminology.
I actually really enjoyed this explanation to an otherwise abstract concept. It seems this is something I've just instinctually always done throughout the years, but interesting it has a name and formal explanation in the industry now. It seems this really just has design and dev teams align around using the same terms and definitions for everything; more or less having the design team/system organised like CSS classes and specificity rules that directly translate to front end equivalents. My only question is about efficiency, as those intermediate, alias tokens are difficult to anticipate early on, and do require a fair bit of work to inject later on, though of course the benefit is that once set, they shouldn't really require any further maintenance…in theory anyway. 😎 Thanks!
totally agree! I still believe this can be managed in the design system library. But this bloke explained it so well that no other RUclipsrs did. Welldone
Would you use a file JSON file of tokens for CSS as well? And the are the context specific tokens in anyway related to the global tokens? From your example they seem separate but you mentioned that they are kind of inbetween? Thanks
This was a huge help, but question about the part where you have content specific tokens / Alias tokens. What if Starbucks-Brand color was linked to all 3 of those alias tokens wouldn't that be the same as if you linked the global right to the buttons? I didn't fully understand how that lets you change the color of the radio button without making it complicated for development. Thanks!
I think the idea would be to make various alias tokens for each use case. The radio button colors would have their own separate tokens linked to global tokens. Therefore ,when a change is needed, you don't need to change the global token, only the alias tokens for the radio buttons.
I’m a graphic designer but I’ve never heard of these. Is it usually part of a designer’s role to make these? How do I make them? Our team doesn’t work directly with developers or engineers because it’s outsourced, but I’m curious if I’d need to know how to make them in the future. Excellent video btw!
Design tokens become useful for products that scale vastly but has to stay consistent in the visual design. As a designer, you want to list out the style value options ( and preferably token names) you use in your design system .Then share that with engineers so they can create and manage them. Preferably you want the same team that can manage tokens with you, but regardlessly it's a good practice so you can easily update styles in bulk. "Dark mode" for example is leveraging design tokens to quickly toggle themes😎
Thank you, it's a very helpful video. There is a question: what if a component has two color values? If we take this radio button, there are two colors there: blue for selection and gray for outside border. Does that mean that we must assign two global color tokens for the alias token of this component? And the secon question is how and in what app are these design tokes should be created? Can you please do more videos on tokens and maybe actually show how to make them? That would be so great
Sorry for the late reply, tokens are used to manage reused colors. If both colors used on component are reused color then yea tokenize both. Each token should represent a single style, so create one per color. For your second question, manage tokens in a spreadsheet or table or anywhere thats easy to share and update. Its just a lable-value combination. U dont need special app, but once handed off to engineer, theyll manage them on their code base :)
no components in XD are the same as components in Figma. this are designs parts you save to reuse, for example buttons. Token is a design term and as far as I see not used as a description of a figma function. The function to create tokens is names variables. this is not a feature XD has. XD has only styles, but Figma also has styles. You may want to check out videos about the differences between styles and variables.
Once the designer ( or anyone) sets the list of tokens (key + value), they need to be stored into a JSON or YAML format ( some design tools support plugins to format this), then engineers can generate tokens from it to the appropriate technology ( web, iOS, android... ) to use the tokens. You can check this great article here ( uxdesign.cc/design-tokens-how-to-use-them-effectively-d495ff05cbbf ) and scroll to section "How Design Token Works?"
As a professional design who has worked alongside developers for almost 10 years, this is extremely accurate based on my experience. I have had those exact encounters with the dev team.
yup!
WOW This is the best, and more simple explanation for design tokens I have ever seen. Thanks a lot!
This is the best way I’ve heard it described- and I’ve gone through written articles, other videos , Reddit, etc. I somewhat got it but with these examples it’s thoroughly grasped. Thank you so much, so so helpful
I think this is the best video introducing the Design Tokens concept. Thanks🙌
just watched 5 different videos trying to understand what design tokens are and yours is the only one that actually helped! thanks
man, youre god, thanks for not making a video that 1 hour long and explaining in 6 mins.
This is brilliant, my current project is putting together a design system (for digital, print and front of house) for one of the biggest aps department in Australia. I've researched and learnt so much in the last few weeks about design systems. I've been looking at private companies and their design systems set up, and learning different terms like tokens, foundations etc... This video is so basic and straight to the point. Well done mate. Keep em coming. 👍
I went thru the same mate! Glad i could help😎
Just helped me understand tokens in 6 minutes vs 2 weeks of reading 😅 very grateful Product Designer here 🙏🏽
The best introduction to Design Tokens I've heard so far!
Really helpful examples as it’s reflects what discussions happen when moving between design and development in product design. You could also setup direct CSS or SASS variables to achieve a similar outcome
I appreciate how clearly you explained this. Thank you.
Awesome bro!!! Good job!!! 😎 Why aren't the component-specific tokens named?
I LOVED this video. Super helpful,succinct, and great summary on the topic. I’m officially a fan, great video!!
Thank you! easy Comprehend with your storytelling. 😃
By far the best explanation of design tokens i've come across. Thanks mate, i learnt something new today!
Also please make more such videos on design systems.
In my experience as a font-end developer, 'tokens' are mostly created as variables / constants by the developer, using whatever styleguide has been provided by the design team. It's often just a Figma/Sketch file with all the needed values for fonts, colours etc, and it's up to the dev team to translate these into re-usable variables in their projects. I personally haven't heard the term 'token' used for this purpose, but we've all been working in this way for a while, regardless of terminology.
Nice explanation ! Useful thanks !
Super helpful explanations. Thank you!
where is the like button! where is the like button! cool video man.
Summarized eveytthing sweetly, this video should be more popular4
Thank you, that was the quick and simple explanation that I was looking for.
I actually really enjoyed this explanation to an otherwise abstract concept.
It seems this is something I've just instinctually always done throughout the years, but interesting it has a name and formal explanation in the industry now.
It seems this really just has design and dev teams align around using the same terms and definitions for everything; more or less having the design team/system organised like CSS classes and specificity rules that directly translate to front end equivalents.
My only question is about efficiency, as those intermediate, alias tokens are difficult to anticipate early on, and do require a fair bit of work to inject later on, though of course the benefit is that once set, they shouldn't really require any further maintenance…in theory anyway. 😎
Thanks!
totally agree! I still believe this can be managed in the design system library. But this bloke explained it so well that no other RUclipsrs did. Welldone
This is going to help my project a lot, thank you!
Super simple explanation about design tokens, you nailed it man !!!
well, thank you for sharing. You explained very clearly. Cheers
Nicely explained, so easy to learn
this is perfect, thank you!
This is I what I'm talking about, great explanation!
what a legendary video
WOW! Great explanation!
What's the difference between design tokens vs. CSS?
Thank you so much! This is what I'm looking for!!! the best!!
this is so useful I dont knw why designs apps are not taking advantage of this
You make it look easy, great job 👏
I dont understand the coding part. How does a coder add the token in the code? Would have liked to see the example in the storyline.
Easy to comprehend. Thanks for the explanation. :)
Great little story
Thank you !
Really awesome explanation video, the best we have encountered, great job!
i love the way you explain that !
Would you use a file JSON file of tokens for CSS as well?
And the are the context specific tokens in anyway related to the global tokens? From your example they seem separate but you mentioned that they are kind of inbetween? Thanks
👍👍👍❤️ Thank you very much for your clear explanation
Engineer’s TLDR: a constant/parameter at project’s style
OMG THANK YOU FOR THIS!
TIL! :) Thank you for sharing this.
This was a huge help, but question about the part where you have content specific tokens / Alias tokens. What if Starbucks-Brand color was linked to all 3 of those alias tokens wouldn't that be the same as if you linked the global right to the buttons? I didn't fully understand how that lets you change the color of the radio button without making it complicated for development. Thanks!
I think the idea would be to make various alias tokens for each use case. The radio button colors would have their own separate tokens linked to global tokens. Therefore ,when a change is needed, you don't need to change the global token, only the alias tokens for the radio buttons.
This is grate explanation. Good job!
You are amazing!!
I’m a graphic designer but I’ve never heard of these. Is it usually part of a designer’s role to make these? How do I make them? Our team doesn’t work directly with developers or engineers because it’s outsourced, but I’m curious if I’d need to know how to make them in the future. Excellent video btw!
Design tokens become useful for products that scale vastly but has to stay consistent in the visual design. As a designer, you want to list out the style value options ( and preferably token names) you use in your design system .Then share that with engineers so they can create and manage them. Preferably you want the same team that can manage tokens with you, but regardlessly it's a good practice so you can easily update styles in bulk. "Dark mode" for example is leveraging design tokens to quickly toggle themes😎
Thank you, it's a very helpful video. There is a question: what if a component has two color values? If we take this radio button, there are two colors there: blue for selection and gray for outside border. Does that mean that we must assign two global color tokens for the alias token of this component? And the secon question is how and in what app are these design tokes should be created? Can you please do more videos on tokens and maybe actually show how to make them? That would be so great
Sorry for the late reply, tokens are used to manage reused colors. If both colors used on component are reused color then yea tokenize both. Each token should represent a single style, so create one per color.
For your second question, manage tokens in a spreadsheet or table or anywhere thats easy to share and update. Its just a lable-value combination. U dont need special app, but once handed off to engineer, theyll manage them on their code base :)
it was great thank you so much
How to Nest and Name tokens? Is there a place where i can see how you name tokens and nest them?
Great job
Nice
Hey great video! I just have one question, are design tokens made into classes in css afterwards?
JSON is probly a good way to structure them
super clear thanks
Thanxxxxx
Thank you :)
Great stuff man
Thanks for checkin in GREAT
Hmm.. I use "Nicknames" for elements for years but we never called them "tokens" 🤷♂️
Aren't components in XD the same as Tokens in Figma? Please, correct me if I am wrong.
no components in XD are the same as components in Figma. this are designs parts you save to reuse, for example buttons. Token is a design term and as far as I see not used as a description of a figma function. The function to create tokens is names variables. this is not a feature XD has. XD has only styles, but Figma also has styles. You may want to check out videos about the differences between styles and variables.
Can anyone please recommend a plugin for me , i am having issues with tokens for figma
Thank youuuu!!!
Designers invented variables
How are tokens actually created?
Once the designer ( or anyone) sets the list of tokens (key + value), they need to be stored into a JSON or YAML format ( some design tools support plugins to format this), then engineers can generate tokens from it to the appropriate technology ( web, iOS, android... ) to use the tokens. You can check this great article here ( uxdesign.cc/design-tokens-how-to-use-them-effectively-d495ff05cbbf ) and scroll to section "How Design Token Works?"
UX Lord / Simplifying Design & Productivity thanks!!
UX Lord / Simplifying Design & Productivity the link didn’t work.
@@brennadavis2724 Thank you. Should work now.
Designers know what the HEX values are...