When to Use Component Level Tokens/Variables in Figma

hey everyone sorry for the delay in releasing a video lately both Mike and myself are hard at work uh one creating brand new course curriculum for Design Systems on UI collective.com and also building out a brand new site experience for UI Collective um both of which hope to launch relatively soon uh and then the videos will begin come much more uh frequently um so today we're going to look at uh when you should be using uh component level tokens or variables we're going to look at first off what is a component level token or variable and then we're going to look at it from the from a context of our own design system where we did actually decide to use a component level token or variable for our alert component just because we couldn't find the right combination of colors that would make our notification or alert stand out so it's a simple lesson today but if you're building a design system or you just want more experience it's something great for you to know so let's get started the first thing that I want to go over is what is a component level token versus what you might call a global token or variable again using the terms token variable interchangeably so here is an example of our Global surface tokens and what that might be referring to is you have one color which is applied to each of your different components so changing your master token or your master variable will affect all of your different components so as an example here we have our surface information we have our surface error our surface warning and our surface success all of which are tied to in this case just three components so your alert your snack bar and your batch this is a really good way to simplify your tokens and your variables because if you have a hundred components you know you don't want to have um 500 different variables or tokens that's not manageable for every everyone if you need to make a change to one you know ideally that change should be reflected on all of your components to keep consistency and what you want to avoid is component level tokens again tokens or variables where you have a color for each of your components so in this case an alert information a snack bar information a badge information go down the line so on so forth so you hopefully you see the difference in complexity between Global surface tokens and component level tokens however this does not mean that you shouldn't use component level uh tokens or variables there are specific scenarios where those should come in handy and we'll look at that next so now let's look at what it is acceptable to your component level tokens or variables and I just want to come out there right off the bat and state you don't really want to you know it should be really your last possible scenario you don't want to have a family of tokens variables for each of your different components that can get really messy really quick both in terms of like confusion for the design team that's using your design system and also for yourself in terms of Maintenance again ideally if you make a change to one token or variable that should make a change to all of your components you don't want to have to go in and individually adjust the color of each of your different components however that doesn't mean that you shouldn't at all cases you should really think about the type of component that you're building and whether or not the colors that you're using fits so let's look at an example so here I have our surface colors on light mode and personally I think they stand out just fine sure they you might think they could be a little bit lighter a little bit darker it's all personal preference however if I transition these same colors into dark mode so now our light mode surface colors will swap modes to dark let's look at what happens is our surface colors they stay a little bit darker and sure depending on the type of component that you're working with that is just fine but when we were building out our design system we couldn't find a right combination of colors that worked for all of our components again with the surface colors that work for each component including our alert our alert pose a little bit of a challenge so we had our light mode alert which I think is just fine however when those same surface colors were mapped to dark mode we personally didn't think that the background stood out enough on dark mode when working with something that the user should know again maybe it's an important warning or an error you really really want your notification or alert to stand out and if we made our surface on our dark mode a little bit lighter we found some negative impacts on other components so what we actually decided to do is create surface level variables specifically for our alert component so let's open up our variables here so here we have our surface success air warning and here at the bottom we have our alert success our alert information our Alert warning and our alert error the light mode color stayed the same but our dark mode colors are much more prominent you know they're much stronger much much more bold and the result of this is as follows so we have our light mode and now on dark mode is they do really stand out a lot more from the background again if it's a notification or alert you really want it to stand out and by creating component level tokens variables specifically for our alert component we're able to achieve what we were looking for and again you're probably asking is why did I just make that change Global is because when we did that we found some Downstream impacts that really impacted other components so in order to keep things simple and achieve the look that we were looking for we actually specifically for our notification or alert component created component or component level tokens or variables so again it was the last possible solution that we had and one that still fits but again I hope that gives you a brief introduction as to when to use your component level tokens or variables and just to wrap it up here's your friendly reminder to sign up for UIC collective.com your home for everything Design Systems you can learn to build a design system uh or also you can buy our pre-made design system right here and here's just our preview file uh where you get access to all these unreal components uh across light mode uh and dark mode it's about 50 plus components uh 3000 plus different combinations of properties variants uh best design system you'll find and I'll leave the link for this in the description below see you online UI Collective

Channel: UI Collective

Views: 6,439

Keywords:

Id: ExZy8xTsbHs

Length: 6min 53sec (413 seconds)

Published: Thu Aug 17 2023