Miggi: Hi friends, Miggi from Figma here with another study hall. Today we're gonna be talking about working with variables in your Figma prototypes. Working with variables in your prototypes is gonna give you the ability to reduce a lot of complexity in your prototypes. You can work with fewer frames and create much more dynamic interactions. So let's go. The first thing that we're gonna do here is we're gonna work with a type of variable known as a Boolean variable. A Boolean variable is either true or false. On or off. So let's show you how to create a Boolean variable and then associate it on the canvas and interact with it in a prototype. We're gonna look right here at this frame. You'll see that I have these three images and I have these three buttons. We're gonna wire up those buttons so they show and hide each of those images. Let's begin by clicking on the canvas. I'm gonna come over here to the right. We wanna make sure we're in the design panel. I'm gonna click on that local variables option right there. This is gonna bring up my variables panel. You'll notice that I have no variables here to start. So what we're gonna do is we're gonna create a variable for each one of those layers to be turned on and off. I'm gonna click Create Variable. We're gonna create that Boolean and we're gonna say, "showLayer1", and we're gonna set that value to be true. And let's create two more. So let's create another Boolean. Let's create another Boolean. This one's gonna be called "showLayer2", and this one's gonna be called "showLayer3". And once again, I'm gonna set all of these values to true. And what that's gonna do is set the visibility for each one of those layers. Next to get this going, we're gonna select that first layer. We're gonna come over here to the layer panel. And you'll see this little I and that I shows a hide that layer. We're gonna right click on that and that's gonna give us the ability to associate the visibility of that layer with one of the variables that we created. You're gonna see "showLayer1", "showLayer2", and "showLayer3" here. So for this first layer, we're gonna associate show layer one, and you'll see the variable has been assigned. Let's click this next layer. We're gonna do the same thing, right click. Show layer two. This last one, we're gonna select it. Come over here to that layer panel once again, right click and show layer three. Now these have all been associated and we want to see that they're working. So I'm gonna zoom out just a little bit. I'm gonna click once again. On the canvas, we're gonna go to our local variables. I'm gonna open the variables and I'm gonna hold this side by side. And you're gonna see that we have our three variables. They've been associated with those layers. We can now turn them on and off by setting them to true and false. So here we go. True and false. True and false. And you'll see that that is now explicitly tied to its visibility for each of those layers. So what we're gonna do, I'm gonna select all three of those and I'm gonna group those selection and I'm gonna make them the Boolean example group. So here we go. These three variables are now part of this group. Isn't that great? Now let's begin to use in interactions with these variables, I'm gonna go to the prototype pane to easily swap between design mode and prototype mode. You can press the shortcut key "Shift + E". So press "Shift + E" will toggle between design mode and prototype mode. So right now I'm in prototype mode. Prototype mode's gonna behave just a little bit differently. I'm gonna select this first button right here. We want to create an interaction. On this button that is gonna set that first variable to true or false. So we're gonna come over here, we're gonna create an interaction. I'm gonna bring that over. Let's do that one more time. Let's create this interaction. And the first thing I want to do is to check what is known as a condition. I wanna see if the current layer is visible. I'm gonna make it invisible, and if it's invisible, then I'm gonna make it visible. So let's go ahead and create a conditional. So if, and you'll see that when I clicked on that our values are gonna show up. So, If show layer one right is equal to, I'm gonna click right here. So if show layer one is equal to, and I can say true or false. If it's currently set to true, I can now add an action. And that action is, I'm gonna set that variable show layer one, and I'm gonna set it two. False. So now you can see if show layer one is true, then we're gonna set show layer one to false. Otherwise, let's set that variable of show layer one to be true. And once I click out, so show layer one. If it's true, we set it to false, otherwise we're gonna set it to true. Let's see if this conditional works so I can select that frame. And I'm gonna press shift space bar. What that's gonna do is pull up the inline preview. So here we go. Here's our button, and we can see that that now works. So that's pretty great. What we can do next is write that same conditional. For those remaining images that we have, I'm gonna click the button, let's create a new interaction, and once again, on click. I'm gonna write a conditional, and I'm gonna say is show layer two. If show layer two is equal to true, then what we're gonna do is we're gonna set it to false. So we're gonna set that variable show layer two, and we're gonna set it to false. So otherwise we're gonna set the variable show layer two to be true. And now we have our conditional logic. So if show layer two is true, we're gonna set it to false, otherwise we're gonna set it back to true. And once again, shift space bar, we can test that out and we can see that it works and both of them are working. What I can also do here is, let's do this third one really quick. Let's create that little bit of repetition here. Let's create on click. We're gonna write our conditional, we're gonna check show layer three. Is it equal to true? And if it's not equal to true, then we're gonna set it, we're gonna set that value, to false, and then otherwise we're gonna set that value to, true. Right? Once again, so is it true we're gonna set it to false. If otherwise, we're gonna set it back to true now. Let's just check to see if this is working. Shift space bar 1, 2, 3, and I can click and it's going to set the state, so we're have that same button, performing that on off operation there. Now what we could do is with this show all button, we can set all of the values to be true. So let's go to our interactions in the design panel. And here on click we're gonna set that first variable of show layer. We're gonna set it to true, right? And then we're gonna add in another interaction. So we're gonna add that action. So we're gonna say add action. Set variable show layer two. We're gonna set that to True and then we're gonna set one more action. So set variable, we have show layer three and we're gonna set that to true. And here we go. So on click, we're gonna do a chain reaction of events. We're gonna set each one of those variables and set them to true, because that's what the show all button's gonna do. I'm gonna select that frame, shift space bar. Hide it, hide it, hide it. Show. All right, hide one, hide two, show all. So. That's gonna give you that ability to manage those. So once again, the Boolean value is gonna be on off, true or false, and it can be easily associated with the layers panel over here by right clicking on that eyeball. First example done. Next, let's take a look at another type of variable. This one you might be familiar with. This is a number, and what we're gonna do is. We're gonna create this number value, and we're gonna associate it with a number of different things. Let's begin by clicking on the canvas. I'm gonna come over here to local variables. I'm gonna create a new variable, and this is gonna be a number, and I'm gonna name this very uncreatively. "Num". So this is gonna be our value. Let's give it a starting value of two. Why? Just because I want you to see when I create that two there, how it's gonna map to some of the objects that we have within our frame. Here is that example two Now. I'm gonna click first on this text field. You can see that we have a text field here. When I select it, I come over here to the right, it's set to inter bold, 24. Oh, what is this over here? That's a apply variable. What I can do is I can have the variable that we created, it's value. Can be represented into this text field. So here we go. I click all libraries. It's looking for a variable that it can show, and this is a local variable that we have here. I'm gonna click "Num" and you'll see it shows up as two. Once again, if I click on my canvas, I come over here to local variables. If I change this value, if I'm going up and down holding down the shift key, you can see it's adding and subtracting 10. So if I go value of 10, it shows 10 right there. So I'm gonna leave it at 10 for now. Now what I'm gonna do is I'm gonna apply that number value to a few other things. Because we're designers and we're working with elements on the canvas, we can change those properties to be in line with that number value. So the first thing I have here, I'm gonna command + click onto this yellow rectangle. I have it inside of a auto layout object. And just so you know, this auto layout object, I have it. centered out. So it's aligned to the center and its constraints are set to center. center. basically I have it that way so when I change the contents inside, when I change that width inside, it's gonna expand out in either direction. I just did that more for style points. You'll see here I have this rectangle selected. The rectangle's right here, it's inside of that auto layout frame that's just allowing it to be centered into the frame. But that yellow rectangle you'll see here, here is the width value. Right, and with this width value, I can click right here and we can apply a variable. So I click right here and I can apply a variable. And the variable that I'm gonna apply is that value of "Num". So you can see that it's width. Is now associated with that value of 10. And likewise, up here I have this little arrow. It's inside of an auto layout object. And what I'm gonna do is I wanna move that arrow from the left and I can associate the position of that arrow with its left padding of the auto layout object. So I have an auto layout frame and it's left padding. I'm gonna set to "num" and you can see that we have a little bit of padding. There. So I've assigned that variable "Num" to this text field, to this rectangle and to the left padding of this auto layout frame. So it's going to update the number, it's going to update that width, and it's going to expand that left padding on that object. So when I click on my canvas, And I go to the local variables panel. You can go here and, and I can update this number, right? So I can go here and this variable value, when I increase it, you can see how that works. So it's increasing the value. Now if I go into negative values, you'll notice that it will no longer impact the width, but it will continue to have a negative value on the padding as well as showing a negative value here in this text field. I'm gonna reset that back to 10, and now we're gonna make an interaction with this. So I have a plus and minus button here. I'm gonna click on that plus button. I'm gonna go to my prototype mode. You can also go there with shift E, and when I'm in prototype mode, I'm gonna click on interactions. So here we go. I have an OnClick interaction, and I'm going to set the variable. So I'm going to set the variable of "Num", and what I'm gonna do is I want to increment on "Num". So I wanna make "Num" get larger. So it's gonna start at 10, but then I want to add to 10. I'm gonna set the variable "Num". Two "Num" plus, and let's go in by values of 10, right? So what I'm doing is I'm adding 10 to 10. That makes 20. The "Num" now equals 20. Then I'm adding 10 to that 20, and that's gonna equal 30 and so forth. So this plus is gonna be incrementing by tens. Now what I can do is I can click on this button. I'm gonna come over here to my interactions. I'm gonna click to the left of that. I'm gonna copy it. I'm gonna select this button over here and we're gonna paste that interaction and you can see that I've just pasted the interaction. I'll show you that one more time. As long as the interaction resolves correctly. If there's no mistakes, it should copy and paste between button objects. So here, once again, I've selected this. I copied that. I select this button over here and I paste it, and you can see that this minus button now has a click interaction. I'm gonna go ahead, click there, and here instead of "Num" plus 10, we're gonna subtract 10. So I'm gonna delete that and I'm gonna type in subtract 10. When we preview this, Shift space bar. Here we go. Plus, plus, plus, plus plus, plus plus, right? It's adding to the left padding here, moving that little arrow over. Here it's updating that number value, and here it's updating the width. So when I, every time I click, it's adding by that increment or subtracting by that increment. How cool is that? So there's different operations that you can perform. You can perform addition, subtraction, multiplication, and division for now. Now let's take a look at their next variable type. This is gonna be text, otherwise known as strings. In this interaction, what we're gonna do is we're gonna create a text variable, a string variable. We're gonna assign it to this text field, and then what we're gonna do is we're gonna create these buttons here. To update that text variable. So we're gonna add these letters to that text field, and then we're gonna create a reset button that's gonna start it over from scratch. First thing we want to do is we want to create our variable. I'm gonna click on the canvas right here. I'm gonna go to my design panel. Let's go to our local variables. And here. What I'm gonna do is create another variable. We're gonna create a string variable. String. Variable is just plain text. I'm gonna call this variable message. There we go. We got message and we're just gonna call this, hello world, right? So we have this hello world. Text and it's going to the variable message. And just like before, we're gonna take this text field and what's unique about this text field is we have it centered horizontally. We have it centered to the center of the middle, and we have a a fixed height here. So this big text field, we're gonna be throwing our text inside of that. Here in the text panel, you'll notice the little apply variable icon. I'm gonna click it. I'm gonna go down to message, and the second that I do that, you'll notice that hello world. This message that we have in our variables pane is now populating this text field that looks pretty great. So what we're gonna do, just test that out. I'm gonna go to local variables. I'm gonna go here to Hello World, and I'm gonna say Hello worlds. I'm gonna put an exclamation point now. When I close that out, you'll see that it's already been updated here in our text field. That's pretty awesome. Let's create an interaction. What I'm gonna do next is create interactions on each one of these keys to update that field. Let's go to our prototype mode. Shift E also works. We're going to select that first button that we have here, that Q button, and I'm gonna create an interaction. So here on click. What we're gonna do is we're gonna set another variable, right? We're gonna set that variable and we're gonna set the variable message. So you can see it shows up and it populates right here. If I just type in mes, right, message gets surfaced right up to the top. Now here we're gonna write that expression, we're gonna set message to message because we wanna add to it. So we're gonna have Hello worlds, and then we're gonna add additional letters to this, and I'm gonna say plus, and in quotations, I'm gonna put in the letter. Q, right, because that's the Q key. So when I press Q, it's gonna add Q to this, right? So we're adding that to the string. So as opposed to adding a number, right, we're appending additional text to that field. So let's see if this works. I'm gonna select it, press shift space bar. And now when I press Q, you can see that Q is now updating that text field. Now what we can do is we can wire up our additional letters that we have here. I'm gonna click on that Q button. I'm gonna copy that Interaction command C. Now I'm gonna select the remaining buttons, right? I'm selecting all of them and I'm hitting command V. So it's created a click interaction for each one of those, and it's populated them, and all we need to do is just update the letter. Q W. Let's go to that E button, right? Fill that e button. We're gonna select that. We're gonna change that Q to E. We're gonna go over here to A, we're gonna change that Q right there to A. That's looking great. You can see that we're actually moving pretty fast here. I'm gonna change that Q to S and this D. We're gonna change that there, because once again, we pasted it to all of those buttons. So all of those buttons are saying Q. Now here with D, we can close that out. So let's test this out. Let's see how it's working. Let's hit, shift space bar, Q W E S D A, right? So now. It's populating our text field. Now, if we want to reset that text field, so that text field that we have, we want to reset it. Let's create one more interaction. We're gonna create an interaction. Here we're gonna set the variable of message and we're gonna set it to just a blank space, right? We don't even need to put a space there. We're gonna set it to two quotation marks, and basically what that means is it's an empty string, so there's nothing in there. We're gonna set variable message to basically nothing. Now I'm gonna click that frame, hit shift space bar. We're gonna give that preview and here we go. Now I click reset, cleared it out, and now I can type in these letters. So swatted, there we go. There's a word. And I can reset and I can say Q W E A S D, right? So what that's allowing us to do is up date that string and create much more of a dynamic text field there. I think that's pretty great. Now that we've covered Booleans numbers and strings, let's move on to colors. For this interaction, we're gonna create color variables, and we're gonna use these buttons to update that box with the colors that we have here. The first thing we're gonna do, once again, we're gonna click on our canvas. We're gonna go to the design panel. We're gonna open up local variables here in local variables. Let's create a new variable and we're gonna create a color variable. This color variable, we're just gonna call this "bgColor", and we're gonna give it an initial value of, let's just make it this, this green color. Actually we have, yeah, let's, let's make that green color right there. I'm gonna go ahead and, there we go. There's our "bgColor." Now, When I click on that panel, I can change this fill and I can go to my libraries and you'll see in their libraries it's a little bit different. And I can choose "bgColor" and it's that green. So now we can see that the fill is associated with that color variable. Next, we wanna create interactions on each of these to then set it with their color. So let's go to prototype. Let's create interactions and once again, let's create an Onclick. We're gonna use set variable here, and we're gonna set that "bgColor" and we're gonna use it to set it to other colors that we already have. So here we go. Here's our, our blue. Right. And now let's create another interaction. So this other interaction, on click, we're going to set variable. We're gonna set "bgColor", and it's gonna be that yellow that we have. There we go. We're gonna set that green to the yellow. And lastly, we have the blue here. Let's create interactions. I'm gonna go on click. Let's set that variable. We're gonna set "bgColor", and we're gonna set this one to that light blue that we have in our, in our document, right? Let's hit shift space bar. Let's see if it works. Now it's yellow, now it's blue. Now it's sky blue. I think that's pretty great. So you can dynamically set those values right there on the canvas. we've created the color variable, in the variables pane, and then we created interactions that allowed us to modify it live right there on the canvas. Okay. Here comes the main event folks. We are now gonna work with component sets, otherwise known as interactive components. We're gonna create a gallery and we're gonna create a variable to change between them. We're gonna use this thing known as, it's like a two-way binding, where we're gonna update the interactive component to basically change this here. I'm gonna take this frame that I have right here. This is gonna be our navigation. And I'm gonna drag this. I'm gonna have a copy of this. I'm gonna option drag this over here to the right. So we're gonna have, we're gonna call this item one, right? I'm gonna duplicate that. This is gonna be item two. I'm gonna duplicate that. This is gonna be item three. Now for item two, I want to remove that stroke. And I'm going to apply it here. We're gonna make it that blue and make that value of four. And same thing here. I'm gonna remove that stroke and we're gonna apply it here to this third item that we have. Let's make it that blue and apply stroke of four. We have item one, item two, item three. We're creating the selections. Next, we're gonna select all three of those and we're gonna create a component set. Right now, This component has three variants. The first item, the second item, and the third item, and they're named as such. So when I click on this component here, you can see we have item three, item two, item one. That naming is gonna be very important with our example here. So let's call this navigation. And I'm gonna copy this first one here. I'm gonna hit command C, or control C if you're on windows. And I'm going to paste to replace. So this has now been replaced. This is an instance of that first component there in that component set. Next, let's create the actual visual of the gallery. So here I'm gonna drag this. Let's, let's option drag it over here to the right. Option drag and option drag. And I'm gonna rename these, so I'm gonna select all three. I'm gonna hit Command R, control R if you're on Windows, and I'm gonna call this item space. And let's do numbers. Let's only do one number. So here, this is item one. This is item two. This is item three. Just like we had item one, item two, and item three. We want to make sure that we're gonna create that relationship between the two. I'm going to copy this fill. I'm gonna collect just to the left of that fill. I'm gonna paste it there and I'm gonna copy this, fill here and paste it there. So then this way we have our, our large versions of those images. They're, the thumbnails are gonna show the, the large versions. Now I'm gonna select all three and I'm gonna create them as a component set. And this one will be, you know, selected. Right. So once again, I'm gonna copy that first item and I'm going to paste to replace. So this is now no longer that image, but it's now the first instance of this component set. Right now we're looking pretty good. If I select this and I go to item one, item two. Item three, right? I'm changing that first property. And likewise here, when I select that component, I could change its variance to item two and item three. And what we're gonna do is use the variable to control both of them at the same time. Let's go. I'm gonna click on my canvas. I'm gonna come over here to my local variables panel and we're gonna create a new variable. And this is gonna be a string variable. So this string variable is gonna call, current item, and we're gonna change that string value. We're gonna change it to item space two. We're gonna start with the second item, just so you can see when we apply this, how this works. This string variable right here is gonna be bound to this property. You'll notice when I come over here and I select this interactive component, see it says item one. I can come over here, I can assign a variable, and I can assign that variable to current item. And you see it brings it to item two, so I can select this same thing over here. And I can, click over here, assign that variable. And this is now also current item. Likewise, let's say I want to to visualize and know if this is working or not. So I have this text field here and I'm gonna sign that text field also two current item, just so we can see how this is working. Let's now wire this up. Here with this prototype, I'm gonna have, let's say this one and, and this one we're going to navigate to that second interaction. Let me change my background. So this is a bit more obvious. I'm gonna select that middle item and this middle item. I'm gonna go to my prototype mode and I'm gonna drag, and you'll see that it's dragging from both of them, right? So both of them are going to that, that middle one, right? I can select both of these. I'm holding down the command key as I'm selecting them and holding down the shift key. And now I can. Select both of those. So both of those are gonna go there and command and shift key. And I'm gonna drag those there. So now we have these, these interactions where they're changing to, right? The different properties. So when I click, click, click, it's gonna go and change that state. Now what's really cool about this is that's all I had to do. So now when I click on that first one, it goes item one. When I click on the third one, it goes item three. When I click on the second one, it goes item two. What I'm doing, Is I'm changing that variable by updating the state of the interactive component. I'm using this as my navigation, and so I'm going between item one, item two and item three. And because that variable is also bound to this text field, and it's also bound to this interactive component, which has a matched naming structure, what's taking place? Is that I'm able to update it and it works. So likewise, if I want to create an interaction where, I drag in between these, so when I on click, it's gonna change that second item. And let's say I even want to have a dissolve animation. So I click, it's gonna go to that item two, and then here I click and it goes to item. Three. And then here, if I click, it goes back to item one and they all have little dissolve animations. Now when I preview that, it's gonna swap between all three, and that is also changing the variable. So it's also being reflected down here in the navigation. How cool is that? you know, There's, there's a lot that you can do with that, interactive component, variable binding. Hopefully you found this helpful. I know it's a lot of information. It's a lot to get started. I will be making this file available under Figma for EDU's Community Profile. Check in the comments for a link to that. And once again, let's take a look how all of these are working, the Boolean values. Are showing and hiding those layers, or we can show them all right the numbers. When I press shift space bar, we can increment up and we can increment back and we can associate those number properties with objects on the canvas, the string text here, right? We can basically update that text field and manipulate it in real time with a single frame, you know, so "WASDQ". And we can reset that. Now here, once again with the color, we can set color variables and associate them and live, update them with the set variable action. And here for the, kind of crowning glory, we can create these interactive components and we can associate their, their property state with a string value. And we can have that updated here to show how this works and how this is incrementing between them so we can use the naming of its current state to create this kind of like crosswired interaction. That's all for today. Hopefully you'll learned something. Once again, my name is Miggi. This is Figma for edu study hall. Feel free to ask me questions in the comments, and as always, happy designing.
