Using a person, their nickname and their different roles was an excellent way to present a somewhat complex topic. I've seen a lot of explanations on design tokens and this is one of the better ones.
I've just started some weeks ago learning web design and now I can't imagine watching another content creator other than you, you're so good I'm so glad I found you this early
@@DesignPilot Thanks just trying to understand if a developer begins using these tokens won't it be confusing if 2 tokens have different values? Where does the developer define that Primary Surface N-0 and Icon Surface N-0 aren't the same colours? Appreciate the help just trying to understand.
Hi, at 6:09 why would changing just the primary CTA to blue be a long task to find them all? Why could you not target the selector for primary CTA and change all the button colours in one go?
Hey! how can I get the image of properties which you took as a reference to explain raw variables, base token, semantic token, component token, output and so forth.
@@DesignPilot tbh, I looked around and still looking for the link. It'd be very helpful if you can paste it here or just tell me the name by which that link had been mentioned. Thanks!
Hey Chethan, at 17:02 as we have changed the hex value assigned to the design tokens, namely primary surface and card primary text from #ffffff to #000000, it should mean that the tonal value which was N-0 should also change right to say maybe N-900? Am I getting this correct?
Hey chetan you told that the name of the person and the nickname will not change but the things they are gonna used for is gonna change. But in the light to dark mode example The hex value for the light mode was #FFFFFF but when changing into dark mode The hex value changed to #000000 doesn't it mean we are changing the person. The roles are same still
@@DesignPilot multi brand system, where design tokens are propogated throught various apps / web of different brands within the same organisation, for example a a news organisation where you have multiple news sites with a different brand and core tokens .. ( different colors, typography etc) should you then have different core / base tokens and different semantic tokens?
@Design Pilot very well explained. My UX Team is introducing design tokens to our devs and different platforms today. I will use this example in the workshop and reference to your channel.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
This was a great video. Could you share that example of the complex design tokens you found online?
Here you go!
twitter.com/chrisd008/status/1536430355787431937
Using a person, their nickname and their different roles was an excellent way to present a somewhat complex topic. I've seen a lot of explanations on design tokens and this is one of the better ones.
Very glad to hear that. Thank you 🙏
Where have you been since 😩...the only person that explains it in CLEAR SIMPLE TERMS, thanks really
I've just started some weeks ago learning web design and now I can't imagine watching another content creator other than you, you're so good I'm so glad I found you this early
The BEST video online explaining design systems
Appreciate everything about this video. So grateful
Thank you for your channel. I just wanted to say I love your logo!
wow thanks bro This is very clear video that I saw
What a wonderful example!! Thank you so much, everything is just clear crystal
Hi can you please answer my question, in 16:49 of this video why is Primary surface and Icon Surface both N-0 when they have different colours?
Because they are of different modes. That's the whole point of a token. It can have 2 different colors for 2 different modes.
@@DesignPilot Thanks just trying to understand if a developer begins using these tokens won't it be confusing if 2 tokens have different values? Where does the developer define that Primary Surface N-0 and Icon Surface N-0 aren't the same colours? Appreciate the help just trying to understand.
@fdsgfdghghdhffhdfh-eo7pm Talk to your engineers about this. Understand how they define the tokens in code
awesome video, thank you so so much!
👏👏👏 This is so well explained! Thank you!!!
Very information and well explained. Keep sharing informative stuffs. Thank you soo much .appreciate your effort
Hey Chetan! Great video for beginners, Could you explain on how design tokens work in case of buttons/ surfaces/ outline with gradients?
Just use color styles for that. And make sure the colors you’re using in the gradient exist in the designs system
Thanks for the video, I learned something!
This is a great video! I love it!
nice explanation!
Hi, at 6:09 why would changing just the primary CTA to blue be a long task to find them all? Why could you not target the selector for primary CTA and change all the button colours in one go?
thanks! you were ahead of the game, even before variables were introduced :)
Great analogy!
Beautiful example.
Exactly! How is this even called a "Beginner's Guide"?
Thanks, It's an amazing tutorial :). Can you please make a tutorial on the right approach to designing a website/ mobile app?
Yes. That is coming next week.
Checkout OnePageLove, Awwwards and LandBook
@@DesignPilot Thanks bro
Hi bro that was a great video. Would you mind sharing where I can find the guide document used in this video?
You can check the pinned comment
Hey! how can I get the image of properties which you took as a reference to explain raw variables, base token, semantic token, component token, output and so forth.
There must be a link in the description
@@DesignPilot tbh, I looked around and still looking for the link. It'd be very helpful if you can paste it here or just tell me the name by which that link had been mentioned. Thanks!
Do we have design token for typography also?
Absolutely. But it’s not really needed for text, since they are not as complicated as colors.
Hey Chethan, at 17:02 as we have changed the hex value assigned to the design tokens, namely primary surface and card primary text from #ffffff to #000000, it should mean that the tonal value which was N-0 should also change right to say maybe N-900? Am I getting this correct?
No. The Tonal values never change. Which means you will have 2x the colors. One for light mode and one for dark mode. Each token will will 2 versions.
@@DesignPilot ohh yesss got it, thanks a lot!
I think this video should be updated after the design variance feature from Figma
It’s coming soon on RUclips. You can already find it my Design Systems Course
Actually I updated the description.
I am unable to access the link to the image with design tokens
Which link?
@@DesignPilot which you took as a reference to explain raw variables, base token, semantic token, component token, output properties.
Brother
This is important to learn as a beginner ( intern ) because its confusing
Yes
Hey chetan you told that the name of the person and the nickname will not change but the things they are gonna used for is gonna change. But in the light to dark mode example
The hex value for the light mode was #FFFFFF but when changing into dark mode
The hex value changed to #000000 doesn't it mean we are changing the person. The roles are same still
Good observation. Those rules you mentioned apply only to a single theme. Think of the dark mode as a Doppelgänger in another multiverse.
@@DesignPilot Got it thanks ❤️🙏
does it mean that if you have a multi brand token system, that you should have Foundations A and B but also the semantic tokens A and B?
What do you mean Multi brand?
@@DesignPilot multi brand system, where design tokens are propogated throught various apps / web of different brands within the same organisation, for example a a news organisation where you have multiple news sites with a different brand and core tokens .. ( different colors, typography etc) should you then have different core / base tokens and different semantic tokens?
That’s your call. But ideally yes. Each news site will have its own DS and it’s on tokens. If you have 1 DS for all the sites, then 1 set of tokens
Figma introduced variables
Yes, I have an updated video about it on my channel
🔥🔥
⏳
Also too small to know the difference between 'too' and 'to'
Must have been a typo buddy
little confusion
The green is not accessible. 😂
Hahaha. I know 😅
@Design Pilot very well explained. My UX Team is introducing design tokens to our devs and different platforms today. I will use this example in the workshop and reference to your channel.