Hey everyone, let's make some more design tokens. We are going to look at sizing  and border radius in this one. Basically the same as the last video,  but with a different example to help bed this in. We'll cover some more topics as well just to kind  of expand on what we know. But basically we're gonna create some root  sizings that has some values. We're gonna reference them in another collection.

Okay. Using aliases to make it easier to be really specific. Okay. Bought a radius for a card, uses the medium. Medium happens to be eight pixels. There's something kind of completely different.

This padding for this card here uses the same sizing,  kind of the base sizing values. Okay? Our root sizing of large, two different things  referencing the same root collection,  letting us be quite specific,  but also giving us great control when we can just update the  root collection to make big sweeping changes. Alright, enough talk, Dan,  you confused everyone just get started. Okay? Alright.

To do it, let's go have nothing selected. Local variables. Uh,  and we are going to create new collection. I'm gonna have a, a sizing root, okay? And I'm gonna create my first variable. This one's going to be a number, okay?

'cause we're gonna do extra small. It's gonna be two. Let's go another one and  we'll speed through the rest of them. Okay? So what we're gonna do is use T-shirt sizing. Okay?

For these values here, I'm using an eight point grid. Yours might be different. You might be using 10 12, okay? You can do your values as you like. Okay? And I could totally go through  and say, actually the spacing on this  side is not gonna be 16.

I'm gonna replace it with my variable. Okay? So I'm gonna go you and you are going  to be my, so what is it? 16. Okay. Which is my lodge.

Perfect. We'll do the same for the top as well. The problem with leaving it here  and not going to that next level with aliases is  that if I do the same thing for say, radius corners,  let's go to backspace, grab the whole auto layout  and I want to add rounded corners of large as well. The trouble with them all referencing just large, if I need  to change the size of large to be something else, okay,  but I don't want it to be the radiuses. You're like, oh, I can't change. 'cause if I change the radius from 16, okay, let's do it  to 30 for example.

I've also gone and changed the padding for that. So what we're gonna do is just keep this kind of like core  or root sizing. Okay? And then I'm gonna create another collection  that is my alias one. So alias sizing. Okay.

So I can say actually I've got  something that's a lot more specific. Okay? And this one is going to be okay,  this is gonna be border radius for my card. Okay? And I can say I don't wanna put in an actual value. I wanna create an alias that says actually for my border,  for my card specifically I'm gonna use L.

And for the like padding  or spacing for my card is going to be,  it could still be large. Okay? It can say you are large, let's go and apply it. So let's grab the border  Radius for this and say you  are no longer looking at large,  you're looking at this more specific alias  that says border radius for the card. And this padding down the bottom here left  and right is going to be you are padding for the card. Padding for the card.

Why is this more useful? Is that it's really easy for me as a designer to know  where the padding of the card is. Okay? Same with the developer  when they're coating out the site. But it also gives me control later on  to either do a big global update to say,  okay everyone we're moving from eight point grid. Let's go to my uh, sizing route.

And I'm gonna say everything now is going up to like 12. Now everything is gonna giving up a couple of points. Everything's going to be instead of 16, I don't know,  it's gonna be 20 now. Okay? And you'll notice that both the radius, let's go up  to 200 too much. Okay?

Both the padding  and the radius come along for the right. So I've got this kind of like good control over everything. But probably more importantly is I've got specific,  if somebody comes back and says, actually I need  to change the uh, radius,  you don't change large 'cause that's what it's referencing. You go to the alias for the sizings  and you say border radius is not gonna be large anymore. You say, ah, can it be  not large, but can it be, we'll just use medium  for the radius for the card. There we go.

We've made that change. We didn't have to go and create another variable that said,  um, I can't remember what medium is. Medium is eight points. Okay? You just got to switch them  around which one this aliases  referencing 'cause you're nice and control. What we're doing here as well is padding would be  its own group, okay?

And we create a group for all the padding  and create a group for border radius. You can end up having groups for everything. You can decide on splitting them up. We've got, uh, sizing, aliases and color aliases. Those are good to have separate. They can be smooshed together.

They just be a little bit tricky to work with, okay? But fonts, which you can't do quite now,  but I bet you'll be able to do in the next, uh,  soon update for it. Okay? You can do stroke thickness,  you can do, you can do lots. Any sort of design element here in variables. And because we are affecting the design,  we're calling them design tokens.

Now, design tokens I'm using in this kinda like simple  use case, okay? Design tokens, depending on where you are  and how big the company is and how invested they are. And like at a design system you might find  that design tokens also kind  of represent the why are we using it, you know,  the reasoning behind we're using this  particular style on a card. So there's more to design tokens than just  what the variable says. You know, padding card equals uh, large,  but it's the core part of it. Another thing I want to point out about design tokens is  that the naming conventions are super important.

Okay? So padding card makes sense. Large makes sense. And the reason we don't use actual numbers is  because the actual numbers, it'll depend  or change depending on the team you're working with. So I know, let's go to sizing root. Okay?

In Figma we use pixels,  Okay? But when you're a  developer,  let's say you're building a website,  you'll use something like this, you'll go one,  uh, what is it? Can't remember. rem, okay, one REM or maybe one eem. Okay? That will represent the same size.

16 pixels in Figma is one REM in web design,  it might be one DP in mobile design. So those different teams are gonna use different,  like the way that they describe the final  outcome is slightly different. But if you are using this as a consistent kind  of thing across all three teams,  or four, if you include yourself as the design team,  everyone knows what they're doing. Large equals their version of 16, okay? In their different development spaces. And if you say, Hey, I need large to be 16 pixels,  they can go through and pick their version of it.

You can get them mapped properly  to the different development teams, depending on  how hard core your design system is. But know that 16 pixels is not universal. It's universal in Figma. Okay? But the other development teams are gonna be using different  measurements to get to what you want large to be. That's why we use tokens.

Makes it easier. That's the same for colors. We use colors  as uh, where we're going. We're gonna use the a root colors, okay? We use hexa decimal numbers here in, uh, Figma mostly,  but you'll see that there's an RGBA version of it. And that is written differently in code when it's written in  CSS or SaaS or less, or iOS or Android.

But we can all say  that primary color 300 is this green color  and they can define it how they need  to in their different development spaces. Am I making this easier or harder? Hmm. Okay. That'll be it for this video. What we'll do is we'll do one more video, uh, after this.

Let's like when you should use them when you  shouldn't, who should be using them? Who shouldn't? Uh, let's do that now. See you in the next video.