Hey everyone. Uh, in this video we are going  to actually make some design tokens. We, okay? We are going to start with a kind  of a first level design token. Nice and simple. We've done it already  and then we'll add a bit more complexity to it  and show you the valuable ness of that complexity.

We'll look at kind of like some root design tokens  and we'll alias to those design tokens. Don't run away. If it all sounds too hard, it's not. We'll work through it step by step. Let's get into making some design tokens. Let's do it.

Okay, so the first level, let's have nothing selected. Local variables. We've done this before. We are going to say let's create a variable. Let's call it a color. Let's give it a better color name.

Okay, I'm gonna call mine color primary. Now you don't have to call it color primary. It'll depend on, you know, what you've worked out  with the developer and what you're calling things. Sometimes they won't use hyphens  and they'll use something like this called Camel Case  where it's a lowercase to start with  and then uppercase  for all the kind of different word changes. Some people will use underscores, okay,  but never any, just full on spaces,  coding language do not like spaces. So there'll be something in here.

We'll go with color hyphen primary. Okay, we'll give it the number that a color  that I want, which is my green. Great. A kind of first level, really simple design token. It's gonna apply it. You gonna have this selected.

Actually what we can do is select everything here in my  little auto layout and say  in this selection, there's this color. It's been used twice, both in this top  box and the line down the bottom. So I'm gonna say I'm gonna switch everything  that uses this color in my selection  for not the circles, which are styles. Mine's still jumping around for no good reason. Back to the top. Oh man.

Okay. And I'm gonna go to the one that is a square, okay? That is using a variable, AKA design token. Great. I'm gonna use that on my button as well. Okay?

This button here is going to be using that style, okay? And that is great until you decide  that actually this button needs  to be a darker or lighter color. Okay? You wanna change it. So we are stuck now with a very limited option, okay? We can go through and change the primary color  and we can say, actually I want it to be darker,  but I don't want this top and bottom, just the button.

I need a really specific thing changed. So what I'm gonna do is I'm gonna delete this one just  to clear things up and I'm gonna name my collection. I'm gonna rename this one. Uh,  this is gonna be called my Root Colors, okay? So I'm not actually gonna use my root colors. Why do we create them?

It's so  that I can create another collection called um,  alias colors that are gonna reference those  and we'll see why in a second. So we'll go to alias colors. We're gonna say  create a color variable. And this one is going to be button primary. Okay? We could color it here,  but actually it is way better to go actually right click.

I'm gonna set this CREs  and I'm gonna go to my libraries, okay? And I'm gonna look for my root colors. I'm gonna say that's connected to there. Okay? So button refers to this one. This one refers to that hexa decimal number.

We're at the second level now. Now the reason this is handy is  'cause that's more specific, okay? This is what they call semantic, okay? When they're writing it where you are describing  what the button does, not what the button looks like, okay? You don't want to call this one button green,  it's our button primary and it's referencing this color. And why is this useful?

It's so that you can have some root colors, okay? That we've got color primary,  let me add a few in here, I'll speed this up. So  I've got these root colors  that are potentially gonna be used all over the site  and we've worked out, we don't wanna apply them  to every one thing because what happens when we need  to change them, what we can do is have this alias option  and we can go crazy with this alias. We can have as many different use cases, kind  of semantic versions of this. We could say button primary. There's a button secondary  that gets used on only the checkout,  only if there's an error, you can get quite specific, okay?

But it can reference this color that can be easily updated  and kind of spill through the website. So let's create one that's really specific. So this one's going to be okay, you wouldn't name them  that long, but you can be quite specific. Okay? And I can say I wanna set this alias to, I want  to use my libraries, I want to use the square ones  and I'm gonna be using my different weights. Okay?

So I've only got a few root colors,  but I can have as many of these aliases as that I need  for a really complex site. So I'm gonna say I need this, okay? And I'm gonna say, you my friend are using  that, not the root colors. Don't wanna use that. I wanna use my aliases. So I can say button on card for microsite.

