Figma Tutorial: Advanced Prototyping With Variables (+ Practice File)

in this Advanced prototyping crash course I'm going to show you how to create Advanced prototypes using variables in figma let's dive in before we start you need to have two things first you need to grab a copy of this practice file that I prepared for you from the link in the description and second you need to have a paid figma account because the features we are going to use in this video are only available to paid users but even if you're not a paid user you may still benefit from this video in case you want to upgrade to a paid plan later on all right first we are going to start with the basics of advanced prototyping in figma and then we will put everything together and we will Prototype this card page the first thing we are going to create together is an interactive stepper okay here we have a simple stepper I'm just going to copy it hit control C or command C hit a to create a frame here just like this and just paste it here all right so as you know as soon as we click on this plus button this value should increase and as soon as we click on this minus button this value should decrease so how can we achieve this Behavior using variables and advanced prototyping the first thing we need to create is a variable to be able to control the value of this stepper okay so I'm just going to click somewhere here and head over to the local variables and here I'm just going to create another collection let's name it examples and I'm going to create a new variable what kind of variable do we need here we have a color number string and Boolean variable well for this example we just need a number variable because here we only have a number therefore I'm going to create a number variable and let's name it stepper value and I'm going to set the default value to zero all right now we need to link this variable to this particular text layer so I'm just just going to select this text as you can see in the layers list it's selected head over to the text section and from here I'm just going to click on this little icon it says apply variable I'm going to click on it and as you can see I have this stepper value variable I'm going to connect it to this value and as soon as I do that you'll see that the default value is replaced with the previous value here so we are sure that our variable is properly connected to this text layer all right so far so good now it's time to make it interactive so here I'm going to select this plus button and I'm going to head over to the Prototype Tab and from here I'm going to click on this plus button to create an interaction just like this the trigger is going to be unclick that's fine and from here I'm going to choose set variable okay so as soon as I do that this local variables list pops up and and it allows me to choose a variable okay because we need to control the value of a variable here it could be a color variable it could be a number a string variable or even a Boolean variable that we will talk about later in this video but for now I'm just going to go to this examples collection and from here I'm going to select stepper value now this window pops up and it allows me to set a new value to this particular variable okay okay here it says to write expression what does it mean here I selected this particular variable and I'm going to change its value I'm going to adjust it somehow as soon as we click on this plus button we need to take the stepper value this default one and increase it by one so here I'm going to type stepper value we need to take the default value and then it gives us a few options addition subtraction multiplication and division right so I'm going to choose addition you can type plus manually as well and here I'm going to type one so we take the stepper value and we increase it by one okay I'm going to hit enter and basically our first task is done so now let's give it a try and see whether it works properly or not let's hit this plus button and see what happens as you can see it's working perfectly but obviously we cannot decrease this value because we didn't make make this button interactive yet so let's go ahead and fix that I'm going to select this minus button I'm going to head over to the Prototype Tab and just add an interaction to it and from here we need to set the variable this one stepper value to guess what yes you're right stepper value minus one this time so I'm going to choose stepper value here and just type minus one just like this now let's see whether it works or not by the way I can just select this Frame and hit shift and space to give it a try here like this and as you can see it works perfectly but here we run into an issue well if I just keep hitting this minus button look what happens you see we go into negatives and that's not what we want we just want to make sure that the lowest value we can get here is zero so how can we fix that well it's when conditional comes into play let me show you how it works here if I select this minus button and if I go to interactions I'm going to open up this drop- down menu and as you can see right under this set variable we have this conditional option it allows us to create some conditions for our interactions so I'm going to click on it to create a condition and here we have this if an else statement if you're not familiar with if an else statements here is how it works imagine you want want to tell figma to make a decision okay and figma can make this decision based on a set of conditions it can be one condition it can be two conditions or more so basically IFL statements work like this if something is true if a condition is met then something should happen okay here we have an action if something is true then figma should run this action else if none of these conditions are met figma should run this action it's as simple as that if something is true do something if not do something else okay so here we need to figure out how we should write this condition as I mentioned before we want to make sure that we don't go into negatives here is what we can write I can say if stepper value and here we have a few options equal to here is the sign not equal to greater than greater than or equal to less than or less than or equal to okay so we can say if stepper value is not equal to0 like this if it's not zero so here is our condition then we need to add an action let's hit add action then set variable again stepper value here we need to take the stepper value and just decrease it by one minus one and in this case we don't need an else statement okay I'm going to increase it like that and now let's decrease it and as you can see it stops at zero and that's exactly what we needed all right that was our first example now we need to move on to another example to show you another type of variable here as you can see I created a switch I'm going to select these two I'm just going to duplicate them and just move them out like this here we have two different states on and off I'm going to select them both and I'm going to create a comp component set so from here I'm going to click on create component set just like that now let me head over to the design panel and here while this switch component set is selected I'm going to change its property to state I'm going to select this first variant and change its state value to false and let's select this one and change its state value to true because here we have a true and false a toggle button basically and then then I'm going to create a frame let's it a and just draw a frame and I'm going to grab a copy of this switch and put it right here and basically I'm going to show you how you can control the visibility of any element using a switch and a Boolean variable okay so here I have a switch I'm going to draw a rectangle here as well let me draw a rectangle like this I can change its color as well to purple like that so so here I have this rectangle and I'm going to be able to hide it and unhide it using this switch how can we do that it's so simple I'm going to create another local variable here and this time I'm going to create a Boolean variable a Boolean variable can only have a false or True Value okay let me call it switch and I'm going to set the value to false like that next I'm going to select this switch and I'm going to head over to this section and right in front of its component property this state property you will see this variable icon okay it allows me to assign a variable to this particular property so I'm just going to click on it and here I'm going to connect it to this switch variable that we just created just like that this property this state property is linked to this Boolean variable that we just created all right so far so good but are we done well not yet first let me go ahead and select this variant head over to prototype and just connect it to this variant to change the state and I'm going to change the animation to Smart animate like that and I'm going to select this variant connect it back to our initial variant and the animation should be smart animate so if I just select this Frame hit shift and space bar I can easily Tuggle it on or off but nothing happens to this rectangle that I created in order order to control the visibility of this rectangle we need to create another variable okay so I'm going to head over to local variables and I'm just going to create another Boolean variable and here let's call it card is visible let's consider this rectangle a card and I'm going to set its default value to false that's fine now we need to connect this variable that we just created to this rectangle to this card so I'm going to select it and I'm going to head over to the layer section and from here I'm just going to right click on this I icon okay and it allows me to connect it to our card is visible variable so let's connect it and as soon as I do that it's gone why because we set the default value of this card is visible variable to false if I set it to true it will be visible again like this okay but I'm going to keep it as is all right now it's time to see how we can control the visibility of this card using this toggle switch okay so what you can do is Select this variant this default variant head over to prototype and from here I'm going to hit this plus button to add another action and I'm going to click on condition because I'm going to write a condition here and I'm going to say if our switch variable is equal to false then we need to add an action I'm going to click on set variable this time we need to set the card is visible variable to True like this then I'm going to select this variant this one and just add another action conditional if switch is equal to false then we need to add an action set variable card is visible is equal to false like that so now let's see whether it works or not I'm just going to select this Frame hit shift and space bar and as you can see now our toggle is turned off and that's why we can see our card if I just turn it on there we go here is our card and we can simply control its visibility using this toggle button just like that all right now that you're familiar with the basics of advanced prototyping using variables let's go ahead ahead and create a page loader together it's going to be so interesting so I'm just going to hit a on my keyboard to draw a frame like that and for a page loader what we need is two text layers okay so I'm going to hit t on my keyboard left click to create a text layer and I'm going to type zero this is going to be our initial value of our page loader I'm going to duplicate it hit contrl D or command D move it to the right side and I'm just going to type a percentage sign like that now I'm going to select them both hit shift and a to add other layout to them let me align it to the center as well okay perfect so what should we achieve here basically as soon as we preview this page this value should start increasing from zero all the way to 100% okay the way we can do that is like this I'm just going to select this zero value let me just cut it hit control X or command X and just paste it somewhere here okay it's right there I can change its color and I'm going to duplicate it move it down select these two and just create a component set just like that to get two variants I'm going to select this second one and change its property value to two you can name it whatever you want I'm going to select this one and set it to one now I'm going to select this first one and just head over to prototype and just connect it to this second one the trigger here is so important it shouldn't be set to unclick it should be set to after delay and the delay is going to be 1 millisecond okay here I'm going to set the animation to instant we don't need a smart animate and we also need to add another action here but we cannot do that because we didn't create a variable for this value yet okay so we're going to do that in a second before we do that let me select the second one and just connect it back to this this first variant change the trigger to after delay and the delay is going to be 1 millisecond just like that okay so now it's time to go ahead and create a local variable for this value let's create a number variable and I'm going to call it loader value and the default value is going to be zero now I'm going to select these two text layers make sure to select these two text layers not these two variants it's so important select the text layers inside these two variants head over to the text section and just click on this little icon and connect these text to this loader value just like that all right now I'm going to select this one variant head over to prototype and I'm just going to open up this interaction that we just created and I'm going to add another action to it I'm going to write a condition I'm going to say if our loader value is less than 100 then take our loader value and just increase it by something maybe three four 2 whatever so here I'm going to take our loader value if our loader value is less than 100 like this then add an action set variable again loader value to loader Value Plus I'm going to type three in this case I'm just just going to go ahead and just drag and drop a copy of this zero component let me change its color to Black like this and we can just put it inside our Auto layout but for now let's just preview it quickly okay so it works but not properly here as you can see we went to 102 so it didn't stop at 100 that's because of this value we chose number three here as you can see if I just open up this condition I chose number three if I change it to two it will be solved for sure let me prove that to you but we can write a better condition I'm going to select it and I'm just going to change it back to three okay and then I'm going to write an lse statement to say that if the value is higher than 100 then set the value to 100% so if it goes above 100 figma will set it to 100 so basically we limit that number to 100 so let's add an action here and let's say set variable and I'm going to set loader value to 100 like this so once again if the loader value is less than 100 then it will increase it by three else if it's something else like 101 105 anything depending on this number figma will set this value to 100 all right now let's see whether it's works or not I'm just going to preview it once again and there we go now it works perfectly great now let's move on to our last example which is this card page so here we have many things to do basically what we are going to create is a fully interactive card page so here as you can see we have a stepper here we have the price for this product here we have price for one unit we have the quantity and we have the total value but right now they are static we want to make them Dynamic if I just preview it like this and I try to increase the quantity I cannot do that you know how to make this stepper interactive because we already talked about it but we also want to change these values based on the quantity okay so if I increase the quantity to two we need to change the quantity here to two and the total value should be increased okay to do that the way I designed this page is like this I separated this dollar sign from the value here as you can see I have this price frame and inside I have two text layers one for the dollar sign the other one for the price that's so important because the only thing we want to change dynamically is the price not this dollar sign okay and the same thing applies to this and this for the total all right first we need to Define our variables so let's go to local variables and I'm going to create a new collection here let's create a collection and just call it cart we need one variable for our price one for the quantity and one for the total value so here let's create a number variable and I'm going to call it price and I'm going to set the default value to 2 99 let's create another variable this one is going to be quantity and the default value is going to be one and I'm going to create one more variable and it's going to be total and the default value is going to be 299 for now okay now let's go ahead and connect our elements to these variables so I'm going to start with these two elements I'm going to select this hold down the control or command key on your keyboard and just left click here now I'm going to hold down shift and control key on my keyboard and and click on this one as well because we need to connect these two text layers to the same variable here we have price for one and here we have the price of this product so while both of them are selected I'm just going to head over to the text section and from here I'm just going to connect it to price now I'm going to select this stepper value hold down the shift key and control key select this quantity as well and connect the these two to our quantity variable and finally I'm going to select this total text and just connect it to our total variable all right our elements are perfectly connected to their variables now it's time to make it interactive so I'm going to select this plus button here I'm going to head over to prototype and you know what to do we just need to create an interaction the trigger should be on click this time I'm going to create a conditional for this but why here we didn't create a conditional for this one as you can see we used set variable here we said just increase the stepper value by one but this time for this example I'm going to create a condition to say all right if the quantity is less than a specific value let's say if it's less than 20 then increase it because this time I'm going to limit the number of products that the user can order you can adjust it however you want but I'm just going to show you the possibilities here I'm going to select it and just create a conditional I'm going to say if quantity is less than let's say 20 okay then add an action set variable quantity to quantity + 1 so let's see whether it works or not I'm just going to select this Frame preview it I'm going to increase it just like that and as you can see these two text layers are connected to the same variable okay and I can increase it until 20 so basically this is our maximum number okay now let's go ahead and make this minus interactive as well you know what to do I'm just going to select it create an interaction this time conditional if quantity is not equal to zero then add an action set variable quantity to quantity minus one just like this and let's preview it once again so here as you can see we can go to zero and not to the negatives perfect now it's time to somehow update this total value as well how can we do that well here I'm going to click on this condition for the plus button I'm going to hit this plus button and I'm going to click on set variable here I'm going to set total to quantity times price so here we first update the quantity then we update the total and when it comes to creating conditions the order of your conditions matters a lot because figma will go through them one by one from top to bottom that's so important keep that in mind so let's preview it once again here we have one the total is 299 I'm going to increase it just like this the quantity has been updated in addition to the total value like that but here when I decrease it nothing changed because we need to do the same thing here for this minus button so I'm going to create another action set variable and it should be total we need to set the total variable to quantity times price just like that now it should work perfectly all right so far so good the top part is done now we are going to move on to the bottom part okay here we have this go to checkout button which is active by default here and I created this terms and conditions checkbox which doesn't make sense for the card page we usually put it on the checkout page but I just wanted to show you an example here that's why I put it on the card page I'm going to make this go to checkout button inactive by default and as soon as the user checks this checkbox then it will be active how can we do that so here I have these two checkboxes I'm going to select them both let me duplicate them and move them right here while they are selected I'm going to create a component set to create two variants I'm going to select this checkbox component set and change its proper name to state I'm going to select this first variant and change its state to you could change it to unchecked and change this one to checked that's fine it would work but since I'm going to connect this state property to a Boolean variable I prefer to use false and True Values okay so I'm going to set this one to false select this one and set it to True okay this way when I create an instance of this checkbox like this I'll get this switch here and I can easily connected to a Boolean variable now here I have two different states of this go to checkout button I have the enabled State and the disabled state so I'm just going to select these two create a component set like that select this component set change the property here to state I'm going to select this disabled variant and change its state to disabled I can change it to false and true again but I'm going to show you another way of doing that so that you know both ways it's so important this time I use disabled and here I'm going to use enabled and when I go ahead and create an incense of this CTA button here I'll get these two options I don't have a toggle therefore I cannot connect the Boolean variable ible to this property but if we are not able to connect a Boolean variable to this property how are we going to change the state easily I'm going to show you how I'm going to copy this instance that I created hit control C or command C select this button right click on it and just click on paste to replace okay I just replaced my button with an insense of this component that we just created as you can see I also want to create an instense of this checkbox that we just created copy it hit contrl C or command C select this checkbox right click on it and hit paste to replace and this part is so important we need to go ahead and create two local variables I'm going to create a Boolean variable for this checkbox let's create a Boolean variable and I'm going to call it TNC terms and conditions by default it should be set to false but I also want to create create a string variable okay we haven't created a string variable so far I'm going to call it CTA and the value the default value is going to be disabled the spelling is so important you need to use the exact same word that you used for these variant okay here I used disabled here I used disabled as well it's very very important okay otherwise it wouldn't work all right we've created our variables now let's connect them should we connect our variables to our variance here well no because we cannot do that instead we need to connect our variables to the instances of our components to these instances how can we do that I'm going to start with this checkbox I'm going to select this instance of the checkbox we created head over to this state property just click on this little icon and assign this TNC variable this TNC Boolean variable to this checkbox just like this but what about this button I'm going to select this instance of our button our CTA component head over to the state and just connect it to our string variable to this CTA variable that we created and here as you can see the default value is disabled so when we connected to this state property it figures out which state which variant we need to use based on the value of this variable so as soon as I connect this variable to this state property as you can see now our button is disabled I know it may sound confusing but if you just practice a little bit you'll figure it out all right our variables are connected but if I preview this page and I try to interact with this checkbox look what happens nothing because we didn't make it interactive here I'm going to select this false variant head over to prototype connect it to this true variant and I'm going to select this one connect it back to our false variant so if I preview it now as you can see I can check and uncheck it but as soon as I check this check mark nothing happens to this go to checkout button so let's fix that I'm going to select this variant here the false one and here I'm going to add a conditional basically we need to say if this checkbox is checked then change the state of this button from disabled to enabled okay as simple as that so here I'm going to say if TNC variable this Boolean variable is equal to true then at an action set variable this time we need to use our string variable here we have this CTA variable we need to change the value of this string variable to enabled but here here is an important point when you want to change the value of a string variable you need to type quotation marks and then inside these quotation marks you need to type your new value enabled and now I'm going to select this one the checked variant and just write a condition here let's say if TNC variable is equal to false then we need to set our string variable value CTA two quotation marks disabled just like this and now let's give it a try and see whether it works or not there we go as soon as I check this figma changes the state of this button from disabled to enabled and let me uncheck it it works perfectly if you want to learn how to make your design responsive using figma variables make sure to check out this video on the screen thank you so much for watching this video if you found it helpful please hit the like button and subscribe to my channel for More Design tutorials have a great day and see you next time

Channel: DesignWithArash

Views: 33,284

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, figma variables, figma prototype

Id: 2bG3VEtWM6E

Length: 32min 5sec (1925 seconds)

Published: Wed Nov 22 2023