Master Design Tokens - From Basics to Advanced

[@abulut]

These videos are rare and designers who pay attention to master this are a LOT more valuable in big organisations. Crazy that we can watch these videos for free. I've learned a lot from you

[@UICollectiveDesign]

Thanks for the feedback! Trying to help out as many designers as I can. Please share our channel on your social media if you can :)

[@jonfreeze]

Hands down the most absolute best video visually describing tokens. Thank you! I’ll be using these techniques to speed up my DS development!

[@UICollectiveDesign]

Thank you!! Please subscribe and share this video where you can :)

[@islamyuldashev6946]

Most simple and clear explained video, year ago searched this kind of video didnt find any

[@UICollectiveDesign]

Thank you! Please share this video on your LinkedIn or socials where you can :) Support goes a long way

[@masietsheole]

So far, the most straight forward and simplest introduction tutorial about Figma Tokens and Variables. Great job👏

[@UICollectiveDesign]

Thank you! Please share this video on your socials where you can. Support goes a long way!

[@KulwantSingh-ic8uz]

Thanks for creating such an in-depth video on variables and design tokens, thanks Indeed!

[@UICollectiveDesign]

Glad you liked it! Please share this video where you can!

[@yaragengo824]

thank you soooo much for your content!! I've been learning a lot 💕

[@UICollectiveDesign]

Glad you're finding it helpful! Please share this video and our channel were you can!

[@sravannraj]

I was looking for a solution for tokenizing the colors & typography and found your video. This really helps. Thanks Kirk!!

[@UICollectiveDesign]

Happy to help! Please subscribe and share this vid where you can :)

[@sravannraj]

@@UICollectiveDesign I 've subscribed when I watch this video!

[@LeninLive]

It almost seems like no one in the design world is bothered with the code integration/handoff, just look at the views numbers under the videos. Number one criteria is the adoption. I've seen so many design systems that suck when it comes to the handoff. Thank you for the video!

[@UICollectiveDesign]

Agreed. Designers are worried about designs and not dev handoff. Maybe this will change in the future!

[@iamavro]

This is what I have been looking for. Thank you so much. Love from India. 🇮🇳

[@UICollectiveDesign]

Thank you!! Please subscribe and share this vid where you can :)

[@euginrobinson]

We usually end up paying hefty fees in order to acquire in-depth knowledge about design systems and practical know-how to build them. But here we have just that..... completely free of cost if one has the patience and curiosity to learn.

[@UICollectiveDesign]

Doing it for the community!

[@SaraHernandez-w9t]

Amazing tutorial - super informative and clearly explained!

[@UICollectiveDesign]

Thanks!! Please share this on social media where you can :)

[@ofibao8212]

Extremely valuable content! Thanks mate

[@UICollectiveDesign]

Glad to help! Please share this video where you can :)

[@albertzimteaaa]

Thank you so much for the in-depth lesson about tokens, I really need this

[@UICollectiveDesign]

Glad this helped! Please subscribe and share this vid and our channel where you can :) Support goes a long way!

[@TiagoPietroPesce]

42:26 it is possible to set a variable for re-grouping others, but idk when you would like to do that, other for a quick "line-height" for most case scenery: line-height/xs-12 line-height/sm-20 line-height/md-28 line-height/lg-32 header: "line-height/lg-32" body:"line-height/sm-20" caption: "line-height/xs-12" button: "line-height/sm-20" thats allows you keep a regular line-height-padding base 4 while keep consistent size and you can have font messing around with weird sizes like 15,5px but in case of colors maybe there some use for grouping then "calling" the group as a "variation" theme like: 2 diferent hovering colors based on what interaction do expect (click/drag-n-drop for example)

[@cristinacasanas8247]

This video is fantastic! Thank you so much :)

[@UICollectiveDesign]

Happy to help! Please subscribe and share this channel where you can!

[@atharnadeem6947]

Thank you so much for this video. Learned a lot from your channel.

[@UICollectiveDesign]

Glad it helped! Please subscribe and share our channel where you can :)

[@atharnadeem6947]

@@UICollectiveDesign always.

[@UICollectiveDesign]

@@atharnadeem6947 Thank you!!

[@bishoyadel1789]

Amazing video teach me a lot of things, thank you ❤

[@UICollectiveDesign]

Thanks!! Please subscribe and share our channel where you can :)

[@SketchbookStudioo]

Solid Explaination! I would really love some help on mapping text specific tokens and how to organize them. Line-height, font-weight, font size, font-style

[@UICollectiveDesign]

Check out our build a design system series episode 1

[@andydasi]

This is just what I needed, thanks a lot!

[@UICollectiveDesign]

Glad it helped! Please subscribe and share this video where you can :)

[@tobiasz6090]

good job, thanks for sharing!

[@UICollectiveDesign]

Glad you like it! Please share this video where you can!

[@crypso1526]

This is an amazing video, I learned so much! I have to 2 main questions: 1. How to generate this shades correctly for both semantic colors and brand colors? 2. So purple-100 can be 10% of base OR does it have to be proper color of diff shade with 100% opacity?

[@UICollectiveDesign]