It's very specific,  it's really easy to know what to do with it. And later on, if I go back to this huge sprawling website,  okay, that is used a bunch of different aliases  and I say, guys, we are just gonna  update that secondary color. They can go to the root colors  and say, actually that is easily changeable. Okay? They can go through and change this  and they've only had to update this one little place,  but for all the aliases  that reference it, they'll update as well. Likewise, if I undo all of that, if um, they come back  and say, actually we wanna update just this button here.

I don't have to go and update the root color, okay? Because all I need to do is find the alias that controls it,  which is written, okay? I can see in here both in my design, okay, in Figma,  that button on card for microsite, okay? I can go and find that if I'm a developer, okay? Either iOS, Android, web, um, depending on  where it's getting implemented  or maybe it's getting implemented across them or they can go  and find just this button, find out where it is, okay? In their library, okay?

They'll be storing their variables somewhere you are storing  yours and there's local variables option in Figma. And you can go find that  alias 'cause you know the name of it. You can find it and actually say,  Okay, I wanna change this to edit the variable. I want it to go to where, uh, let's go  to this lighter version  or the darker version gives me kind  of small control over what we're doing here  for these little instance use cases. But there's a nice big overview of the root colors so  that if the brand changes, maybe it's a usability test  and you find that this orange is a primary color,  just is too light  and you've done some testing in your contrast ratio. If you just lower it a little bit, you get into the aas  and you're like, cool, and everything spills throughout the  site that's referenced this  or alias it, they call this term mapping, okay?

Where you've got one group  of variables mapped to another group. You could have then have a third one that is mapped  to the alias that is mapped to another route. Okay? I've never built anything that complex,  but there'll be people that have and do all the time. Now, other things you can do here in Figma to kind  of make things a little easier  and you'll see other people doing it is first of all,  naming, we've called ours color primary, right? Remember we've got Camel case, okay?

We are lowercase, upper, upper no spaces. So that's a way of defining it. Another one is, we've used 500  for the kind of primary color. Okay? You can call it color primary. This one here, color, primary light, okay, this one here,  color, primary, darker.

It doesn't matter as long as it's consistent,  like depending on what the developers like used  to coding things, the framework that they're using, okay,  will have kind of like, so, uh, norms that they normally use  for naming things. Figure out what those are  and adapt those for your designs or vice versa. Get them to use what you like to use in terms of coloring. I find it's easier just  to pick whatever the developer's using. The other thing you can do is I'm gonna undo that,  is you can actually group things in here in Figma. So instead of using all these hyphens, you can say, you,  you, you, I'm holding shift.

I'm trying to hold shift, um, to select all these. I can right click them. It's going, doing some weird stuff. So group with selection, I can't really tell what it is. Hopefully right click's working better for you. Yep.

Group new selection. Great. So in this root variables collection, I can create a group  and this is going to be called Color Primary. Okay? And in here, all I really need is 300. Tab, tab, tab, tab, tab, tab, tab doesn't work.

I'm a taver, it's not working at the moment. Okay? And you in 700, this might be just a ti way  and I'll show you  because you'll see it when other people are either doing  tutorials or you're working with other people's work  that collection, inside of that collection,  you can have a group and it just kind of helps  tidy up sometimes some really big kind of root colors,  especially when you get into the aliases  where there's like a bazillion different things going  on, okay? You group them into borders, into buttons,  into cards, okay? It's a way of kind of collecting them all together. And last thing and why it gets more  and more powerful, we talked about it in the last video, is  that root colors can have two modes.

So I can have need more variables. Oh, I'm not in the right team. We've done color modes before, right? We can have a light and a dark color mode. They're both referencing secondary color, okay? But we can have a light and a dark mode.

I need to move mine into a paid plan. But you get the idea, you can build these like we've only  just got started and we've got a reasonably complex  design tokens going. How do you feel? Let's not go  too much further in this video. Let's be happy. Oh, it's done and kind of got an idea.

And let's do another example. In the next video, you get a cup of tea, relax,  take a break and I'll see you in the next video. Finding it a little bit hard, it is kind of hard  and it's hard to explain. Hoping I'm doing a good job. Anyway, let's go into the next video and do more. Another example, help deep breathing go.