Creating an Advanced Figma Color Variable Library

foreign so we're going to show you a little bit more advanced color mapping today working with variables in figma which of course is the newest feature to come out of config 2023 so let's open up our local variables here just to give you a demo as for what we're going to be working with today so we're going to start off by mapping our brand color variables before we move into our theme variables which are mapped back to our brand variables and then lastly we're going to look at our mapped variables so things like our text our surface our border so on and so forth which are tied back to our theme variables which are then tied back to our brand variables as well and then I'm going to show you why that's so important so we're going to build a little mini component so I can show you how they're all tied together this template that we're working with is available for download for free so go ahead link is in the description and let's get started so what I've seen a lot of designers doing when they're building out their variable libraries transferring their design system over from their tokens to their variables is they tend just to do one at a time they just go down the list here from your theme primary your theme primary light all the way through your text your surface and your borders but that's not actually the right way that you should transfer over your current color Library over to variables you should start off with your brand colors and then have your theme colors based on the brand color so if your brand color changes your theme colors change along with it and you don't need to go through and update one by one by one by one so that's what we're going to start off with today is we're going to start off with our brand colors now I'll only just create variables for the blue I'll let you pause the video and go through all the variables for the rest of them I won't let make you sit here and uh watch me go through all those so let's just get started with the blue for now and then I'll leave you on your own to do the rest so let's open up our local variables and let's create a variable and the first one will be for our blue darker let's rename this to blue dash darker now this is just the convention that I'm using I've seen designers do blue darker whatever really works with you but for now we're just going to go Blue darker and the color that we're going to be using is this one here so I'm just going to take that and paste that in and then I'm going to create another variable for our blue dark blue dark and we're going to go with this one here color blue default and let's go down one more blue light and let's do our blue lighter so just a standard way for which we add our color variables and one thing as well is let's rename our collection to brand so this is the point where pause the video go through all of these colors create your your color variables still within the brand folder for each of the colors that you see here again this template is available online Link in the description it's totally free and you can follow along with us so go ahead pause the video here and let's uh let's keep going so hopefully by now you have something that looks like this where you have all of your brand colors mapped so earlier on in the video we looked at mapping our blue so hopefully you would pause the video and gone through and mapped out your teal your purple your gray so on and so forth so that you have something that looks exactly like this next let's go that next level down where what we want to do is actually map our our theme colors back to our brand colors again the reason being is in the future if a brand color happens to change you don't have to go through and map all of your colors again one change to your brand color will change your your theme colors and even things which we'll look at later on in the video like your text colors in your surface colors as well so let's go ahead now and start mapping all of our theme colors back to our brand colors so I'm going to open up our local variables again and let's create a new collection and we'll call this alias now what we want to do is let's create um variables for each of our different theme colors so let's start off with our primary again we don't need to put the word theme in front of it and one thing you'll notice here is our value is currently set to White now what a lot of people would do is they just take our blue default hex code so in this case 1d7 AFC but what we want to do is map it so I'm going to two finger tap and create an alias of that value open up our library and select blue defaults so now our primary color is tied back to our blue default let's keep going down the line so I'm going to create a primary light and I'm going to tie this back to our blue light I'm also going to create a secondary dark tie this back to our teal dark secondary teal default secondary light our teal light let's keep going neutral darkest will be our gray darker troll dark will be our gray dark neutral will be our gray default or neutral light will be our gray light and our neutral lighter will be our gray lighter again I'm not going to sit here and make you watch me go through all of these together now's again is a good time to pause the video go through the rest of the list and we'll be right back so now you should have something like this where you have all of your theme colors mapped back to your brand colors so again if a brand color changes your theme colors will change along with it but we're not done just yet because we still have colors for things like our text our surface our borders our icons so on so forth and again if you're working with a really complex design system maybe you work for something like a bank where that has a bunch of bunch of different colors in their library to choose from some sub brands that have different colors than the than their main brand it can get really really complex so what we now want to do is map things like our surface colors or border colors so on and so forth back now to our theme colors which of course map back to our brand colors so we're creating a little bit of a color mapping web but it really works out in the long run so let's go ahead and get started doing that now so again let's open up our local variables and let's create a new collection and we're going to call this mapped and let's just collapse that and let's only do two of each so we're going to focus on two of the text two of the surface two of the borders just to give you a visual as to how these things can get mapped so let's create a variable color variable and we're going to go with our text slash action and when we put that slash what's going to happen is I can see it categorizes things nicely and again if you're working with a really really complex color Library keeping yourself organized is so so important I cannot stress that enough but our text action so this would be something like a link is mapped backed to our primary our theme primary which is all the way up here which is mapped back to our blue default so when we set this map back to our primary it's automatically mapping itself back to that blue default so let's set that to our primary so create an alias and we're going to search for our primary so now our action is set to our primary which is tied back to our default and let's do the same for our text disabled text again Dash disabled and we're going to tie this back to our neutral amazing so we've got two of our text done I'll leave you to do uh to go through the rest on your own and now let's do a surface so we're going to go with our surface let's go with our action one surface action one and that's going to get mapped back to our primary and let's also do a surface success surface success which is tied back to our success light oops excuse me success light and let's then go through and do a couple borders so we're going to do our border primary and our border secondary so let's go with our border slash primary which in this case is our neutral light our libraries are neutral light and let's then go with our border oops keep losing ourselves here border secondary which is going to get set to our primary so we can see here that we have some text set to primary and some border set to Pro Set to primary as well and that's totally fine feel free to mix and match they don't all need to be separated out so perfect now that we have a couple examples for our text our service and our border I'll leave you on your own to go through the rest that are in this template and map those back next I'll show you why this is so so important so now I'm going to show you why this is so critically important that you map your colors correctly and you don't map Things individually so let's draw a basic component which will be a button so let's just say button and again we do have a button video available where you can learn the right way to build a button because believe it or not there is a right and wrong way to build a button and let's just collapse this again this will be super simple and we're going to add Auto layout so right click add or Auto layout and we're going to put that into a container for now let's just change this to our white and let's set our fill to our surface action one so that's already already looking like a button let's go ahead and rename this the button maybe let's add a quarter radius for the sake of doing so and let's create a component now this is set to our surface action one and let's go back here and let's give ourselves a visual so this is set to our oops where's surface our surface action one which is our primary and our primary theme primary is set to our blue default which is this code that we see here now say there's a change in our brand colors and let's go through a visual of that so I'm going to open up our local variables let's go back to our brand colors and where's our default here so say there's a change even just a subtle change I can see that now that our button despite just being mapped back to our surface action 1 is now changing along with it so I can see now that everything is tied together so if you do need to make changes to specific colors maybe your brand is going through a rework a reorganization however you want to call it you don't actually need to go through and change the color codes individually all you need to go back and do is adjust just the one color that might be changing and that will carry forward to the rest of your brand

Channel: UI Collective

Views: 13,268

Keywords: figma variable library, figma color library, design system color library

Id: QOGJiU8ipA8

Length: 13min 32sec (812 seconds)

Published: Mon Jun 26 2023