3 Tips to Master Figma Variables | Figma Like a Pro

if you're looking to master figma variables this video is for you where today we're going to start off by looking at how to swap variants using your figma variables as you can see right here before we move into how to organize your variables properly in different collections before looking at how to choose colors for your dark mode again three really important things that you should know if you're looking to master figma variables let's get started all right the first thing we're going to look at is how to swap your variance in a prototype using figma variables so let's look at our setup so right now I just have this basic purple button and I have three variants of an image I'm of course a big F1 guy so what I have here is a Red Bull car a Ferrari car and then a Mercedes car so let's go ahead uh and set up our uh UI to start just so you can have a quick visual as to what it is we're going to be doing so we're going to have a button and then we're going to have little image we're going to build a little image Carousel so let's set this button value to change image and what we want to have happen is when we click this button we want the image to change so we want our red bullt that go to our Ferrari to go to our Mercedes so in order to do this let's look at setting up our figma variables to start so I'm going to go into my local variables and let's create some string variables here so first things first string variable and the value of our string variable needs to match the name of our variance so in this case we have our red as the name of the variant we have Ferrari as the name of the variant and we have Mercedes as the name of the variant again so we need the value not necessarily the name but the value of the string variable to match the name of our variant so let's go through and build these together starting off with our Red Bull so we have Red Bull and just notice how it's lowercase and again figma variables is case sensitive so our Red Bull car will be equal to Red Bull all lowercase let's then look at our Mercedes I mean our Ferrari so we have our Ferrari again Ferrari in lowercase so our Ferrari and the value it needs to match the name of our variant Ferrari and then let's do one for Mercedes we're going to set this to Mercedes beautiful so now that I have uh a copy of my Red Bull variable or Red Bull variant I now need to assign a variable to this variant again I need to connect the two or else figma is not going to know which is which so in type so when I select my instance next to uh the dropdown I have this little variable indicator so I'm going to assign the variable Red Bull to this specific variable variant excuse me so now let's go ahead and prototype it so I hit the change image add an interaction I want to set the variable Red Bull to Ferrari and then again on click I want to set the variable Ferrari to Mercedes so let's go through and have a quick preview so now when I hit change image I can see that that changes to Ferrari and then when I hit it again I can see that it then changes to Mercedes and the reason that happens is because I set it up where I set the variable Red Bull to Ferrari and then Ferrari to Mercedes and that is a real quick overview as to how you can prototype using your figma variables in order to swap your different variants all right now let's look at the hotly debated topic of actually organizing your figma variables now when we're organizing our variables for Design Systems or whatever we like to break it out into three different collections so we have our brand collection our Alias collection and our maap collection now what's the purpose of these uh each of the three and why is there a tree here so your brand collection almost look at them as if it's the like the roots of a tree so they're all your basic brand colors and they're setting the foundation uh for what will be your mapped collection a little bit later on so again they're not assigned a purpose or role what they are are really just their hex codes and their purest form your Alias collection is where you're actually assigning the brand colors of purpose so this is where you're taking your brand colors and assigning them a role like a primary color a secondary color a neutral color and then you take your Alias colors and you bring them into your mapped collection you can almost look at these like the leaves of a tree where you're branching out all of these different colors into a specific role so so what's the color you should use for an action button what's the color that you should use for text what's the color that you should use for things like text hover all those different kinds of specific roles uh that elements can have now I know that might be confusing if this is the first time seeing this uh so what we're going to actually do is just look at a couple quick examples together we build out a very miniature Library all right so if this concept is new to you let's go through and build out just a very miniature miniature uh variable Library together again just to walk through you through uh the topic now if any of this is confusing whether it's the naming convention or the concept overall we do have a ton of great videos on building out libraries where we go through this more in depth I'll leave some links in the description uh below so but if we think about the UI Collective Brands you know we have this nice purple color here so let's start off in our brand collection again we have our brand collection our Alias collection and then our mapped collection and all of them are empty right now so let's start off with our brand so let's start off with our purple again let's uh oops purple put this in the fer so purple 300 so let's assign that color there let's create a another variable so our purple 200 will be that middle one and then our purple uh 300 oops sorry or 100 will be uh that one uh on the end there we go so we have our Purple colors in our brand collection and again remember your brand collection is really just all of your brand colors as they stand you know the hex codes in their purist form what we want to do then is bring these into our Alias collection but give it them almost like a purpose so again think about UI Collective our primary color is the purple so this is where we want to give assign uh those purple 300s 200s 100 a specific role so primary your primary light your primary lighter so let's create a variable this is going to be our uh primary again we'll keep it uh lowercase and we're going to create an alias so we what creating an alias does is it actually just connects your Alias collection to your maap collection again you don't want uh to use your Color Picker uh for your Alias is what you actually want to do instead of custom hit libraries and then connect uh your primary color to your brand color so in this case our primary will be our purple 300 uh one thing I'm going to do here as well let me just go back let me rename this uh just to keep it consistent so we'll go lowercase p Alias here we go all variables so our primary and let's uh create a new group actually this will be our primary beautiful so let's then go with a uh primary light and again create the Alias don't forget to do that and tie that back to the brand color so in this case it's our purple 200 let's then go with a primary lighter create the Alias which will be that 100 okay so now we have our primary colors so let's go ahead and think about a button which of these colors should be the surface color for a button so we have them assigned as primary but do we want the surface to be primary do we want it to be primary light in your mapped collection is where you're actually giving it that specific role so let's go into our map collection and let's create um a variable that we're going to call our surface action and what we want to do that is create the Alias but instead of tying it back to our brand collection we're actually tying it back to our Alias collection so we're saying that a surface action for a button will be our primary purple let's now look at text so if we want a text on action we might want that to be uh lighter again so it stands out from that purple background so it's going to be our primary lighter so now when we go ahead and build a button let's just say click me add some Auto layouts add a quick fill what I'm going to do is apply the surface color uh that we built again in our mapped collection so surface action and our text will be our text on action and that's a real quick walkthrough as to how we like to organize our figma variables in different collections all right so now let's build on uh what we learned in the last part of this video and look at uh dark mode color variables you know dark mode especially for those who are building out Design Systems is one of those things that's super confusing a question I get all the time is what are the colors that I should be using for my dark mode but luckily for you it's really not as daunting As It Seems so if we open up our variables here in our maap again if we look at our Button as well that we built together so we have our surface action which is our primary color and our text on action which is our primary light so we have our surface action again this purple and then our text on action which is that lighter purple what I like to do for dark mode and again this isn't necessarily the perfect approach for every single scenario again it's super important that you still go through your proper accessibility checks looking for things like color contrast is really just to inverse them so what I mean by that is if we add another mode and let me uh expand this out just a little bit so if this is our light mode and this is our dark mode what we're going to do is set uh our surface action on our dark to our primary lighter and then the same for for our text on action so this will be uh just our primary primary there we go so now if we have uh let's look at how applying those modes and just to show you the end results so what I'm going to do then is change that and then our maap is that dark so essentially what I've done is I've really just inversed the colors between light mode and dark mode in our mapped collection um in order to achieve our dark mode thanks for watching today's video everyone just want to encourage everyone to sign up and join our community at UIC collective. it's totally free to join uh for all questions relating to Design Systems figma variables uh and more we also have a ton of great free resources uh on our website so be sure to check those out I hope to see you online UI Collective

Channel: UI Collective

Views: 2,181

Keywords: figms, figma variables tutorial, figma variables prototype

Id: 60RkBgBuLOk

Length: 11min 16sec (676 seconds)

Published: Mon Mar 25 2024