This was a great video. Could you share that example of the complex design tokens you found online?

@DesignPilot

2 жыл бұрын

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.

@DesignPilot

2 жыл бұрын

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

What a wonderful example!! Thank you so much, everything is just clear crystal

Thank you for your channel. I just wanted to say I love your logo!

👏👏👏 This is so well explained! Thank you!!!

thanks! you were ahead of the game, even before variables were introduced :)

Very information and well explained. Keep sharing informative stuffs. Thank you soo much .appreciate your effort

Thanks for the video, I learned something!

This is a great video! I love it!

awesome video, thank you so so much!

Beautiful example.

Great analogy!

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?

Hi bro that was a great video. Would you mind sharing where I can find the guide document used in this video?

@DesignPilot

Жыл бұрын

You can check the pinned comment

Hey Chetan! Great video for beginners, Could you explain on how design tokens work in case of buttons/ surfaces/ outline with gradients?

@DesignPilot

5 ай бұрын

Just use color styles for that. And make sure the colors you’re using in the gradient exist in the designs system

Thanks, It's an amazing tutorial :). Can you please make a tutorial on the right approach to designing a website/ mobile app?

@DesignPilot

2 жыл бұрын

Yes. That is coming next week.

@DesignPilot

2 жыл бұрын

Checkout OnePageLove, Awwwards and LandBook

@zainulabideen9158

2 жыл бұрын

@@DesignPilot Thanks bro

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?

@DesignPilot

Жыл бұрын

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.

@clearlyvips

Жыл бұрын

@@DesignPilot ohh yesss got it, thanks a lot!

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

Жыл бұрын

There must be a link in the description

@samkapoor5529

Жыл бұрын

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

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?

@DesignPilot

2 ай бұрын

Because they are of different modes. That's the whole point of a token. It can have 2 different colors for 2 different modes.

🔥🔥

Do we have design token for typography also?

@DesignPilot

2 жыл бұрын

Absolutely. But it’s not really needed for text, since they are not as complicated as colors.

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?

@DesignPilot

Жыл бұрын

What do you mean Multi brand?

@j.k24

Жыл бұрын

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

@DesignPilot

Жыл бұрын

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

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

9 ай бұрын

Good observation. Those rules you mentioned apply only to a single theme. Think of the dark mode as a Doppelgänger in another multiverse.

@sachinnegi2924

9 ай бұрын

@@DesignPilot Got it thanks ❤️🙏

I think this video should be updated after the design variance feature from Figma

@DesignPilot

11 ай бұрын

It’s coming soon on KZread. You can already find it my Design Systems Course

@DesignPilot

11 ай бұрын

Actually I updated the description.

Brother This is important to learn as a beginner ( intern ) because its confusing

@DesignPilot

Жыл бұрын

Yes

I am unable to access the link to the image with design tokens

@DesignPilot

Жыл бұрын

Which link?

@samkapoor5529

Жыл бұрын

@@DesignPilot which you took as a reference to explain raw variables, base token, semantic token, component token, output properties.

Figma introduced variables

@DesignPilot

4 ай бұрын

Yes, I have an updated video about it on my channel

⏳

little confusion

Also too small to know the difference between 'too' and 'to'

@DesignPilot

2 жыл бұрын

Must have been a typo buddy

The green is not accessible. 😂

@DesignPilot

Жыл бұрын

Hahaha. I know 😅

@daviddutschke1

Жыл бұрын

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