Hey everyone. Hey. Uh, in the next section, okay,  or the next two sections, we are going to look at variables  and I wanted a quick overview video so you can kind  of see further along what we're gonna be doing  to hopefully give you a better understanding now, early on,  what variables are capable of. So there are three main food groups for variables. Okay? There is the first one, okay?

Where this prototype, here, watch this. When I hit the button, look at that. The number goes up. Oh, if I go back one, okay, it goes back to zero  and you see the cart when I go up one it goes up as well. And this appeared, it's all very cool  and no, it is not a spaghetti of a bunch  of different frames. Okay?

It's just one frame with some local variables  that we assign and then we t these buttons  to adjust these variables. Okay? It looks kind of confusing, don't worry,  we'll go through it step by step. But there are variables that we can do  to control our prototypes  and make them what they call it,  advanced prototypes, using variables. Very cool and gets away from the uh,  noodles going everywhere, trying to connect all frames up. Very cool.

Now the second food group, okay,  I'm calling them food groups for really use cases. This is a logical, okay, logic based, uh,  use case for variables. Click the button that goes up one  and changes that little icon from  this component variant from empty to full. Okay? Some logic going on using variables. Okay?

The other use case  for variables is using modes in variables. So I can say this card here, okay? Down here on my layers panel I can say you are  the color of light mode. Nope. You can be dark mode, look at at changed background,  color, font, colors, all updated. You can go even further.

You can also say,  actually I want the spacing  to be not compact, but comfortable. Let's stretch it out a little bit. Ah, look how comfy it is. So this is variable modes. And the last one we'll look at is design tokens, okay? Where we can define a lot of things in kind  of reference them to each other  to make things like design systems a lot easier  to implement both for us in a large design in Figma  and probably more importantly, connected  to the development side of building a app or a website.

So you and the developer are using design tokens  to work together  to make sure things are updated correctly and are scalable. So that's design tokens. We'll cover all of these individually as we go through. But I wanted to scope out where we are going for this next,  uh, two sections here in an overview video. The other thing is that you've known throughout the course,  uh, I've mentioned it before, that I say variant  and variable. I get that language mixed up.

This is a variant, okay? It's a component. There's two variants. There's the empty and the full. A variable is basically to do  with this local variables, okay? And there's a lot to go into variables, okay?

We're gonna cover lots of different ways of using it,  spacing, general colors, okay? All sorts of cool variables,  but variants are just these different  options inside of a component. There you go. Ooh, the other thing  before we get started as well is that there is a point  where you need the pro paid  Version of, um, Figma to use all of the variables. There's some parts you can do without it. Some parts you can't.

And if you have noticed up here,  these little, uh, hexagons, gans, whatever they are, icons,  appearing amongst everything now, okay? They are variables. It's kind of a newest upgrade  and that's what they represent. Those little shapes, there are variables. Would you just go and make something Dan? Sure, we can do that.

Let's go into the next video and make our first variable.