Figma Advanced Prototyping Features 2023 | In-depth tutorial

hello designers so yesterday I asked on a community Channel which new feature from figma config 2023 you want me to cover on our next video and a lot of you have voted for advanced prototyping so here is a video on the same so we look at how we can make use of this feature to create Advanced Dynamic prototype so as usual we'll first see a demo on what we're going to build today and then we can create it from scratch so without any further Ado let's get started and a quick note here that advanced prototyping is only available on the paid plans in figma so only on the paid plans you'll be able to see this so if you're not finding this feature this would be the reason you won't be able to use this on your drafts you need to move the file to a teams project and also since you're getting started with Advanced prototyping we need to understand what are variables so let me just give you a very basic understanding on what variables are in the context of figma so variables are nothing but a storage space where you can store something and your storage space has a name above it right so in the context of figma you have something called as Collections and each of the collections has separate variables that you can create so let's consider it like a box and in the Box you have spaces where you assign the space a name and give it a value you can store a value inside it and this value could be of four types a color a string a number or a Boolean so this is a very basic understanding there's also something called as groups and modes but we'll try to understand this as we create the prototypes so it's more easy to understand so let's jump onto figma and see a demo of what we're going to create today so as you can see here I have a checkout page and you might be wondering this pretty simple what's there in this but just wait for the Prototype and you'll be amazed at what's possible with Advanced prototyping features in figma so even to preview a prototype we have a new feature like before we don't have to click on the play button which opens up a new tab and then you have to switch between both these tabs now you can simply select the frame that you want and hit on Space plus shift and this opens up a new window on the canvas itself and you can move this around and keep it wherever you want and make the changes and you'll see it reflect live on the Prototype as well so let's play around the Prototype and see what's so unique about this so as you can see I have a simple standard checkout page we have the product list and we have a subtotal and the total right so as I keep increasing the counter here you can see that the subtotal and the total value keeps increasing I can select this and change anything and the counter for this one remains here and I can change this as well right so as I keep increasing the subtotal is increasing then a 150 is getting added to the subtotal and that is shown on the total right so all this is happening and changing dynamically and nothing is being created on the screen right so we just have one screen on this whole canvas so I can just show you so so there's no other screen and nothing magical about this all this is happening with the help of variables and the new Advanced prototyping features right and also let me just delete this so once I delete this the product is gone and the total and the subtotal also is reflected so all this is possible with just a single screen and that's the whole Magic about this right so here we have a fresh new figma file with just the screen and none of the interactions or no variables created so we'll get started from the scratch so the first thing is once you click on the canvas when nothing is selected you'll see a new Option here which says local variables and this is what we're going going to use to create the variables that we want create this Advanced prototype so let's quickly look at the screen and analyze what are the different variables that we would need to achieve this prototype right so for that if you look at the screen we want counter value which changes the value here that we see here all these could be controlled by one variable where we use the counter to increase the value or decrease the value so this one value should be stored in a variable right so that we can keep changing it and then we need a variable to store the subtotal and then we also need a variable to store the total right based on the screen I feel these are the different values or the variables that we need so the first thing here is we need to create this so I'm just going to duplicate this and bring it outside so that we can create a main component here so the first thing I'll just create this as a component and now this is a component right so we need to set or create a variable for this one right here so for that let me just click on the canvas and go back to the option where we can create variables so I select this option here and it opens up a new window where we can basically create variables and collections that really about so on the left you can create Collections and inside collections you can basically create variables so we'll just rename this collection for now so I'm just going to rename this tool let's say checkout so this will be our checkout collection and inside checkout collection we have the variables that we'll be creating so the first variable we are going to create it as a number because we are dealing with numbers here we want to increase the quantity and the count of the products so I'm going to use number here and we're going to rename this let's say item count so I'm going to use a variable name this could be any name that you want and I'll give the count as one because as you see on the checkout page all basically starts from one right so I'm gonna give the default value here as one and that will act as a counter so we have created a new variable right now so I'm just going to close this and let's zoom in back here and now on click of plus button you want this to increase by one and on click of minus it should basically decrease by one right so for that I'm going to select this plus button here and we're going to add an interaction to this so for that I go to the Prototype tab here and add a new interaction and this time on click we gotta select a new new Option here which is set variable so once I click on set variable you can choose which variable that you want to change so this is the item count so I'll click on item count you want to write an expression here right so what change you want to apply to item count variable is what you have to mention here so item count I want to change it by one right I want to add one to it right so first I'll select item count here you can see all the variables here or you can type and search here so I already have it here so I'll just select it and with item count I want to add one so it's simply you'll see the different operations here you can select it from here or just hit Plus on the keyboard so I'm hitting Plus on the keyboard and I choose one so every time I click on the plus button the item count has to increase by one and that is what we wrote here right so I'll just press enter and now you can see this is the expression or the action that is going to happen on click so on click item count becomes item count plus one so that looks good I'm just gonna close this and the same thing let's do it with the minus as well so I click on minus and I add an interaction here so set variable and this time item count becomes item count minus one every time you click on minus the item count should Reduce by one so that is what we just wrote here so that looks good and now we are missing one more thing here so we are doing this change on the item count variable but we haven't assigned the item count variable to anything on the screen right so you have to select this text here and assign that variable to this particular text and for that just select the text here and in the text column you'll see this new option which says apply variable just click on this and choose the variable that we just created so this is item count and now every time you do an action here the variable gets reflected and you'll see that reflected value which gets assigned to the text here so that is a very basic working logic now let's apply this on the screen and see how this works right so I'm just gonna copy the component here and we'll replace all of these static with the component that we just created so I'm just gonna select this so you can right click on this and say paste to replace or use the shortcut which is shift command and R and this replaces the static with the component that we just created so I'm just going to do it for all these three right here so we just replaced everything and now let's see a preview of this so I hit on shift spacebar and the Prototype is open so as I click on this you can see that the value is increasing and the value is decreasing but there's a problem here that this is changing the value of all the quantities here right so once you increase this you don't want the other ones to change right so let's see how we can fix this with a feature called as modes that we spoke about in the very beginning so I'll just close this once again so going back to the local variables that we just created so here we have a new feature to add modes as well so this is a new variable mode and this will basically help us to maintain separate item counts for different things right so let's say this is one mode this is one mode and this is one mode we need three modes so that we can separately maintain the count of each of these products so for that we are just going to create modes here so the first mode here call this as MX keys so this would be MX keys so this will maintain the counter of the MX keys and then we'll add a new one and we'll call this as Pop keys so this will maintain the counter for the next product and similarly the last mode and this will be MX Mouse and this can be used to maintain the counter for the MX Mouse right so those are the different modes that we'll create and now let's assign these to different modes and see how this will work so I'll just close this once again so mode is something like we can apply it to the overall component everything inside that component will reflect or take the changes of that particular mode right so for that I'm just going to select this component right here and here on the layer we have this option where we can change the variable mode right so once I click on this and go to checkout that is the collection that we created and this should take the mode of MX keys right so every time I change the counter of MX Keys it only reflects on this particular thing so I select this and similarly I'll select this one and apply the mode of this one to pop keys and for this one we are going to apply the one for the MX Mouse so everything is applied now and now let's see a preview of this so I hit on shift space bar and this time you can see that this works separately right so everything works individually and you don't have to worry about it so everything is individual and it works pretty fine so now that our counter is working properly now let's see how we can use the counter to change the values on the screen the subtotal and the total right so let me just close this once again and as I told you we need two more variables one is for the subtotal and one is to maintain the total value right so for that we'll just go back to the local variables and create a new variable so once I create a new variable here so this one is again going to be a number so I select number but now we can see that there are different modes right but for the subtotal and the total we don't need modes so everything becomes one so you add all the values and you just need one mode so this one doesn't work right here so for that reason I'm just gonna delete this and we are going to maintain a new collection for this where we have only one node right so I go to create collection and we are going to call this as totals okay and in the totals I'm gonna create a new variable which is going to be a number and this one will be your subtotal where we'll calculate the subtotal and a new variable where will calculate let's say the total value so the default value we want to give the calculated value for this one so the subtotal would be let's say the subtotal here is 2 4 and the total is going to be 150 added to that which is 2 4 6 5 0. so these are going to be the default values that we want and I'm just going to close this so now let's assign these created variables to the subtotal values here so I'm just going to zoom in here and select the value here so I've just created these as two different elements because if you create this as one single element you won't be able to assign currency to it so that is the reason I created two different text here and created an auto layout so that so as the value keeps increasing the currency automatically keeps moving to the left so you don't have to worry about it so I'm going to select this and in the text properties we have to assign the variable that we just created so I click on this option here which is apply variable and we'll choose the subtotal because this is the subtotal right so I'll just select this so I'll do the same thing for the total as well we'll select the total text here and apply the variable from this option and select total so we have assigned the variables to the subtotal and the total but now let's see how we can add the logic based on the counter how these values keep reflecting dynamically so for that I'm going back to the component that we created here and just zooming in so on the plus button right now we just have an interaction which basically changes this counter value and now we need to add a logic where we can keep changing the total and for that I'm gonna go inside this interaction that we created and we'll add a new set variable which will increase the subtotal value so for that I'm gonna hit on the plus button here and choose set variable so we want to set the variable for the subtotal right so I'll choose subtotal here and here we'll write the logic or the formula that we want based on which this calculation happens so for that let me just zoom out a bit and see the values right here so the first thing is we want to take the count of the MX Keys multiply it with 9000 and then add it to the next ones as well right so the first thing what we want is the count of MX keys for that we have the item count I choose item count and once again you have to click on this because we want only the instance or the mode which has the MX Keys item count or else it will take the count of any of the three right so I'm gonna select on this or click on this once again and this will show the different modes that we have so I'm gonna choose MX keys and right now it has the item count of early MX keys right so with this we want to use the multiplication multiply it with 9000 right because 9000 is the value of this particular product and even this you can maintain it as variables if you want to keep changing the value or you can just use static values here that is up to you right so I just wanted to show you that you can also use static values here and that is the reason we have it here so this one calculates the total of this particular product and now we have plus item count again but this time the item count of Pop keys so I again click on item count and choose the mode pop keys and we'll multiply this again by 9500 because that is a value here and again plus item count this time the item count of MX Mouse so this one again multiplied by 6000 which is the value of that product so we have the total formula created as you can see we are just multiplying the quantity with the value of the product and adding it three times right so we have everything ready I just hit on enter so this is our next variable that has to be set on click of plus button so now let's repeat the same thing for the minus button as well so I click on minus button I select the interaction that we created we're gonna add a new variable and this time again the subtotal we just have to do the same formula right because it has to just keep calculating every time you click on this button so the same thing that we did before I'm just gonna do it quickly and I'm going to fast forward this part so there you go I have added the same formula that we used just before for the plus Button as well and now let's see how this behaves on the Prototype so I'll just close this come back to the Prototype and I'll hit on shift spacebar so we have the Prototype open and every time I click on this plus button you can see that the value here is being calculated and added to the subtotal right so any product I change it exactly reflects so we have 6000 it's 80 000 here so I hit on plus it becomes 86 000. so it's working pretty fine right even the minus button you can see that it works perfectly even here if I change it the minus and the plus button Works seamlessly so that is how you dynamically change the variable and assign it to a particular text right so now let's see how the subtotal can be added with the 150 here and shown at the total value right here right because the total value is not changing right now so let me just close this once again and go back to the interaction so I again select on the plus button here go into the interaction and now we want to set a new variable again which is the total variable that we created right so again again I hit on the plus button set variable and this time we want to change the variable value of total so I select total here and we want to give the formula here right so since the subtotal is already being calculated I can directly use the subtotal variable and with the subtotal I want to add the shipping charges which was 150 right so I'll just add 150 to this and that's it we are done and we'll repeat the same thing for the minus as well I open this set a new variable and change the total here the subtotal has to increase by 150 and that's it let's see how this works I go back to the frame right here use shift space bar so as I keep increasing the quantity you can see that the total also gets reflected and this is again Dynamic so along with the subtotal 150 is getting added and that is the value being shown at the total column right so that is how we can use set variable in interactions to create such Advanced prototypes but there's a small problem here so in case I change the value to 0 and again click on this minus you can see that it goes to minus values right it goes to the negative values and and this is not a logical thing to happen on a prototype and this can be fixed again with a new feature in figma that is conditional statements so let's see how we can use that in advanced prototyping so let me just close this once again and go back to the component that we created so on the case of minus we want a condition that if the item count is 0 you don't want the button to work anymore right so for that we are going to choose the interaction once again and we're going to add a new interaction here which is basically conditional so conditional basically allows you to create conditions like if this is the case this should happen else this should happen right so we'll create a small condition here which will limit button to work once the count reaches zero right so I click on condition so we have to write the condition here so I'll just click here and our condition is based on the item count so I'm going to choose item count so only if the item count is greater than zero I want this minus button to work else I don't want it to work right so I'm going to use the greater than symbol I can type it on the keyboard or just select it from here so I'll choose greater than and type 0 so the the condition here is only if the item count is greater than 0 whatever is below is going to work right so only if this condition is true this action will be executed so that is the logic here right it's pretty simple and here you want all this action to happen right and I can select this and create everything but more than that it's simple that you can just drag these actions inside this so let me just minimize these actions and show you how we can drag it inside right so I just have to click here and drag it inside this right so that is how it gets added here so I'm just going to do the same thing for all the three just clicking and dragging it inside the if condition so what is happening right here is only if the item count is greater than 0 this particular action would be executed right so now it is set let's see if this works or not so I'm just going to close this and going back to the Prototype or the frame shift space bar and a prototype is open so I can increase the values here it works fine everything seems to work fine but once I go to 0 even though I click this button nothing seems to work so that is how we can see that the condition is working so even if I click nothing seems to work here and that is how we can use conditional statements to control any kind of actions that you want on the screen and there are a lot of use cases for this but on a checkout screen this is how it's going to work but that's it for this video if you found this helpful definitely hit on the like button and also the Subscribe button if you want to get updates of the next videos that I post and as always thanks for watching and I'll catch you in the next one

Channel: Design Xstream

Views: 7,816

Keywords: Figma Advanced Prototyping Features 2023, in-depth tutorial, Figma Advanced Prototyping, Figma Tutorial 2023, Figma Variables Tutorial, Figma Modes Tutorial, Figma Collections Tutorial, Conditional Expressions in Figma, Figma In-Depth Advanced Prototyping Tutorial, Figma for Advanced Users, Figma Prototyping Features, Figma Config 2023 features in-depth, Figma New Features 2023, Figma Update Tutorial

Id: PJIq5X389J8

Length: 18min 8sec (1088 seconds)

Published: Sat Jun 24 2023