Harnessing the Power of Color Tokens in Figma: A Step-by-Step Guide to Design Systems

hello everybody Welcome to my channel so if you've been following a series you know that we've been including creating a design system from scratch using uh figma's latest feature which is variables and in in the previous video we learned how to create the actually the um the spacing tokens both spacing and Corner radius and also in a couple of other videos we also learned how we can create um different shades of our color palette here as you can see we have all of them in our variables and there's also another video about how you can create a like Rich typography system for your design system that you can use in your product so I'll put all the links to those actually put a link to the playlist in the down in the description and also in the top right corner so you can follow along and create this by yourself also whenever like we we're finished with this I'm going to publish this whole design system to figma community so make sure to check that out too and leave leave a comment uh let me know what you think and yeah let's get started quickly so in this video we're gonna talk about how we can create color tokens out of these colors so these are like our base materials and now we want to make them usable somehow that you know give them a title a description a character so let me zoom in I've divided so everyone as mentioned everyone does things differently but like by experience how I do these how I do my Organization for the color tokens is uh based on actually the type so right now I've divided the color tokens to grayscale primary secondary error warning and success and inside of each of those I've also divided them to surface border text or icon so right now let's go ahead and say this one in grayscale we have the surface the main is the default one is pure white and don't worry about the themes like dark mode and like that's going to be another video how you can create dark mode and light mode in figure but yeah we have the default for the surface and there is the false subtle which is a little bit darker and obviously on the dark when it's going to be a little bit lighter and so on and so forth then we have the Border also for the Border we have default and disabled actually I'm gonna add the disable to the text here too and maybe let's let's add it to the surface too because you never know you might need it so default that's gonna be disabled and the color for that is gonna be charcoal again but maybe something like this or um that's too dark so yeah this one is this one's good and also I'm going to add the same thing for the text say volt and the code because it sticks it should be a little bit darker so yeah let's test it out and yeah I think that that should do it all right so um let me explain one more time so I've divided the grayscale to three different um types which is the surface then there is the board there and also takes icon and On the Border you can see there is a default one which I already use here as you can see the the this is the color you can choose whichever of these color you want but I want to like do the uh um have the borders like this and yeah since we are using these editing these are gonna be like uh like a piece of cake basically all right that was for the border for the text and icons I have the title so I've divided this based on typography and um so it's titled body subtitle caption negative which is when you have a background that is the arc for example an image or like you want to use this one on a button like if the button color is dark you want you need to have a negative text like a like a white text so yeah then there is a disabled which we created then we go to the other colors other types we have the primary secondary error warning and success and on the primer we have again surface so pay attention that we have four types of colors in the surface we have the default which we can use for the buttons also default dark and light be we can also use four different size of the buttons or yeah basically anywhere that we need also there is a default startle so if you want to have uh maybe maybe you want to like go a little bit crazy in some designs and use a different background other than this one like the full startup or the surface based on your primary color so you can use this one as you can see I've added this one all over the other types so yeah that's going to be usable in future and then there's the border so for example let's let's say there's an input that you want to like create and that in the active State you can use the default default or default dark on default light and also for the text and icons I chose a little bit darker shade for this one to like increase the contrast because yeah sometimes it's not that easy to use but yeah again you can edit these based on your brand and guidelines so yeah as you can see this is also link or label so yeah um because there are some times that you want to create a label label underneath an input so maybe you want to use any of this color for example maybe it's an error you need to use an error label maybe it's a success message you need to use a successor Maybe I can even like make this a little bit darker yeah something like that so it's more readable but yeah that is basically it so let's go ahead and group these and create them in our variables okay so let's start actually I'm going to go to the tokens um let's um start right here so I'm gonna group these after after we're done with this but let's call uh call this one it's going to be color and let's call this one grayscale actually let's call this surface um or actually it's gonna be I need to group them after I like create them so it's gonna be default subtle and it's gonna be what's this one it's uh chill Grill and you you can see the beauty of it right away so Library it's gonna be children it's gonna be 50. and then I'm gonna create another one color default and it's gonna be charcoal because it's pure white so let's just select this one so we can continue and maybe decrease this a little bit and um yeah let's go ahead and create the others again that's also this disabled for the disabled we're gonna go with chart sorry charcoal I guess 200 yeah let's see oh nice 100. um actually also creating these are um you need to I already examined this on like on other designs that I I want to create unlike mock-ups so yeah I think these are gonna go well with our design and then let's group this first so I'm gonna new group from selection and I'm gonna call it let's um call this one grayscale slash surface now you can see we have a grayscale and also I'm also gonna group these um actually let's group it also in the color Ed colors basically because we have the tokens here and that's it so that's that is a grayscale I know like um the this is a three of um colors that you might think it's gonna be hard to use but while using variables we we're just going to search for the name so as you can see we have defined the name easy like easily by grayscale primary and if you want to go super specific you can like type primary text you can easily find it and also we can add the description and make the design system more richer like more detailed but yeah let's go ahead and do the other ones so let's go to the grayscale create variable color it's gonna be default and by default it's going to be border let's go in the chilled Gray shield and shield grade 300. and then again um disabled and for disabled we're gonna go with charcoal 100. again group them in the group form selection that's going to be called border so on and so forth I'm gonna create the grayscale completely then I'm just going to duplicate everything so you don't have to see all that stuff in the video but yeah let's go ahead and again tap on the grayscale create variable color it's gonna be title and it's and the color should be chilled gray and for the sugar we're gonna go with 900 I guess let me see yeah it's not I remember I used this again another variable it's going to be color it's going to be body text and for the body text we're gonna go with and that's again we're gonna go with 800. next one subtitle again chill Gray subtle is going to be 700 I guess let's see no no 600. all right and the caption is 400 caption chill Gray 400 and um we're gonna have the negative or white maybe what do we call it maybe I don't want to like call it negative because um um because it's not a common word for the text so maybe we can call it white here or um you can call it contrast or um let's see for now I'm gonna just use negative and then like in the future we can edit it yeah I just don't want a video to get pause for this so the color should be um charcoal 50. and there is also disabled and the disabled is gonna be because it takes obviously it's going to be a little bit darker so you can see this disabled it's a lot lighter and this one is charcoal 300. charcoal 300 and again group them new group from selection and it's gonna be text and since we cannot use slash here we can go with basketball backslash text icon all right I'm just going to duplicate this one and create the rest and yeah you don't have to see that and I'll see you in a sec all right I'm finished with creating the other colors I also rename the spacing onboard the dimensions and if you open it you can see spacings and coordinate radius if I open the colors you can see that we have all the Styles here I mean all the color tokens that you wanted to have here in this section so you have the grayscale surface for the text icon again for the primary goes as well secondary error warning and success and now we have a complete color token that we can use easily in our future designs and in another video I'm going to show you how you can create different themes via these ones so yeah stay tuned for the next video also make sure to follow the other videos and in order to see how we've been progressing you know design system but yeah that's thank you that's it for this video again thank you for watching and leave a like let me know what you think on the comment section below please subscribe to the channel that'd be a huge um yeah that'd be a huge help and yeah I'll see you in the next one cheers

Channel: Undesign

Views: 438

Keywords: Figma, Figma Tutorial, Color Tokens, Figma Variables, Design System, UI Design, UX Design, Web Design, Color Management, Figma Color Tokens, Figma Color Variables, Learn Figma, Figma for Beginners, Advanced Figma, Figma Techniques, Web Development, UX Tutorial, UI Tutorial, Web Design Tutorial, Prototype Design, Design Principles, Figma Workflow, Design Tutorial, Figma Design Tutorial, Figma Interface, Color Theory, Color Consistency, Design System Colors, Figma Color

Id: br-a0-w3KKs

Length: 14min 44sec (884 seconds)

Published: Sun Jul 09 2023