Creating a Color System in Figma | 3 Easy Methods

as designers we all know that having a well-balanced color palette not only creates a solid visual language that makes the user experience better but also helps establish a brand identity that users will remember in this tutorial we're going to cover everything you need to know about creating color palettes and color systems in figma hey everyone it's Adrian here and today I'm going to show you the complete guide to creating color styles and generating fully automated color systems in figma so let's not waste any more time and dive right into the tutorial there are a few different ways that we can approach creating a color system like the one you see here and it all it all depends on the project size scope and complexity and with some web design projects you might be good to create just a basic color palette consisting of five to eight colors like you see here and while for some model and Web projects you might need a more extensive color system like for example the one that you see right here in the center we'll cover them both in this tutorial and let's start with this one first so let me just duplicate this remove all of these blocks and start a new one add a new rectangle and let's say that our primary color will be this purple color so let's click I pick the color select this color style now that I have this rectangle I'm going to wrap this into an olayered frame select it and click command ND a couple of times just so we have let's say nine blocks here and let's space them apart maybe like 32 pixels okay and I'll duplicate it for all of our colors so for blacks we will just need one and for a white we will also need just one for neutrals I mean for our main um we'll get back to that later so let's say we just wanted to create a basic color palette consisting of the primary color secondary color neutral black white and we'll add it right here so for a primary color we'll just pick one in the middle and the colors on the left will be your Shades and the colors on your right will be your tints so these will be lighter tint of your main color and this will this will be darker shades of your main color for the secondary let's say that we want to choose something similar on the Hue scale so maybe let's go for this uh Kind of Blue Hue for neutrals uh let's just go with the basic figma gray so just click here and we'll add a tint to that gray by picking it from the primary we'll see in a second so these will be our three main colors one black and one white I'll just add a stroke to distinguish it from from the background and to create our neutral color that has our primary brand color added to it we will just copy it over from here select our primary color and create an overlay so put it over our frame and reduce the opacity to let's say around 10 percent maybe even even five percent or let's go for something in the middle eight percent and uh let's pick a color from the overlay here so this will be our gray with a tint of our primary color added to it now that we have this created I will just you know what let me just remove the auto air frames just so now we can select them straight from the canvas select this gray click I again and pick the color from our gray with the overlay and let me just select them all rub them into Auto layout change the vertical placement and do the same with r black and white frames so this could be our main color palette and let's say this would be enough for our design work but we want to go we want to make take this a step further and we want to create multiple Shades and multiple tins just so we have more flexibility in terms of how we can incorporate these different colors into our design let's click on the fill right next to our main primary color and switch the color system from hex to hsl which stands for Hue saturation and lightness so we'll just close shift and click the bottom Arrow key to go a shade down and then do the same here so maybe just move uh one step below and let's select color next to our shade here pick the color from it go into the fill and then one more time shift and bottom Arrow key shift bottom Arrow key do it one more time and last time and this will give us a dark color with a little bit of primary color Blended in in here and for our lighter tint we just want to select the color laying next to the primary and do the opposite so increase the lightness and increase the saturation so shift and top Arrow key shift and top Arrow key let's repeat that for this color shift top the top we might need to go into increments of 15 let's pick the color from that color and increase the lightness just so it's almost wide and it has this a little bit of off-white added to it and I'll do the same for our a secondary color or accent color if you will select all of these rectangles pick a color from this secondary just keep changing modifying these color values and I usually I don't do this there are easier ways to go about it let me just finish this and we'll jump straight into them and with our Grays or neutrals we'll do the same thing pretty much and in here we might need to go into increments of five because there's not much room to play with here and this will be almost really really slightly bearish white okay now that we have this color System created let's start adding our Global Styles and uh I have these Styles already created so let me just remove them and it will add the wood one more time add a color to your Global style in order to create your colors color system all you need to do is go into these four dots here click on the style and then click on the plus button in and right here we want to name them so I will just create our main color palette first into a folder called Main and to create a subcategory of your color styles you need to add a forward slash before the name and this will be our primary color so let's call it main forward slash primary here we want to do the same thing and call it Main maybe accent here we want to do the same so main neutral Main black and just to give us a bit more flexibility I will just copy this gray color and pick a really slightly neutral that we could use for our backgrounds I'll create a new style call it Main and then light BG for a light background and maybe we will also need a color or our text on our light background because let's say we don't want to use pure black but let's pick a background color from our primary and let's call it main dark PG or dark background or text and yeah now if you look over to your right under color styles you will see a new category of colors that you just created and added and let's say let's give it a test run We'll add a desktop frame and see how our colors would look like in action Let's uh let's duplicate this Frame and split it in halves divided by two add it onto our desktop frame and duplicate it again and position it on the bottom so this will be a use case of a white dark text on a white background so let's pick a color from this slide VG and this will be a use case of a dark background with white text on top of it so I will add a text here by clicking T make it uh like 62 pixels position it in the center of this Frame and let's pick the color from our text learn how to create some color systems and let's add a button let's wrap it into Auto layout frame add some padding around and let's use our primary color as a fill and our text we'll just use light example and we can also add a call out here so let's select it change the case to uppercase and uh name a video tutorial and we can use an accent color to highlight this and in this example we'll see why we might need to create a color palette consisting of Shades and tints because if we were to use just our main color main accent color it might not be accessible enough so in this case we might want to use a darker shade of this color just so it stands out on this background just quickly space it apart maybe like 16 pixels from the description 24 from yeah maybe 16 from the top and then 32 here and let's select it all by holding command and drawing a selection with your mouse or trackpad and let's duplicate it and change these colors around so let's uh hit High and with this example we will need to use more saturated and lighter tint and this might stay the same so this is the manual way of creating a color system and Global Styles and let's now go over a more automated way of doing it so let's say we have a different use case we have a desktop and um for this example I'm not going to create an entire motherboard I'm just going to go into the plugins open up the unsplash plugin for an aesthetic aesthetic image so let's say aesthetic Browns let's pick this image and add a couple of frames and we'll we'll just pick colors from this image and for our primary let's say we want to go for this brown color for our secondary accent and we might want to go for something green and let's pick a few colors for our backgrounds let's say this could be our color palette that we just created and established by using a motherboard to create a color system out of it we need to right click on our canvas go into plugins and look for a plugin called Foundation color generated generator which is this one let's click run as for profiles I usually go with either and design or material design but for this example we'll just go with material let's change the name the primary and pick a color from from our primary color Let's uh create color styles which will be added to our Global styles on the right now let's hit on the palette here just so it creates a nice primary color palette for us just put over here and you can also create a token and that you can then hand over to your developer once you're handing this off and the all the color documentation so instead of having swatches here we can add a text box by clicking t drawing a selection copy it over and paste it here we can call it perm primary color tokens and let's do the same for our remaining colors here from the color palette that we just picked so one more time material is called this accent pick a color from the secondary color create Styles create color palette and create tokens and you would do it for all of your remaining colors that you have selected for the color palette and this way you would have a nice color system already documented all the information that you need and also with the accessibility recommendations for what kind of text you should use on this background there's also one more way of creating the color system and that's through using the material theme Builder right click on your canvas go into plugins select the material theme Builder create a theme let's switch over to Dynamic and here you will just need to upload the image of let's say your motherboard of or of your style guide I already downloaded this image so I'll just drop the image right there and my colors will be already generated under the material theme folder divided into System colors reference colors which will be split into primary secondary tertiary and error neutral and uh it's more hands off but you can actually adjust these colors if you switch over to your custom tab let's say you establish that you want to use this main color palette all you would have to do is go and copy the hex codes here paste them over apply the changes do the same for the secondary color and the process is trying to save the color styles as you make changes just need to be mindful that it's going to take some time and one more thing once you have those color styles added as your Global Styles in order to change them you have to click on any color that's being used click on it right click edit style either change the name or go into the properties change the values here now I just want to copy this hex code and paste it in here and apply the changes you'll see that while we are doing this if we go now to our color styles generated by the material theme you will see that they will be updated automatically so that's how you create your Global Styles and your color systems if you want to see a follow-up I will show you how to create style guides out of this the status that you can document and show to your developers or even share with your stakeholders and and clients to show them the whole documentation and the visual language and The Branding that you want to go with for any particular design project all right guys that's all for today's tutorial I hope you found it helpful and that you're ready to start creating your own color systems in figma lastly if you're interested in more I just want to mention that my entire UI design process for mobile designs is explained in detail in design manual ebook and you can learn much more about creating Rebel Styles and an entire style guide for web and the figure Master records or my Ultimate Guide to web design ebook that's available in the description below and so it happens that we're currently running a two-week long bundle deal where you can get all of my design products in one bundle and save up to 79 on this offer so make sure to take advantage of it if you're interested in that okay that's it guys thanks for watching as always don't forget to like the video subscribe for more content and hit the Bell notifications for more videos like this one this is your Adrian I'm signing out and I'll see you very very soon bye [Music] all right

Channel: UI Adrian

Views: 24,079

Keywords: color palette, color palette website, figma, figma tutorial, ui, ui app design, ui color, ui design, ui design app, ui ux, ui ux design, ux design, web ui design, website ui design, design system, figma basics, figma design, figma design system, figma tutorial for beginners, figma web design, ui design system, ui design tutorial, ui design tutorial for beginners, user interface design, ux design tutorial for beginners, color styles, color system, design system colors

Id: ZHhFWIq-viQ

Length: 16min 2sec (962 seconds)

Published: Thu May 11 2023