SET VARIABLE and CONDITIONAL in Figma: The SIMPLEST EXPLANATION Using an Example

in this video we're going to be taking a look at the latest figma prototyping features which are set variable and conditions we're going to be using a simple example with increasing and decreasing a number so let's Dive Right In and find out what's possible with these new prototyping features so here we have a frame with a number and then two buttons as you can see one is intended to increase the number the other one to decrease it we're going to be setting up using these new features an interaction where all within one single frame we're going to be increasing and decreasing this number they're going to be three relationships within this prototype that you can see outlined right here so the first relationship in the middle that's going to be a variable that will be linked to this number and will therefore any change we make to this variable is going to be updated in this text field and then we are going to be using the set variable prototyping feature to link this button with an action to increase this variable and on the other hand on the other side this button with the action of decreasing this variable right we're going to have these relationships and now let's start defining them so first of all we're going to be starting with the middle one the variable we're going to have to create a variable for this but I already created one in advance that I have in the test category called number and the value of this variable is 9 currently so if you need to create a new variable click this button and then you know create a number variable right so it's a number variable with the value of 9. the first step is going to be selecting this text object and then going to the text section on the right side and applying a variable I'm going to click this and then look for the test number variable right here it is I'm going to click it and as soon as I click it you can see that it's being updated because this relationship has just been created and if I now go two variables and change this variable to for example 11 this number is going to be changed as well because it's linked right and you can tell that it is linked by going again to this text section you can see that we have a variable specified right here with a broken chain link that we can icon with which we can detach this variable we can basically delete this relationship so I'm just going to remove these two because they are already finished or actually just this Arrow so that's done and then we're going to be setting variables the plus icon is going to be increasing this variable by one so let me go to prototype and add an interaction and this interaction is going to be on click right because it's going to be a normal button and now we need to specify the action the action is going to be set variable right so you can see that we have set variable and conditional these two new features from figma these are a newly launched prototyping features so when I now click on set variable I'm gonna be prompted to select which variable we want to affect and we want to affect the variable that's connected to this number to this text object and that's going to be test number right 11. so we are going to be changing the test number variable to itself plus one which means that we're going to be increasing it by one right so let me start writing down number we are setting the variable to the same variable plus we can type A Plus or click on the action that as you have just seen plus one enter right so we are going to be setting the variable test number one to itself plus one the names are different but it's the same variable right I'm not sure why that's the case but it simply is so that is now finished and we need to specify the second button right so we're going to do exactly the same thing however in the opposite direction so instead of plus we're going to have an minus I'm going to select this add an interaction on click set variable and then test number two test number plus 1 enter actually made a mistake that's going to be -1 a minus one so we're going to be setting a variable to itself minus one as opposed to this button where we are setting this to itself plus one so these relationships should now be defined let's go to the Prototype and see what we have I'm gonna have to reset the Prototype and if I click the button on the right I'm going to be increasing this number and then when I gonna click the one on the left I'm going to be decreasing this number okay so that's great that's how you use the set variable prototyping feature but what about conditions right we also get this conditional function how can we make this work for those of you who are familiar with coding you know what an if else condition is this follows a similar logic it is totally understandable for those of you who are not experienced with coding as well so don't worry but we're gonna have to think think about some kind of a condition that will be applied when when working with this so I have one in mind which could be that let's create a condition where if this number if the variable is bigger than 10 and you keep increasing the number you're going to be starting to increase it in increments of two instead of one okay so let's define that when I select this on click interaction you can see that we have this set variable I'm going to collapse this one and then I'm gonna add a conditional okay a conditional that is gonna verify if a certain condition is the case and then do something based if that's true or false okay here we are going to specify if something is true then do this otherwise do this so what do we know we know that when the variable is going to be bigger than 10 or equal to 10 we want to be increasing that to itself plus two so let's add a nested action first that's going to be set variable and this variable is again going to be test number two test number plus 2 right enter so if something is the case set the variable to itself plus two and this condition has to of course be so here we ask if something is the case if the variable is bigger than greater than or equal to right let's select this one to ten then do this right so we have a condition that asks if the number is bigger or equal to bigger than or equal to 10 then increase it by two after clicking right otherwise and now what's going to happen otherwise we know that we already defined this interaction where we increase it by one right we set the variable to itself plus one so let me just collapse this and then click and drag this into the else section right so there are two things that can happen we can have the variable bigger than 10 in which case we want to be increasing it by 2 and then if it's smaller than 10 we want to be increasing it just by one after clicking on this button right so all of this this whole condition is tied to the click interaction on this button so let's close this and go to prototype reset the Prototype and decrease it to to let's say two right and now let me keep increasing as you can see I'm adding one each time I click this button but when I get to 10 and I click again I'm going to be increasing this to 12 12 14 16 and so on so that is because we have set up this condition we could do the same with this button we could copy this entire interaction right so let me just select this let me just select this interactions copy that and then command C and then command fee paste that here so I'm going to remove the original interaction command V and now we have the conditional here as well but this time we don't want to be increasing this number because this is a minus button so let me just change the plus to a minus like this and then this one here as well so this one here as well we should be decreasing the number by two if it's bigger than 10. right so let me go to prototype as you can see if I click the minus I'm gonna be I'm going to be subtracting in increments of 2 until I get to 10 where I will start to or under 10 where I'm gonna start to subtract in increments of one again all right so this is a very simple example on how you can utilize the conditional function and set variable function in figma to create very flexible prototypes so this used to be quite complicated if if we wanted to set something like this up but these new features simplify things a lot so I think that's great there's a lot of things to explore so I encourage you to just open figma and try and play around with this stuff to discover things that maybe nobody has yet discovered so keep on trying keep on experimenting with these new features the only disadvantages of course is that it's paid right so these are paid features you cannot access the conditional and set variable I think and also variable modes in the free version so that's the only disadvantage but that's just something we're gonna have to deal with so I hope you learned something new I hope this feature now makes sense leave a like if you found this video useful and I will see you in the next one

Channel: Mavi Design

Views: 9,290

Keywords:

Id: 1KQfJXQMNHk

Length: 10min 1sec (601 seconds)

Published: Fri Jul 14 2023