Create a Figma Design System - Color Systems Tutorial (Part 2)

hey beautiful people it's misco here and this is part two of the design series about design system hopefully you are ready to create your very first color style for your design system let's dive into it alright two disclaimers before we jump into it first if you haven't watched part one of this design series about design systems make sure to gently smash that link above and watch that it is fundamentally so important for you guys to watch that it helps you understand the atomic design framework and that will help you understand everything that we're doing in this video now second thing is if you want access to this design system make sure to check the link in the description i've also left you guys a beloved coupon so get 10 bucks off it if you really want it now no time to waste let me walk you through exactly how to create your very first color style for your design system there are many different ways to approach this and because every single project is so different some projects might require a lot of different shades of color some might not but this is the base and this is the foundation that i always build upon 10 shades of gray not 50 just 10 shades of grey and we have five shades of every other color now the importance of having more shades of grey is because the more shades you have for grey specifically which is generally the most commonly used shades in a ui design gives you more control over creating different hierarchy on a specific page so for example if you have a header that is let's just say i don't know let's say it's blue right and then you want to have like a sub nav right let's just quickly do this really quickly you can make it quite nice and then if for some reason the client said let's make it pop let's make this header like three levels deep then at least you have like a few more levels of uh hierarchy that you can create with your grays right this is probably the worst example that i could ever provide you but hopefully it helps illustrate why grades are important okay so it just helps you utilize different levels of gray to create more hierarchy in your ui designs if you limit yourself to five you're going to come across a moment where you just need to create more grays on the fly and you'd rather be proactive with it so with primary and secondary success warning and error i generally like to just keep it to five these are more splashy colors on the ui design so if i can limit it it creates more consistency in all my ui designs and that's why i've got it to 5 but like i said before it's not set in stone so you can go ahead and add 20 shades of gray you can add 50 shades of grey or you can actually just go ahead and add five more shades of primary secondary success whatever it might be okay so do whatever fits the project that you are working on then at the bottom you might notice i have two shades right for white and black some designers don't like to use white and black sometimes i like to use white and black in a specific design sometimes i might realize i just need white or i just might need a shade of black so that's why i have them included as well i don't want to go in and add hex coats directly to a design i like to have everything systematic because it just makes everything more seamless now you might realize another thing is with this uh color system why is this random 50 100 200 300 400 on this design system now this comes down to naming conventions so you just have to remember that when you no matter what you are creating in your ui designs a developer needs to develop it and when they're developing these components that could be it could be an atom for color it could be type scale it could be different ui components they need to think about naming conventions to create consistency you don't want to have naming conventions for gray very very very light and then gray very very light i mean gray light gray gray dark grey very very dark type sort of name convention it just becomes very messy really hard to scan really hard to read so one way is to reference an existing css framework so in front-end development css is cascading style sheets and this is how developers will create the these visuals in code tailwind css.com is one of the most popular css frameworks it's one of the more modern frameworks that a lot of frontend developers will actually use and they already have a naming convention which is from 50 to 900. so i'm simply adopting this naming convention and methodology in my ui designs so i don't need to reinvent the wheel right and num the numbering system is just a lot more effective than using words in general like very light what happens if you decide to integrate a different and another shade of grey do you say very very light but what if you already have very very light like how do you how do you sort of slip it in between and that's why numbering is effective now hopefully that gives you a very quick understanding of how this is structured and why we've done it now we're going to go ahead and actually create just one line because i'm going to teach you how to fish and then you're going to go fishing hold it now bring it back like this look at me and go when you go forward let go at the end like well that's all the rods in the water alright so example project guys i'm gonna quickly put down i've put down a frame and what i'm gonna do is i'm gonna plan out my primary colors so let's just quickly make this a little bit bigger so you can see it and we're gonna have five shades right so let's just draw this down one two three four five okay so there's a little bit of thinking along along the way so make sure to follow along so what we're gonna do is let me just quickly grab sorry i'm gonna quickly grab the color from here so it's this one alrighty so let's go ahead and pop our main one into here okay so we've got the main brand color generally your client will have will say this is the blue for our primary color and you'll pop it in now you will need to then figure out what would be the following shade so one thing i like to do is i like to convert the hex code that i pop in into a hsb or you could use hsl whichever one you're comfortable with hue saturation and brightness right now what you can do is hue is adjusting the actual color right the hues and this is the saturation and then this is the brightness so you can if you turn up no brightness it's going to be black right so what i like to do is i like to go ahead and just move the saturation down a little bit and that will help me sort of take the color out from it and also make it a little bit lighter then what i like to do is i also like to just go ahead and eye drop that one and reduced that color as well so you can see it sort of gets a little bit lighter and lighter and lighter and then obviously for this one you can also do the same so you turn down the saturation now sometimes you might realize oh it starts to turn into a gray well if that's the case you can fiddle around you can like turn down the i turn down the lightness and it gives you a little bit more color um instead of going straight into the grays you use the the lightness of the color to create that separate that level of separation so feel free to do whatever you find most comfortable if your client's already giving you a color palette feel free to just pop it in right and then obviously you've got your darker shade which will be a much darker and you might just want to turn the darkness the brightness out uh down so boom you've got your primary colors set obviously this is an example i'm rushing through it but i'm trying to help you guys understand how you can create your color palette now now if you notice if i click on this rectangle everything is sort of hard coded in it's defined by setting a hard hex code on the field what we want to do is we want to get to a point where our color palette is all defined by color styles which mean you can simply have a nice palette here no matter what you're designing so if i'm designing a rectangle i don't need to paste the code in anymore i can simply just click on this and i can re-utilize whatever it might be alright so i can go here and i can click this so what we want to do here is we want to start to give this a nice naming convention so we head over to our color styles hit the plus icon just for example i would normally call this primary and i will call it main and i might even say it's 500 but because i've already got some existing colors in my palette i might just tweak uh tinker this to primary one okay just to help illustrate this example so once you create your very first color style for your primary you would see that it's got primary one and it's got your main 500 then you will go ahead and do the same for this one hit the plus icon primary one and you might call this main let's say 400 right boom and you can see that it will cascade down then you've got this one go ahead you can add primary one and you can say main and it's let's say 300. boom and then you've got primary let's go uh whoops that's okay that's it cool so primary one and then you can say main i think it's 200 right 200. cool and that's all done and then this one might be let's say 900 because it's all the way at the end so let's just put whoops put this in primary one slash main and that's that's going to be the darkest oh let's say 800 it's going to be the second darkest right so now if we go ahead and let's say look at our buttons you can see as you start to build out all your colors and you've got all your topography and you've got all the atom set which you will learn in episode one about the structuring and hierarchy of this then all your buttons can actually be pulling through the main primary color so if we actually went ahead and let's just quickly grab all these buttons quickly do this one bang bang bang bang bang bang bang bang make this all the primary uh this primary color go ahead and let's say we ever decide to change this color to i don't know for example let's just change it to red just to illustrate this or like a pink boom everything in your design system will be updated so you only have to update it once and this is the power of a design system within figma so make sure to when you are creating your design system make sure to follow this series because we will build the atoms first the atoms are the things the little building blocks that create all the molecules which is like a button this button has a label and a color and when you get the atoms right and you've defined them all well and managed in your design system when you're creating new elements you simply pull them out you don't need to redefine them ever again so hopefully you found this video extremely useful i'm excited for you to now take the knowledge of learning how to fish and go fishing and deciding to create your very own design system make sure if you have any questions make sure to leave them in the comments below and in the previous video a lot of you guys were commenting and leaving your appreciation for the videos and i really do love that so if you do enjoy this video don't forget to also let me know in the comments below it really does make my day and if you want to get access to my fully fledged design system with a lifetime of updates make sure to check the link in the description below and get that 10 bucks off all right guys i will see you guys in another video very soon [Music] you

Channel: Mizko

Views: 21,627

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma design system, design system, ui design system

Id: uSZirUYhtf4

Length: 11min 33sec (693 seconds)

Published: Thu May 06 2021