Hi everyone. In this video we are going to look at how to get a variable  to change, a variant in a component. See, this is our variant. Okay? We've got two variants. There's this empty cart and this full cut.

I want to be able to click a button,  use variables to go and change it. Watch. Ready? 3, 2, 1. Oh, very exciting. Okay, so we're gonna lend the bullion variable,  which is handy for doing things like this.

All right, let's dig in. Alright, to get started, draw some sort of icon button. Uh, we're gonna need two variants,  remember not variables, okay? Just two different versions of a component. So I'm gonna speed make this component with two variables. You know how to do that now.

Alright? So what we wanna do is put our components set Alf  on the way and our components page,  I'm just gonna put mine on the side there. I need an instance of it. So I'm gonna select this first one. Hold on my option on a Mac alt on the pc. Drag this out.

So this thing has two modes, right? It has uh, yeah, two different variants. So for a bullion operator, this is  what we are doing here on off true false  can only have two options. Okay, perfect for this and  what we wanna do is name them correctly. So the naming is super important here. So going back to my component set, let's open it up.

Let's call this one cart icon. Okay? And the two values need to be true or false. Okay? So I'm gonna put false as the first one  and true as the second one. Like, 'cause the logic I'm gonna use is,  is the cart full, true or false?

Okay, so the first one is false. It's not Phil, it's got nothing in it that makes sense. So make sure you use the words true and false. That's what makes that billion operator work. Okay? Now there are a few things to make this work.

Okay? So first of all, have nothing selected. Let's go to local variables and set one of these. Don't be tempted to hit the plus button, okay? Adds a different mode. It's not what we want.

I can't undo it. I'm gonna delete the mode I want, uh,  create a new variable. Okay? We're gonna be using this bull one, okay? The on off, true false. There we go.

Okay, let's give it a name. We should call it something like, um, cut  and okay to, well often times they'll use camel case. Okay? So there'll be a lowercase first. There'll be no spaces  and there'll be uh, upper cases  to denote the different parts. I am too much of a visual person and I do stuff like this.

Okay? That is a terrible way to name it. Probably question mark's gonna kill everything,  but it won't make a difference here in Figma. But if you're a developer, you are shaking your head can't  use spaces and you should use Camel  case the best of all the cases. Okay? And the default value's gonna  be false, which works for me.

You might have it true. It's up to you. So we've done that part, we need assign that to something. Okay? So we need to say you have been connected  to this one here and I'm gonna say the cart is full. Okay?

Just double check that that works  so I can deselected local variables. True false, true false. So that's working  Excellent. Now we need the  button to make it work. Okay? And we'll start with the plus button here.

Now how do I find all those variables for the prototyping? 'cause that's what we're doing, right? Advanced prototyping. How do I see it all? That's right. We need to be in prototype mode.

So shifty, okay? And I'm gonna do it over here  'cause I've already got a variable applied to it. Otherwise, start working up here. Okay, so over here I've already got it on tap. I've got this set variable for adding to the zeros already. I'm gonna add something new.

Okay? I'm gonna add a conditional. And this conditional is going  to say things like, what are we gonna say? We're gonna click in here. We're gonna say if the total is,  now there's a few ways you could do this, right? Like I'm gonna say is greater than zero, okay?

But you could say greater than or equal to one  or can't think of any other good ones. Not equal to zero. There's a few different ways of doing it. I'm gonna do greater than zero  and what I want to do, this thing's bound to change  'cause it's a little bit clunky if I'm honest. Um, do you hit enter or do you, what do you do now? Commit button.

Okay, I hit enter. That works. Okay, so, uh, the condition is, is looking  for if the total is greater than zero. What we want to do, we're gonna add an action  that says set our variable. What variable the uh, bullion one,  which is this add to cart. What I want to do to it, I wanna set it two.

If it's greater than zero, I wanna set it  to true it's full man. Now I've had enter it goes and add stuff. So it's a little bit weird. So true. I just click out. Okay, there we go.

And so if that is true, do that. Otherwise just do nothing. Excellent. So let's give it a test. Is it gonna work? Oh, seem too easy.

Shift space bar. Let's get a little preview going. Alright, jump cut. Somebody came to the door. Okay, I am back. Ready for action.

Alright,  we've got our preview going, watching there. 3, 2, 1. Hey, look at us. We did it. We're basically coders said no one. Um, but there we go.

Um, the only trouble is if you go down two  zero, it doesn't work. Okay? So what I'm gonna do is set as a challenge. It's not gonna be a full class project like in a video  for you guys to submit. It's more, i, I want you now, okay? Uh, to go through and add logic to this minus button  to turn it back, okay?

Basically have a look at what we did  for the adding to it, okay? And see if you can make it work in reverse over here. If it goes horribly wrong, it's okay. Variables are tricky. I'm gonna do it in the next video,  but definitely give it a try now. Get that one working.

Think of the minus a going  and let me know in the comments did you get it  going or did you need help? That's totally okay. Just interested to see like, uh, yeah,  good luck and if you get there, awesome. If you didn't, it's okay. We'll do it together in the next video. Alright my friend.

Uh, I'll see you in the next video  after you've had a practice.