Figma Variables & Advanced Prototyping - Crash Course

today we're going to cover the most notable features from the recent figma updates and those features are variables along with Advanced prototyping you're able to follow along by grabbing a copy of this design file in the description where we're going to integrate these new features across five different simple projects I've created so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so this is the document here um nothing Dynamic is being is happening here this is just the layout and the design that's already created for us so again in the YouTube description make sure you grab this eye and you you basically clone this file so that you have access to each of these so that we could start playing with them so I'm going to put this in a new document I have already open here and just paste this very first frame from here into this new document now if we want to get this to work and by the way if you select the frame hit shift spacebar are we can go ahead and wait for a second all right and we can see nothing clearly happens there's no interactions at all so let's first go ahead and we're going to take this and make it a component because we're going to add a hover State and then we're going to work in the new features uh for this so we're going to go ahead and take this I make it a component click it again for a component variant I'm going to hit uh the F key for frame and we're just going to drag this up over here and again I might make that a little bit bigger there we go okay so our hover state is going to be actually we're not going to have a hover State we'll just have um a click state right here so when this goes to here this will be the click State and when it is pressed we're going to double click into here and gain access to change this selection color uh we're gonna grab this blue right here and we'll just have something like that okay very simple now we're also going to go back to assets we can grab our little element there there we go now we have an instance of it okay so now what we want to do in order to get this to work is we need to tie this number variable here to a an actual variable but we haven't yet created so the way you do this is you select you do select everything and then over here in the property inspector you'll see local variables so when we click this here we can see this Beta And by the way if you're using the desktop version make sure you're using the figma beta desktop version otherwise these uh beta features small show up and so we can see we have what are called collections over here we can create multiple Collections and the main reason for creating these collections are so that you could take your variables and you organize them in a suitable manner so if like you have variables for color schemes and stuff you can have a color schemes collection if you have Boolean values uh you can have a Boolean value collection all that you know just this is a way to organize your variables for us we're just going to leave this at collection one and we're going to click create variable and you can see clearly we have four different options so for us we want a number variable all right and so the number we can change the name of this and right now it just says number we're going to change this to like count all right so we have an initial value of zero which is what we want I for this demonstration so what we do is we control left click um and then Ctrl shift left clicks as well to select both of those instances and then we come over here and right here this little apply variable we're going to click up I that right there now it is tied to this value so if I double click over here and it changes to something like 12 it updates here as well which is really awesome so we're going to leave this back at zero all right so now in order for us to get this to actually increment this variable uh based on a click over here we're going to switch to prototype mode over here let's close that out we're going to double click on our first variant and we're going to come down here and drag it there and then right here we'll leave all this stuff the same on click that's all good we're going to click Plus and you're going to need to move this to a team in order to gain access to this feature so so I already have a team set up here and so I'm going to click move and we'll have to do that again so now we can choose set variable now for step variable it'll be light count all right and then what we're going to say is we're going to add plus one that's it just hit enter after that and we're ready to rock so now if I shift spacebar click it oh it doesn't keep working why is that okay so essentially we need to apply this when this has been clicked I the same concept so essentially we can come over here click to add an interaction on click you see we will set variable light count Edition plus one come back here shift and there we go very very very simple okay awesome awesome stuff so that's like one of the most simple examples I as far as creating the variables and incrementing with addition you could use subtraction you know multiplication division all that good stuff we'll get uh some more experience in the next demo right here so this is a little bit more complex so I'm going to come over here we're going to put this stuff right over here and I'm going to paste this in right there okay so for this we have a purchase a license section where it says team seats where we have this little area right here where you can click plus and minus in order to increment or or uh what it would be decrement this value right here and then also we want to add 39 dollars this by the way should be 39 not just 30 but it doesn't matter we're going to change that to a variable anyhow but uh each time we we add one it's going to add 39 to this value right here so let's get that set up as well so first we're going to need on a couple different variables so switch to design go to local variables and we're going to create a new one and this time it's going to be the seat count all right so we'll call this seat count and right now we'll by default we'll make it one all right and so we'll tie this value right here over to C count there we go and it stays at one of course all right now we're also going to need another variable for the cost so so let's come back over here create variable number and we'll just say cost Now by default we'll leave it at 39. alrighty and then we're going to take this value now notice how I I set this up when I was designing this beforehand this right here is an auto layout where we have just this right here the number sign and then the actual element right here which will be the variable called cost all right so now it's assigned to cost and the reason I decided to mention that is because this has a number sign and it won't have the number sign up here so just just so that you understand that okay now what we need to do is now that we have seat count and cost define we have to go ahead I'm going to take just this part I'm going to copy that or actually rather I'm just going to turn that into a component I'm going to click that button twice up there so now we have a variant and I'm going to hit frame up here and just grab the same color background and then just drag this up and over there we go and now we can start working on this and getting the interactions correct so essentially what we're going to do here is when we hit plus one we want to increment this value right here which is the seat count all right so what we could do is we can just simply say on click let's go to prototype we're going to add an interaction let's close this out all right and our interaction is going to be a set variable and that is going to be C count oops not light count I'm sorry we're going to go C count plus one very simple all right and then over here we're going to do the opposite and where we're going to subtract it very simple come over here we're going to set variable seek count subtraction 1. all right negative one or minus one rather now we don't even need this I actually if we wanted to do like a hover State you could do this as well but for really uh this this purpose we don't even need uh the variant so that's fine let's go back to assets we're going to drag this in and we want to make sure we get this inside of here uh in the correct area so we don't want that we want this switched like that and we'll bring this out let's get this over here get this fixed up there we go so now we're back to where we started with our instance right here all right so let's take this shift spacebar while selecting it and then there we go we have our plus and then we have our negative and it increments in D increments exactly as we'd expect it to okay so that's good right there however we also need to add to this total as well okay so I think before though we get to that point we should probably work in some conditional logic which we haven't yet covered because we don't want this situation occurring where we're going to negative values that doesn't make sense all right so I in order to avoid that we don't have to screw around with the plus because the plus will never get us you know be obviously underneath one right here so the negative though we want it to stop at I one or zero depending on how you look at it so we're going to click on this I'm going to zoom up here we're going to add a conditional so it's an if else statement and we click in right condition we can select the C count is not equal to zero all right so if it's not equal to zero then you can do this stuff here now I swear I was able to before previously take this and just kind of like move it oh there it is yeah we can just move that in there we could set the C count uh right there so you have to to collapse that first I was really struggling with that I was like how do we drag these in there well I just figured out on the spot and so now we can leave else empty so let's go ahead and see how this new interaction works so we'll go ahead and hit plus all right now minus and that's it you can't go anymore so that's how you can work in conditional logic now we also want sorry about that we also want this 39 to increment and also respond to based on that plus and minus action so with that said for plus let's go ahead and take this plus and we're going to do this interaction we're going to go ahead and set variable this is going to be cost all right so the cost is going to be Cost Plus 39. alrighty and then we'll do the same thing over here oopsie there we go and then we'll say add an action set variable cost is going to be cost minus 39. we can go ahead and collapse this and drag this in there as well awesome so now we're going to go ahead and play this we can see cost Rises all the way down here there we go and it just stops very good stuff okay let's go on to our third example and this is going to be um we're going to for the first time actually introduce a color variable all right so let's go ahead and copy this and we have a light dark toggle okay so I'm gonna go ahead and get a new frame here we'll make it the same color as our background we're going to take this and we're going to create a component out of it and a variant we're going to move this into this section here and let's get this working so the first thing before we start working with prototyping is to Define a variable for this uh background color so to do that we go to design local variables and then we'll create a new collection this time create collection we'll call this colors and then create variable it's going to be a color and a name we'll call background and then our current color will be this blue all right that works and then we'll go ahead and close that out we're going to tie this background color and if I click it we go to libraries and then we click background so now if we go back to local variables and I start playing with this you'll see how it affects that color so you could do this obviously in any value that accepts color except essentially like type or anything else so let's also real quickly get I our light dark mode toggle thing situated here there we go and now what we want to do is I create the other state right here so I'm just going to move this uh what I could do the way I set this up is I I'm going to change the alignment of the auto layout to get it over there and then also the element that's not toggled on will be like at 50 pass-through value opacity so over here let's change to 50 as well all right so then we take this whole element here and then we are going to switch to prototype we're going to drag a connection so we can change this to Smart animate as well and then we can click add set variable and let's come down here this variable is going to be the background color and we want to set it to let's just do white or maybe like really light blue all right now we're also going to have to once we click it go back we're going to drag a connection there and then we're going to add the same thing so background the background would become this color right there once again okay let's see if it works oh well we certainly don't want that that says dark why did I make it white because I'm simple okay let's let's fix that change this to like a dark there we go almost black color let's try that again let's select the the right frame though there we go zoom up click it there we go very very very cool very simple example with color let's try number four and this one gets a little bit more involved this one will I'm dealing the use of Boolean values so let's work on that let's copy this okay so this this right here there's a little bit um a lot of stuff is going to be happening here uh so what we're going to do is we're going to take this element right here if you double click again it's just selecting these two elements and we're going to make that the actual frame or sorry component and so in doing that it's going to screw up the layout don't worry about that I'm going to hit frame just to get up here and then we're going to drag that up here okay now for the initial State we're gonna have three different states by the way the initial state is um this right here the opacity or the passer is going to be zero so that's our default State this will be a hover State and so this is still going to be zero for this check mark so I'm going to make that pass through zero but I'm also going to take the the container outside of it and just give it a stroke for hover and the stroke value be something like that blue we've been using that's fine and then we're going to go ahead and duplicate this and then this is going to be the filled in value so this stroke is actually now going from black to white and we're going to give this a fill of that same color right there now we also have to select this and bring that back to 100 percent so those are our three states for this element and what we want to do is we want to toggle or on and off the visibility of this right here and we're going to also do it with another text layer as well that's not pictured so we could do this with the use of a Boolean value so to do that let's create a new connect collection up here so we'll do create collection create variable Boolean which is true or false and we'll just call this I uh show Avatar I guess so we're going to make this true by default show Avatar now Boolean values currently at the time of the recording this are only able to to control the visibility of a layer like it could show it on and off like the little eye icon and so what we'll do is we'll select our Avatar and with it selected right over here where it says layer pass through and this little eye icon we right click it it's not the most obvious thing ever it actually took me a while to figure out how to do this we right click it and we just choose show Avatar all right so right now it's true but if we toggle it off up here it's false or it gets hidden so we're going to leave that at true and now we want to control the value of the Boolean value up here the or the the variable rather with these elements right here so initially when we hover over this state we're not trying to change anything because nobody clicked anything all right so this is the hover State and this is when somebody clicks it so this is where we want to add in the Prototype an interaction so the interaction is going to go straight here but also outside of just changing the variant it's also going to set a variable and that variable is show Avatar and we're going to say it's going to be equal to true right there so let's go ahead and that's exactly what it should look like so show Avatar and then true and that should be pretty good right there and at this point let's go ahead and get that back in with our assets so we're going to take show Avatar we need to get this inside of the actual let's see here we have this let's let's see if we can just drag this in there we go so now it's exactly where it needs to be all right so let's zoom up here so you can see all right so the hover State isn't working I think that's because I didn't apply that correctly so yeah I didn't even set it up sorry about that let's drag this down this will simply be changed to um while hovering okay so again let's go back here there it go so we have our little hover click on it ah and I know what what happened it's because it was already true so nothing changed so really we should go back to our design into local variables and just make this false and now you see everything gets hidden which is not what we want so we just need to break this connection right here there we go and we need to reapply it to this element only so we come over here under pass through sorry about that there we go so now if we toggled on and off that'll stay okay so let's try this again click it Now by default we want this hidden there because it's not checked okay so now one last time and show it and then now we have to finally take this connection right here and make sure we're in Prototype mode and we're going to drag a connection all the way back to the very beginning and then set the variable of the show Avatar to false there we go that's what you want all right so let's try this again show Avatar oh no and it's not working and I discovered the issue here was um if I zoom up these were set at smart anime I changed them to um instant right here and this one as well to instant and so now if we go back here let me bring this up now it works as expected awesome so let's go ahead and we're going to do one more final example and this one right here doesn't really have much to do um with interactive prototyping more so with what are called modes all right so this is very powerful and I'm going to show you exactly how this works so we're going to paste this in from the examples and we want to create a different color scheme for this and we could do more than one or two we can do multiple and the way we do that is through our variables so we're going to come back to our variables and we're going to I go back to our colors right here and maybe we should do a new um collection for this just because we're dealing with the other projects so create collection um we're going to give this a name of um new colors I guess create the variable it's going to be color and right now we've only been dealing with the name and value but we can actually add other columns to each one of these colors and those are called modes so here's how this works um let's say we have a background color so we'll call this background and the current background color is right here now if we add plus we'll see it changes to mode one and we have mode two so this is going to be the dark mode this is going to be the light mode so as you can see a single variable can now be bound to two different modes or even three if you add another one all right so we're going to go ahead and delete that mode we only need two of them and for a light mode okay well what color do we want the background to be well to do this we can go ahead and select the frame for the background come over here we assigned it under libraries this is going to be background right there and so now if I'm trying to deal with the light mode I can come over here and then like change it to wherever I think it would be now why is it not changing right here even though I'm changing the light mode right there so if we deselect everything we'll see under here it says page and you'll see new color and default it's on dark but we were changing the light value if we change this to light now it's going to show us this color right here all right so that's how you can switch between modes and unfortunately at the time we're recording this you can't switch modes in a prototype manner so like if I had a little toggle button and I wanted to be able to allow a user to click the toggle button and it'll switch the mode from dark to light and vice versa all right now at the time of recording this you can't do that but this is the preferred way to create color schemes in your design you just have to switch them manually over here in order to show them to you know stakeholders or whoever your client or whatever so this is our light mode and we also have to create a few more for like the type The Watermark the panel and things like that so let's create another one or create variable it's going to be color and for this one this will be we'll call this main type so let's change this main type and for the dark mode like we switch this back to dark the main type is white or it's almost white it's d9099 so we'll copy that paste that there and then when it's dark we're gonna I when it's on a light mode we want a dark type so we'll just make it black all right so now we have to bind main type to the elements where it makes sense so like we can bind that right there I think there's a there was supposed to be a dash here but no big deal um so that right there works pretty well so what we'll do is go ahead under fill libraries main type okay so now if we switch to light there we go very good now this element right here we can actually I notice it's it's actually was attached to a different previous color mode from before I recorded if I break that what we want to do is like probably take this down to 10 percent for pass through all right and that looks pretty good right there we'll see how this behaves when we switch to dark okay so you could barely even see it and we can probably go ahead and attach this let's see what happens when we attach this to main type all right so when we do that and we switch to light that looks good and dark that looks pretty good as well so I have no problem with that awesome let's get this just moved right there and then finally we have this section over here so we have a panel color so let's create a new variable called panel color all right the panel color by default in dark mode let me take this and grab it right there there we go is that color now let's switch to light and we could leave it like this not change it at all but I'm choosing to change it so we'll take I we'll take this and maybe we'll just make it white I think that would work just well so we'll leave it at White up here now we bind this here to the panel color alrighty so now we want to take our type which it's these three elements right here and we need to do one more variable called secondary type and it's basically the opposite of main type so what we'll do is we'll create a color variable called secondary type right there so in dark mode this type is white essentially and then we'll make it black actually we probably could give it the main type uh variable that was already defined all right so what we want to do is take this we haven't tied those yet we're going to come over here there's a fill we're going to do secondary type and then there's also a stroke we can do secondary type as well it's a little Dash but it'll follow the same colors so now if we switch dark there we go switch the light there we go and that is how you do color schemes here within figma in the new features so that is everything we have this element right here which is just our very first example we have a more robust example right zoom up where we can increment values it changes the price all that good stuff it stops at zero very nice we have this toggle option here light to dark mode we have this Frame right here where we can control through Boolean values the visibility of other layers and then finally as we just saw we saw the ability to change dark light and any other color scheme modes that you wish all right everybody awesome awesome stuff hopefully you enjoyed that I know it's a longer video but there's a lot to tackle there and I tackled most of it in terms of the new features of figma so hopefully you learned a lot there I will see you all very soon and goodbye

Channel: DesignCourse

Views: 40,898

Keywords: figma, figma prototyping, figma advanced prototyping, figma variables, figma modes, figma collections, figma booleans, gary simon, designcourse, crash course

Id: Tx45NcbU6aA

Length: 31min 0sec (1860 seconds)

Published: Thu Jun 29 2023