Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)

in today's episode we are going to talk about figma variables and by the end of this video you'll learn how to use variables in figma Leica Pro so what are variables variables allow you to save reusable values that can be applied to different design properties like feel stroke padding margin Etc but but wait is definition of styles well not really although both Styles and variables allow you to store reusable values they have two fundamental differences a style can be used for properties that are made up of multiple values such as gradients or Shadows for instance you can create a color sign that has multiple fields on the other hand variables can store individual raw values like a hex color code or a string of text the other difference is that a style can't reference another style but a variable can reference another variable or even a style and this is what makes variables so powerful why because we are now able to create design tokens if you don't know what they are don't worry we are going to talk about them in this video alright now that you know what variables are let's start creating them so here as you can see I already designed this product card and it includes a product image a title a description and this add to cart button and also this price tag and I designed this card using these colors okay here as you can see I have a blue color scale a gray color scale and also these two base colors so here if I select any of these elements for example this button as you can see it's not using any color style or any variable the same thing applies to these elements these text layers here so now let's see how you can create variables in figma and how you can utilize them properly first of all make sure to not select anything I'm just going to click somewhere here and on the right side you can find this local variable section I'm going to click on this icon and here this window pops up here it allows me to create a collection basically we can create different collections of variables by default this collection one is there I'm gonna go ahead and rename it now I'm gonna rename it to Primitives you can rename it to whatever you want but I'm gonna name it Primitives so now inside this collection we can start creating our variables I'm going to hit this create variable button and as you can see we can create four different types of variables color number string and Boolean figma mentioned that they are going to add more variable types in the future but at the moment we only have access to these four types so here I am going to click on color to create a color variable just like creating a color sign we are going to name it I'm gonna name it blue dash 50 and now I can assign a value to this variable okay and the value should be a hex color code so what I'm going to do is link this variable to this particular tint of blue now I'm going to click here and using this eyedropper I'm going to click on this color just like this and now we just created our first variable blue 50 with this particular value now what I'm going to do is go ahead and create a specific variable for each shade and each tint of this blue okay so what we can do is click on create variable and just click on color to create another color variable or we can just duplicate this part particular variable to duplicate it you can hit shift and enter sometimes it doesn't work I'm sure it's a bike but if you just create another collection here I'm just going to quickly create another collection and I just switch between these Collections and now if I hit shift and enter it works perfectly I'm gonna hit shift and enter a few times just like this because I'm going to create many different variables of course we don't need all these variables to design this card but I'm just going to show you the process of creating variables for your projects so here I'm going to go ahead and quickly rename these variables the second one is going to be 100 and I'm going to fast forward this process alright perfect I created all these variables and I renamed them now I need to go ahead and just change their values okay we just need to select the second one which is blue 100 and using this eye dropper I am going to click on this 100 shade like that and I'm just going to continue doing that one by one all right rate our variables are ready now I'm going to group these variables how can you group variables you can simply select this bottom one hold down the shift key on your keyboard and click on this first one to select all these variables then just right click on one of them and just click on new group with selection just like this and as you can see a new group has been created now I'm just going to double click on it and just rename it to color forward slash blue so we basically created a color category and then the blue subcategory underneath just like this as you can see we have this color category and then inside we have this blue category perfect now I'm just going to click on this all variables and we just need to create different variables for this gray color scale as well so basically we need to repeat the same process I'm going to click on create variable just like this and I'm going to call it gray 50 hit enter and just change its value to gray 50 and now you know what to do we just need to duplicate this variable multiple times rename them and just change their values so I'm going to hit shift and enter just like this a few times okay perfect now let me quickly rename them great now let's change their values I'm going to go ahead and change their values one by one and I'm going to fast forward this process all right it's done now we need to create another group so I'm just going to hold down the shift key on my keyboard and just select these gray variables right click on one of them click on new group selection and here I'm gonna type color forward slash gray just like this and now as you can see we have two subcategories under this color category but we are not done yet we need to create two base colors as well so let's select this all variables and I'm just going to create another color variable and this one is going to be white and the value should be intact now I'm going to create another variable and I'm going to call it black and I'm going to change it to this color just like this now let's select them both put them inside a group and I'm going to rename this to color forward slash base just like this so we just created our color variables we created the blue variables the gray variables and the base variables now let's go ahead and create another type of variable a number variable so I'm going to click on all variables and here let's click on create variable and I'm just going to click on number and now I'm going to create my spacing variables so here for the first one I'm going to call it 0 and the value is going to be zero now I'm going to duplicate it hit shift and enter and it's duplicated a few more times like that for the second one I'm gonna name it one I'm gonna name this one two three four five six and so on I'm not going to go ahead and create variables for all the numbers we need for a project but you got the idea right so for this variable I'm going to change the value to 4 assuming that we are using a four point grid system for the second one I'm gonna set it to eight for the third one I'm gonna set it to 12. the next one is going to be 16. the next one is going to be 20 and the next one is going to be 24. now let's select these number variables and just group them just like this and this time I'm gonna call it spacing okay perfect so we created our color variables and our spacing variables and now you might say that all right now it's time to apply them to our design right not really because basically when we create these variables under this Primitives collection we are now not gonna use them directly so we are not going to select this button for instance and just try to apply one of our variables to this button why because if we do that it's just like using a color style so what's the difference between variables and color styles there should be a reason for using variables right and you're going to find out what the reason is so here I'm going to click on local variables and what we need to do now is create another collection so now we are going to create another collection I already did that I'm going to rename this to tokens so now we basically need to tokenize our variables but what's a token a design token is a simple reusable design decision that represents a design attribute or style such as colors spacing text Etc so let me show you how to create your design tokens now under this collection we are going to create another variable again a color variable but this time we are going to name it differently Okay so here I'm going to type surface primary so this is going to be the color that we are going to use for the primary surface in this case it's going to be the background of this card okay and now you might say that all right we need to set the value to White so we need to leave it as is but that's not true remember when I mentioned variables can reference another variable well let me show you how it works so here instead of using a hard-coded value like this hex color code we are going to make this variable reference another variable one of the variables that we already created to do that you can just click here and go to libraries and here as you can see we have all the variables we already created we have Primitives color blue color gray and base colors okay for the surface primary I know that it should be white so I can just link it to this color base white just like this and now this variable this surface primary variable is tied to this variable that we already created and it's called an alias when a variable references another variable we call it an alias here if I go ahead and detach it I'm going to show you another way of creating an alias you can just right click here and just click on create Alias just like this and then you can just click on white here alright cool so now let's go ahead and create another variable here I'm going to create another color variable and this time I'm going to name it button background primary so for the button background primary variable I'm going to change the value to this particular shade of blue okay it's going to be blue 600 so what I'm gonna do is just link it to Blue 600 just like that and now it's referencing this particular variable that we already created now let's create another color variable I'm gonna name it button label primary our button label should be white so again I'm going to assign it to color base white so let's go to libraries and from here I'm going to assign it to color base white and now as you can see we have two variables that are referencing the same variable and that's why design tokens are so powerful you cannot do that using color styles okay now let's go ahead and create another color variable I'm going to call it text primary and I'm going to set its value to gray 950 this one the darkest shade of gray that we have here and now we need one more color variable and it's going to be named text secondary and the color is going to be gray 500. I'm gonna assign it to gray 500 just like this and now we just created all the design tokens we need for this card of course for a complete project you may need to create many many variables here but for this card we don't need more than that okay now let's go ahead and select them all and I'm going to create a group and I'm going to rename it to color perfect what else do we need before we go ahead and apply these design tokens to our card we need to create our spacing system as well so here I'm going to click on all variables I'm going to click on create variable and this time we need a number variable and here I'm going to name it spacing none and as for the value I'm going to click on this little icon and from the library I'm going to set it to zero this is one of the variables that we already created next let's go ahead and create another variable this time it's going to be spacing xxs and I'm going to change its value 2 1 I'm going to create another variable this one is going to be spacing Xs and let's change its value to another variable which is going to be this one number two I'm going to create a few more variables here this one is going to be spacing small like that let's assign it to spacing three let's create a few more this one is going to be spacing medium and it's going to be assigned to spacing 4. the next one is going to be spacing large and it's going to be assigned to spacing five of course you don't need to use these values linearly you can just Skip One value for example you can assign this spacing large to this particular variable but for this project I'm just going to keep it as is I'm going to create one more variable and I'm going to name it spacing x-large like that and let's assign it to number six now let's select them all group them and just call it spacing system and now our design tokens are ready now we can go ahead and apply these design tokens to this card let's see how it works here I'm going to select this card frame as you can see it's an auto layout frame and I'm going to go ahead and Link all its properties like feel Corner radius Etc to our design tokens so here why this card is selected I'm going to head over to the Field section and I'm going to click on this little icon and from here you can find all the variables you created but make sure not to use your Primitives okay you need to use your design tokens so here under tokens I'm going to click on Surface primary and now the background color of this card is tied to this particular design token color surface primary now let's go ahead and select this text and I'm just going to repeat the same thing this time I'm gonna link it to text primary for this one as well I'm gonna link it to hex primary here I created two different text layers as you can see we have the location and we have this available in label I'm going to show you why in a few minutes because I'm going to show you another feature of variables okay but for now I'm just going to select it and I'm just going to link it to text secondary this one should be linked to text primary like this the price tag also should be linked to text primary we already did that now let's select our button and we just need to link its field to button background primary and also we need to select its label and just link it to button label primary but we are not done yet because we just linked our colors to our design tokens but we didn't use any of our spacing tokens so let's go ahead and use them now here for the corner radius I'm not going to use any tokens at the moment because we are going to create another set of tokens for the corner radius value but what we can do is Select this card and if we head over to the auto layout panel here we can click on this little icon and from here I'm gonna head over to tokens and here you can find all the spacing tokens so as for the padding I'm gonna set it to spacing medium and this one should be set to spacing medium now I'm going to select this content frame inside and we just need to open up this drop down menu and just click on apply variable and from here I'm going to choose number three this one then I'm going to select this button and let's apply variables here as well I'm gonna select number six and for this one should be number three and then we can select our content and inside as you can see we have another other layout frame here we can apply our variable as well this one and inside this content frame we have another frame we have two other frames I'm going to select this one this one is set to Auto and this one is set to 4 so we just need to apply our variable here to four perfect but what about the corner radius values so let's go ahead and quickly create a few radius tokens as well here I'm going to click on spacing system because we are going to create these variables under the spacing system category and let's call it radius small and the value could be eight so I'm going to assign it to number two and I'm going to create another variable like this let's call it radius medium and this one is going to be 12 pixels so I'm going to set it to number three and let's create one more radius large and I'm going to assign it to number four which is 16 pixels all right great so now we can select our card and here as you can see the corner radius is set to 12 I'm going to click on this little icon and under the design tokens here I'm gonna set it to radius medium like this next I'm going to select this image and just set it to radius small and also I'm gonna select my button and just change it to radius small all right great so we linked all these properties the Field property the auto layout padding property and also the corner radius property to our design tokens now let me show you why we went through this boring process okay so imagine you want to change the color of this button what you can do now is head over to your design tokens and here the only thing you need to change is the value of this particular variable button background primary okay let's suppose you want to use a darker shade what you can do is click on it and just change it to Blue 700 but you might say orange we could do the exact same thing using color styles yes you could do that but there is a huge difference between tokens and color styles basically between variables and color signs so here as you can see we can give these variables semantic names and you can quickly understand what this variable is all about but that's not the case with color styles so let's suppose you want to change the background color here if you used color styles you had two different choices number one you could just go ahead and change your color sign however that way this button label would be affected as well and that's not what you want because you just want to change your your background color number two is you need to go ahead and select this card and just change its style here and imagine you want to make changes to multiple different elements you need to go ahead and modify them one by one but when you use design tokens you can easily change the value of your design tokens for instance if you want to change this label color you can simply head over to this button label primary and just change it to something else you can change it to Black for instance if you want okay I'm gonna set it back to white but let's suppose you want to change your entire color palette in that case you can head over to your Primitives and just change all these colors so let's say you are not satisfied with this shade of blue here okay and you want to darken it for instance if you just head over to Primitives and from here you adjust this particular variable you can just click right here and just modify it easily but what about the spacing system let's suppose for some reason you decided that your corner rate radius values should be increased so here let's say your smallest Corner radius value should be 12 instead of 8. so what you can do is just change this value to number three so now it's referencing this particular variable which is 12 pixels and the next one should be number four and as soon as I change that as you can see the corner radius value here has been increased alright that's how you can create variables and design tokens before we move on to the next topic I'm going to show you something very important here okay and that's the scope of your variables so here if I head over to spacing system as you can see we created these three radius variables and we know that these three variables should be reserved for the corner radius value however it doesn't work like that at the moment if I just go ahead and select this Frame here and I just click on this little icon under the spacing system as you can see I can set this value to radius small as well but that's not what I want shouldn't be available for these values it should be reserved for the corner radius value okay so how can we make that happen well it's quite simple I'm going to head over to the tokens collection and from here I'm going to select this variable and as you can see this icon appears here it says edit variable if I just click on it this window pops up and here we have a section called number scoping it basically shows you all the properties that could be linked to this variable this particular variable and as you can see now it says Corner radius width and height Gap and text content that's not what we want we just need to uncheck these check boxes this one this one but this one should be checked we need to repeat the same thing for this variable I'm going to make sure that this one is checked and uncheck the others and this one as well I'm gonna check this one and now if I select this Frame and if I try to head over to my library as you can see now those values are gone the same thing applies to color variables so here if I just select any of these color variables like this one you can see that you can apply it to frame to shape to text to stroke if you want to reserve it for the Field property you can just uncheck this checkbox for instance alright now that you learned how to create variables how to tokenize your variables it's time to take your design to the next level I'm going to show you how you can create different modes for your variable collections this feature is only available to paid users so if you don't have a paid account you cannot use that unfortunately but it's good to learn that in case in the future you want to use a paid account you know how to create different modes so let's say we want to create a light mode and a dark mode for this card how can we do that it's quite simple here I'm gonna head over to the tokens collection we can do it in The Primitives as well depending on our needs but I'm gonna do it here here in this tokens collection as you can see here we have this plus icon if I click on it now it says mode 1 and mode 2. basically figma selects this First Column as the default mode of this particular collection but you can always change that I'm going to rename it to light and this one should be dark okay so what we need to do now is change the values of this second column okay so for the dark version I'm going to change this value surface primary to Black okay so the background of this card should be changed to Black then as for the button background primary I'm going to change this color we usually make it lighter on dark mode so I'm going to change it to 300 and by the way we need to change it back to 600 as for the label I'm going to change it to Black like that the text primary color should be gray 50 something light because our background is dark so I'm going to change it to gray 50 and the text secondary is going to be gray 500 so I'm not going to change that okay so now let's see how this works here if I select this car frame since we created another mode if I head over to the layer section here this icon appears okay I can just open it up and here under tokens as you can see it's set to Auto okay so the mode is automatically set to light which is the first column of our collection our variable collection I can change it to dark and there we go here is our dark mode let me go ahead and create another frame next to it just like this and I'm going to place it inside so you can easily see the difference and I'm gonna change the background of this Frame one to something else I'm gonna use one of my Primitives here maybe gray 50 or gray 100 this one and now if I select this card I can easily change its mode I'm gonna change it back to light and you can just change it back to dark it's quite cool isn't it but I'm going to show you one more thing here I'm gonna set it back to Auto and here if I select this Frame 1 which is the parents of this card I can change the mode of its parents and the mode of this card will be changed as well so I'm going to select this Frame one and from here I'm Gonna Change it to dark and now as you can see the mode of this Frame one has been changed but the elements inside are also affected now let me show you something else okay so here I'm gonna name this Frame dark I'm gonna duplicate it it controls your command D let's put it here I'm just going to rename it to light and now I can just change it to light okay if I just get rid of this card I can simply select this card and if I bring it over here look what happens you see that it automatically changes its mode why because we changed its parent mode which is this main frame and if I select this card its mode is set to Auto alright great now let's take it to the next level I'm going to show you how you can localize your elements okay so basically what we need to do is create another collection here I'm going to go ahead and create another collection and I'm just going to rename it to text and here I'm going to create a string variable I'm going to name it product name and the value is going to be lemon so I'm just going to change it here to Lemon what else should we translated this label available in I'm just gonna copy it and here I'm gonna create another string variable I'm going to paste it here available in for this First Column I'm going to set it to available in so we just need to use the exact same values the location shouldn't be translated I'm just going to create another string variable let's call it price and the value is going to be 2.99 and we need one more variable for this button label I'm just going to copy it and just create another string variable paste it here and here okay so let me show you what's going on here basically I'm going to create two different modes for this collection the English version and the German version basically the English mode and the German mode so I'm going to hit this plus button and now we have two different modes I'm going to rename this first one to English like this and the second one to German now what we need to do is translate these values to German I already did that so I'm just going to copy and paste the values quickly there it is I hope they are correct and now let's go ahead and Link these text layers to our variables okay so I'm going to select the product name I'm going to head over to the text section and from here I'm going to click on this icon and under the text category I'm going to choose product name then I'm going to select this price tag again I'm going to link it to price then let's select this label that's why I created two different text layers because I wanted to show you this feature as well and I'm going to link it to available in and finally I'm going to select this button label and just link it to add to cart just like that now let's see how it works here I'm going to select the main frame the parent frame and if I head over to the layer section and I click on this icon now here we have another collection the text collection and by default it's set to Auto and here we have English and German I'm going to click on German now and there it is as simple as that here is our German version you want to change it to dark mode you can do that easily you can simply change it to dark and your card is ready before we wrap up this video I'm going to show you one more thing if you're working on a project and you already created hundreds of different color styles and you just don't want to go ahead and manually create all these primitive variables I have good news for you there is a plugin that you can use if you just look for styles to variable there it is this one you can just run this plugin and it will automatically create variables for you based on your color styles so it converts all your color styles to variables in seconds and that's amazing isn't it the other thing I'd like to point out here is that you can link a color Style to a variable how let me show you how I'm going to quickly create a color style I'm just going to select this one for instance and from here I'm going to create a color style I'm going to name it base blank and I'm going to hit create style so as you can see here I have this black color style now if I just click on this icon from here I can head over to libraries and I can just link this color sign to one of the variables we created okay and it's gonna be color base black just like that so you can still keep using Color science if you want and you can just link your color size to variables 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 soon

Channel: DesignWithArash

Views: 8,891

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

Id: fn4rP20U2UM

Length: 30min 29sec (1829 seconds)

Published: Wed Jul 12 2023