This is a great question and one I get often. If you're able to ask on our forum so I can answer and share the link directly in the future, it will help other designers :)

[@djashawe88923]

Hi, Thanks for the great content. I have a question. Figma demos and tutorials usually follow a two-step process: Primitives and Tokens. The variables are then assigned from Tokens which reference Primitives. I couldn't wrap my head around why you have a three-step process (Brand -> Alias -> Mapped) instead of Primitives -> Tokens. Is there any reason or advantage in doing so? Is it because the naming conventions can get too long? For example, Primitives/color/brand/#FB9FE6 becomes Tokens/surface/button/primary/default/"button-primary-background-default" and Tokens/surface/button/primary/hover/"button-primary-background-hover"? I'm still new, so I'm confused. 🥲

[@UICollectiveDesign]

Take a look at our token/variable setup guide from November. This will really answer your question!

[@UICollectiveDesign]

kzbin.info/www/bejne/jXK3q3yBZaacbqs

[@ranaabdulwaheed1482]

really awesome and informative

[@UICollectiveDesign]

Thanks!! Please share this video where you can!

[@jinn7821]

great content! as always!... Thanks

[@UICollectiveDesign]

Thanks!! Be sure to subscribe and share this channel or video where you can!

[@LV-ei1ce]

Hey can you explain further abiout Global vs Alias vs Mapped. For example, is the intention that the global brand has the color scheme of purple/red/green and the Alias.. eg: Error etc can use 'red' from global. And mapped refers to the actual functional components in the UI layer such Popup that can point to 'Error' for color code ? I am not able to precisely understand how 'alias' is used in the big picture, it feels redundant

[@UICollectiveDesign]

Can you ask on our forum? Would love for this question to be public

[@LV-ei1ce]

@@UICollectiveDesign Done. Please take a look

[@RuggeroCarrara]

First of all, thank you so much for this amazing guide! I just discovered your community, and I’m already eager to be a part of it-currently waiting for approval 😅 After watching your tutorial, which was super clear and well-structured, I have a few questions. If you have some time to reply, I’d greatly appreciate it. Regarding Collections, I’ve typically divided them by Brand Colors (Primary, Natural (100, 200, etc.), Error, Warning, Success, White, Black), Color Tokens (Surface, Text, Icon, Button, Border), and Number Tokens (Spacing, Radius, etc.). Is this approach correct, or could it lead to issues in the long term? Would it be better to use your organization method with Alias and Mapped Tokens instead? Do you have a Design System with all those settings that I could download and study?

[@UICollectiveDesign]

Hey man! Sorry just seeing this now... yes definitely better to use the brand, alias, and mapped collection strategy, and our free downloads (Design System and Variable Starter Kit believe) carry these.

[@robin_designs]

Is there a specific reason why you named the different levels of tokens "Brand, Alias, Mapped"? I believe the naming that the figma team used is "Primitives, Semantics, Components". You are referring to the same right?

[@UICollectiveDesign]

Yeah the same! There's so much confusion around the terms semantics, primitives, etc. They're used in a lot of places, and tend to have a lot of different meanings based on people I've talked to. So this is just the approach I prefer.

[@Underhills]

Great stuff! Thanks for sharing. For the purple and red shades I think you meant to assign the topmost shade to Primary Darkest and not Darker - right? Cause it's the darkest.

[@UICollectiveDesign]

In this example, I only had 5 shades in my color scale. So logically following the scale, I selected darker. Darkest would be reserved if I had a third dark color

[@niel5922]

as always, great content!

[@UICollectiveDesign]

Thank you! Please subscribe and share the video where you can :)

[@toninohola]

Your voice sounds like Bob from Bob’s Burgers! Thanks for the awesome video, by the way.

[@UICollectiveDesign]

Hahaha thanks!! Will have to search up what that sounds like hahaa. Please subscribe and share this vid where you can :)

[@ytRap007]

i really need this thanks so much

[@UICollectiveDesign]

Glad this helped! Please subscribe and share our channel where you can :)

[@deliciouspizza4405]

Awesome! Thank you so much

[@UICollectiveDesign]

Glad it helped. Please subscribe and share where you can :)

[@mona.abdelmeged]

Thank you so much

[@UICollectiveDesign]

You're welcome! Be sure to share your channel where you can :)

[@Underhills]

You used your picker to lift colors from a shade series that are made with alpha values, but the colors applied in the mapped variables are opaque hex codes. Why is that? Some systems also base their background colors on alpha levels and I find that difficult to implement cause you don't get a consistence color as it picks up whatever background it sits on. So if a CTA button has an alpha transparency level on the background color that button looks different throughout the UI, it could be sitting on a gray background, a white background etc. That in turn makes it impossible to operate with a strict semantic concept like primary, secondary etc as the button look varies. These items should always look the same in my mind, so they should be opaque.

[@UICollectiveDesign]

Using the color picker was just for ease of the exercise. I never recommend using opacity for colors :) Great call out though !! :)

[@Lichtsucher]

immeasurable merit !

[@UICollectiveDesign]

Thank you! Please subscribe and share the video where you can :)