Hi everyone. In this video we're gonna use the same thing we did in the  last video when we're using modes and collections,  but we're gonna do this one for spacing, okay? What we're gonna be able to do is over here is use not only  dark mode, light mode, which is cool,  but we can go to compact versus comfortable spacing  and can you see the space between everything changes? Okay? Very similar to what we just did with colors,  but we're gonna use number variables  and change the padding around the outside, right? Let's jump in and I'll show you how to do it.

That's too tight. I know it is. Okay to get started, we need our collections. They have nothing selected. Go to local variables. Let's create a new collection.

Let's call this one spacing, okay? And let's create a variable. We're gonna use a number variable  because we are trying to control numbers, not colors. We're trying to change like the space between things. Okay? And that's done in pixels, which is done in numbers.

So my first one is going to be my medium, okay? Often with spacing, it's done in these kind  of like more T-shirt sizes. So medium, small, extra small, extra large. Okay? You should go and create them all. I'm just gonna create the one I need right now.

I'm just gonna do medium. You can write out medium. That's okay too. The value for the size is going to be 16. Okay? And I'm gonna have two modes, okay?

It could be mobile mode, okay? The different spacing between mobile versus desktop, okay? You might decide that um, it's common to say something like  the compact layout, okay? Versus comfortable. That is a common enough way of spacing. So my compact one is gonna be, let's say 16.

And when it gets comfy, it gets kind  of spread out a bit and it's a bit bigger. So let's go and apply that. So let's say that we've got this already. It's an auto layout at the moment. It's just got random sizing for around the sides. Okay?

What I'm gonna do is instead of saying  that the spacing here is, where is it? 16. You see this little option appears here. I can see you are variable. Now I'm gonna attach you to medium. That's my medium.

spac. I did the wrong spacing. It's all right. I'm gonna do this one as well. Your medium. This space between stuff is set to 10 at the moment.

Okay? I'm gonna apply a variable and weird  with this one is these ones you can click on the  little uh icon. This one here, you need drop down. I'm do it. I'm okay with that. So let's apply the medium.

So paste that out. I've got another one in there. This one here needs to be hopefully,  'cause I like using this on page one. Hopefully we'll be able to apply variables there soon. At the moment you can't. And so you are going to add variable of medium.

SO'S gonna medium spacing everywhere. Now let's go and change it. Okay? Let's change it to, you could do it to the parent frame. Let's do it to the whole phone  and say actually, well it says remember layer,  we're gonna go light mode and dark mode. But look, there's also spacing.

Dark mode. Light mode, but spacing is in there, okay? It's defaulted to whatever the  first one was, which is compact. I'm gonna default, I'm gonna change  it and go to comfortable. Ready? 24 pixels everywhere.

It's ginormous go, huh? Okay, so it just means you can  Probably go for, I'd probably go mobile desktop,  then compact and comfortable. Um, depending on, yeah, your use case. But because there's a mode, you can start to see, look,  I'm on this parent frame here. I can go comfortable. I can switch this,  but I can say actually I want a compact  and I want to be light mode, which is not working.

Why is it not working? Ah, either I did this in front of you  or off camera, but this frame here, okay,  you know I said you can do any frame. Okay, the parent frame, we can do it to this specific one. I've gone and changed this  and it's overriding what this one's trying to do. So this auto layout here is set probably to dark mode. So it doesn't matter what I do to the parent,  so I'm gonna put it to auto so that it follows the parent.

So now I should be able to go light mode, dark mode  in comfortable sizing. Oh man, it's cool. Now the next thing is, is  that let's add another one of these. 'cause like why do we have more than one? Okay. Uh, it's just gives you some units of spacing.

'cause the moment we've got just medium,  let's add another color variable, sorry, number variable. And we're gonna have that small, okay? And this one here is gonna be like eight and 16. Okay? And we can use both of these in our design. We don't have to pick one or the other.

Okay? Can change the layer order by dragging it up. Okay? I dunno why small needs to be at the top. Okay? So what I'm gonna do is you can see  that spacing in here, it's too big.

Okay? So I'm gonna select this  and say you my friend are a different variable, okay? You are the small variable, which in case of us,  'cause we're in the uh, comfy version, it's set to 16. Same for this one here. I want you set to  the small version. Okay?

So in this design, now this outside is set to medium. This inside is set to small. You might have an extra small,  you probably will have an extra small, okay? Which might be four pixels  and you can just apply it where you need it. Okay? But you've got two options  or two modes so that later on when somebody goes  and changes it, they can go comfortable to compact.

Okay? So now that goes down to eight  and that goes down to 16 more appropriate. Cool, huh? Alright, that's it. I'll see you in the next video.