Design System & Figma Variable Set Up - Full Tutorial

I live and breathe design systems. I literally build them for a living. And

yeah, my LinkedIn's not totally up to date. Sorry about that. And it's been

date. Sorry about that. And it's been about two years since I started teaching design system content. And lately, I've been seeing a lot of other people taking the things that I teach and adding their own twist to it, but they're missing key

parts and kind of leading folks in the wrong direction. Like they don't live

wrong direction. Like they don't live and breathe it like I do. So, I made this video uh to walk you through setting up your Figma variables step by step, the context of a real design system. We're going to take it slow.

system. We're going to take it slow.

We're going to go through each collection and talk for the little things that actually matter that a lot of other people are missing. And hey, if you want to work with me, the link's down below. Or if you're into what we're

down below. Or if you're into what we're building here at UI Collective, you can support us by grabbing the academy. It

comes with premium courses, a free design system audit, premium templates like our collective kit design system, and we're launching interview prep and case studies soon, too. So, be sure to check that out. I'll also put the link to that down below. Okay, so welcome to the master class on Figma variable

mapping. Now, there's a reason I'm

mapping. Now, there's a reason I'm actually filming this video is I've been filming uh content on design system setup for the better part of two years now. And what I'm seeing now is a lot of

now. And what I'm seeing now is a lot of creators taking the same concepts that I've taught and adding their own twist to things and giving people a lot of wrong advice. And I'm getting a ton of

wrong advice. And I'm getting a ton of questions because of that as to why I did something one way but someone else did something another way. But the

reason being is that other creator wasn't thinking about a certain use case. So, this master class is meant to

case. So, this master class is meant to alleviate a lot of those concerns and truly be the one-stop shop for your Figma variable setup. Now, little bit of a preamble is I do this for a living, okay? I've built over 50 plus design

okay? I've built over 50 plus design systems. I have dozens of enterprise clients. The team and I work with, we do

clients. The team and I work with, we do this and we live and breathe design systems, Figma variables, design tokens, token studio, everything to do with this concept. Okay, this method is tried and

concept. Okay, this method is tried and true. I can speak to why. I can speak to

true. I can speak to why. I can speak to a lot of the nuances that not not a lot of other creators can't speak about because I have the experience that they don't have when it comes to building design systems. Okay? So, you can really

trust me on this. And I've probably built over 100,000 components and I like I build components 24/7. I build them at 11 p.m. at night. I build them on my

11 p.m. at night. I build them on my birthday. I build them on Christmas. I

birthday. I build them on Christmas. I

really do it all the time. So, with that little bit of a preamble over as to why I'm filming this video and sort of my expertise in this topic, uh let's dive right in. Now, when it comes to your

right in. Now, when it comes to your Figma variable setup, there's two different approaches that you can take.

One is the three- tiered approach, which I've covered in the past, which leverages a brand alias and a mapped collection. Now, there's also a

collection. Now, there's also a two-tiered approach, which most people are already pretty familiar with, which is a primitive and semantic. This is

generally what Figma uses in a lot of their tutorials. It's what a lot of

their tutorials. It's what a lot of other popular design systems out there like Untitled UI, they use the primitive and semantic approach in the grand scheme of things.

I know when titled they have about five or six different collections uh but for the most part they follow the primitive and semantic collection. Now when it comes to my enterprise clients we use the brand alias and maps because it's a

little bit more scalable. We're usually

working with multibrand design systems and housing all those different brands in the alias collection is a little bit more cleaner than than baking them into the primitive collection which would house a lot of our more uh raw

variables. So it's just a little bit

variables. So it's just a little bit cleaner. Now, one of the myths that I

cleaner. Now, one of the myths that I hear all the time from a lot of creators covering this content is that a two-tiered approach is absolutely not acceptable. If you're using a two

acceptable. If you're using a two two-tiered approach and you are doing something wrong, that's not the case.

Okay? If you're using a two-tiered approach in your design system, it's not it's not the end of the world. It still

works. It covers the basic functionality. It can cover the use

functionality. It can cover the use cases that you need. So, if you're using a two-tiered approach, you don't need to overhaul your design system in order to make the three- tiered approach work.

Okay? I want to cover that right away.

If you're using a two-tiered approach, it's totally fine. My preference and the preference of my enterprise clients is to use the three- tiered approach that we're going to be covering today. Now,

at a high level, your semantic collection is usually your mouth collection and your primitive collection is usually your brand and alias collection. we find it a lot more clean

collection. we find it a lot more clean to uh house our multibrands inside the alias collection than inside our primitive collection which usually houses a lot of other variables. So

today we are going to be covering the three- tiered approach to your design token architecture specifically for colors but we're also going to look at responsive collection as well. Okay. So

inside this three- tiered approach let's focus on our brand collection to start.

Now, the game plan today is I'm going to walk you through each collection and then we're going to build out that collection. Whereas in other tutorials,

collection. Whereas in other tutorials, I usually just build the collections one at a time. We sort of miss a little bit of the context as to why I might be doing certain things. Now, with your

brand collection, it's everything in its purest form. Raw color scales like a red

purest form. Raw color scales like a red scale, a blue scale. Even if this red scale might break out into error or primary, like you think about Coca-Cola,

their primary color is red and they're likely have an error color for things like form fields, which is also red.

Inside this brand collection, we're not separating that out yet. What it is, we're just adding all of our different color scales all into one collection, which if you think about like a sort of

a a triangle, the if you inverse a triangle, so flip it upside down, the top of that triangle is your brand collection because it houses absolutely everything. And then what we're going to

everything. And then what we're going to do is we're going to condense all of our variables down to the mapped collection where it's such almost like half the number of variables in our brand collection is what we're actually going to be using in our components itself.

Okay. So, the most important piece of that is all of your raw color scales.

So, also too, you're also going to have font weights and styles. Now, these are going to be included as string variables. So, like word variables that

variables. So, like word variables that you're going to apply to your text styles. So, this would be something like

styles. So, this would be something like enter as a string variable and then enters font weights like light, regular, medium, bold. If you're confused about

medium, bold. If you're confused about this, I'll show you very shortly once we start demoing the brand collection. So,

we're also going to have our raw font weights and styles. And the reason why we're including this in the brand collection is because it usually changes a little bit less frequently. But we're

one thing we can also do is we can talk about how this might change across some of your different brands if you do have them. Okay? It's one approach that we're

them. Okay? It's one approach that we're going to look at. Also too is we like to usually have one large number scale.

This helps maintain consistency in your text sizes and more. Now, when it comes to this, I'm going to preamble with this is all of the numbers in your scale should follow a particular grid. Should

always be a multiple of four, always a multiple of eight, something like that.

One mistake I see a lot of creators uh talk about when they cover this concept is they jump between different multiples, multiples of four, multiples of three, uh multiples of seven I've seen in one case. And what that actually

causes a lot of inconsistencies in your design system because the sort of the var variables inside things like your spacing and your your text all of a sudden jump a different amount every

time. It's not like the nice clean

time. It's not like the nice clean multiple. Okay? And we're going to cover

multiple. Okay? And we're going to cover how to do this the right way very shortly. Ultimately, what your brand

shortly. Ultimately, what your brand collection is is everything in its purest forms. Things don't really have a value. It's just simply numbers. It's

value. It's just simply numbers. It's

just simply color hex codes. That's it.

So, we're not getting into assigning anything in particular role yet. That's

what we're going to look at in our alias and also our mapped collection. Now,

we're going to build out this brand collection to start before we look at our alias. But to continue, when it

our alias. But to continue, when it comes to your colors, there is a couple different approaches that you can take.

Well, really two. So, one of which is to use this type of methodology naming where you go red lightest, red lighter, red light. You have your red, which

red light. You have your red, which would be your primary red in this case, your red dark, your red darker, your red darkest. Now, one of the reasons why I

darkest. Now, one of the reasons why I don't necessarily like this approach is it's not as scalable. I have seen a lot of creators cover it. I've used it in the past, especially when I'm working on

more more simple tutorials, but I like to use what's called a 100 scale. So, we

the numbers increase by specific interval. Red 100, red 200, red 300, red

interval. Red 100, red 200, red 300, red 400, red 500, red 600, red 700. And what

this actually allows us to do is say down the line we need a lighter color that's lighter than red 200 but darker than red 100, we can add a red 150. So

it allows us to scale up our design system a little bit more. Whereas using

approach one, which I have seen a lot of uh and I'm seeing a lot more recently actually is it's a little bit more difficult to scale. Okay? Because what's

between a red lighter and a red light? I

don't know. Okay. So that's why generally you prefer to use the 100 scale when I'm working within my brand collection and even inside our alias collection as well. Now the most

important thing you can do inside of your design system is to set up your variables uh your color scales correctly. So what I'm going to do is

correctly. So what I'm going to do is I'm going to create a new collection here and we're just going to rename this to brand. Okay. So let's say this here

to brand. Okay. So let's say this here is going to be our slate color scale. So

slate's usually like a a warmer shade of gray. It's one I like to use. So we're

gray. It's one I like to use. So we're

going to set this to slate. And let's

start off with maybe this one here will be our 500. So this might be our default slate. Now we're going to want our 400

slate. Now we're going to want our 400 next, right? So if this here is our our

next, right? So if this here is our our 500, we're going to want a 400. Now what

value is this 400 going to be?

The approach that I always take is that whatever my 100 multiple would be, so 500, 400, 300, 200, 100, they all have

the same uh mathematical difference between them. But we're designers, we're

between them. But we're designers, we're not math people. So, how do we calculate that? So, what I always do is I'm going

that? So, what I always do is I'm going to bring out one here and then uh bring another one down and then bring another one down. Okay, let's add some auto

one down. Okay, let's add some auto layout between be between both of these.

What I'm going to do with the one on the left is simply adjust the opacity very slightly. So let's say um if we're

slightly. So let's say um if we're starting at our 500, we want to get to our 100. It'll be a 20% opacity break.

our 100. It'll be a 20% opacity break.

So I'm going to set this to 80 and then color match.

There we go. And whatever this hex code is, I'm then going to insert inside as the because we're getting lighter. Let's

look at another example for this. So if

this here is our 60 We're then going to color match just like that. In this case, this is

going to be our 300.

There we go. And then if we go to our uh 200 200, set this to our 40. There we go.

And use our uh color match tool. There

we go. To get the hex code. And then

let's do a 100.

So this is set uh to 20 and then this here is set to 20.

Place it in. Sorry. And this should be our 100. Excuse me. So now we have that

our 100. Excuse me. So now we have that nice clean 100 scale without any of the opacity values. So notice how this is

opacity values. So notice how this is following the same mathematical logic where each 100 value goes down by 20%.

Now if we need to add a color in between here. So let's say we add one uh like a

here. So let's say we add one uh like a 150. What we can simply do is copy this

150. What we can simply do is copy this and adjust it uh set this to 30%.

Because halfway between 40 and 20 is 30 and then color match. And now we have that 150 value. So notice how it offers some level of scalability. And we know

the math that is going into our color scale to make sure that our color scales aren't bouncing around. They look

slightly similar, but they're actually different shades entirely. Is in our branded collections, we really need to maintain that level of consistency. Now,

what if we were going darker? So, when

it comes to getting our darker shades, if we got our lighter shades by placing the colors with the opacity on a white background, what's the inverse of that is placing those same colors on a black

background. So, if I was to get rid of,

background. So, if I was to get rid of, let's just maybe say one of these, uh, and rotate it around. Oops. The whole

frame around, not the individual. There

we go. Notice how all of a sudden we have our darker scale. Now, one thing I'd like to call out here is I've lost the ability to move variables around, which might complicate things for the purpose of this tutorial, but we're

going to roll with it for now.

Um, uh, so that's again, that's why they're already there. But, um, now what we can do is simply just color match.

Now, one thing I have heard in the past that I really want everyone to be aware of, some people on YouTube have said, if you create your lighter scale with

white, you can create your darker scale.

It doesn't need to be black. It can be a darker shade of gray in order to maintain sort of the look and feel that you're going for. Now, that's good in theory, but what's the what's the issue

with that is if your lighter colors are based off white, what's the opposite of that? would be would be to have your

that? would be would be to have your darker colors based off black. But if

your lighter colors are based off white and your darker colors are not based on black, all of a sudden there's a disconnect in your scale. Okay? You're

actually building out different shades in the math be behind your scale is going to be wrong. I've seen this time and time and time again working with our enterprise clients. So unless you have a

enterprise clients. So unless you have a really good reason as to why you're not using black or white to build out your color scale, then my suggestion to you

would just be, you know, black and white, more or less. Okay. So, uh, let's make some adjustments here. So, this is let's, uh, this here is going to be our 80. This here is going to be our 60.

80. This here is going to be our 60.

This is our 40. This here is actually going to be our 20. And then this here is going to be our 10%. So, sorry, I should have waited to to color match.

Got ahead of myself there. So there we go. And let's just redo it. Sorry about

go. And let's just redo it. Sorry about

that. Got distracted. So let's just simply color match each of these. And

then color match this one as well. And

make sure that's uh color matched.

There we go.

Think we should be good there. Perfect.

So now let's simply uh just color match each of these. There we go. And the

reason why again um I am color matching the scale we already built because I always want to have a copy of our actual scale. So this here is going to be our

scale. So this here is going to be our 700 and then this here is going to become our 600. There we go. So now we have

our 600. There we go. So now we have that crisp clean scale. And again we have a 950 is because this value here it's 10% and this one is 20%. So of

course we're only going up that 50 value. Okay. So there we go. I think

value. Okay. So there we go. I think

things are looking pretty good so far.

Now, we're not going to go ahead and build out every single uh do that same process uh for each. We're just going to fast forward ahead just simply add in some red hex codes and red color scales.

I already do have some pre-built out.

So, we're going to use some of the colors here for now, but again, we're going to go through it together so you can build out the scales uh as well. But

again, that's how you build a nice crisp clean color scale for your design system. One that's scalable, one that

system. One that's scalable, one that works, and also one that is flexible. So

there we have our first brand color out of the way. Let's keep moving forward now. Okay. So what I have here is

now. Okay. So what I have here is essentially just went through. I just

have all the all the color scales. So

for red, for blue, for orange, for green, for gray. Now slate and gray.

Personally, I like to have sort of a different shades. I like to have like my

different shades. I like to have like my text for slate, but I might have disabled for gray. They kind of do go hand in hand. You don't need to have them if you don't want to. Anyways, I

digress. But um one common thing that I've seen a lot of other creators talk about is they say what whatever you have here in sort of like whatever your

primary scale might be whether it's 950 through to 100 like this exact logic they say it needs to be exactly the same for every single one of your colors.

That is absolutely not the case. Like

why do you need to like make yourself so thin that way? Like the reason being is that different colors in different color combinations.

Their accessibility can be a little bit different depending on the pairing. So

you might have a 950 paired with a 100 in one case, but when you introduce another color, all of a sudden you realize the 950 doesn't pair well with the 100. So you might need to introduce

the 100. So you might need to introduce another shade, which would be a 1,000 ordered past that double A color contrast accessibility. We're going to

contrast accessibility. We're going to get to that very shortly in a little bit later on once we get into the map collection and start building out some of our components. But that is one myth that I hear a lot that is absolutely not

true. You might have um as an example,

true. You might have um as an example, we might have slate and then you might have green, but then all of a sudden eventually if you duplicate this variable, your green might have a

thousand and then you still might have a 950 which is different than your slate.

Okay? Don't be afraid to introduce new shades in between your existing 100 values in order to achieve the look that you're going for. Also to pass color,

contrast, accessibility. Now that that

contrast, accessibility. Now that that preamble is out of the out of the way, let's go ahead and start building out some of these scales using the scales that I built right here. Okay, so let's go one by one and build these out together. Now, I know this is pretty

together. Now, I know this is pretty tedious, but I'm doing it just in case you want to follow along with me. Um, so

we're going to go through it together.

So, let me move this out of the way.

Sorry, my whole Figma variable setup is being weird. I don't I don't have the

being weird. I don't I don't have the ability to move variables around anymore, which might cause a little bit of problems a little bit later on. But

anyways, let's just go ahead and duplicate this. Now, for the purposes of

duplicate this. Now, for the purposes of this exercise, I'm not going to introduce a different structure of variables here. So, what I just

variables here. So, what I just mentioned might go have like a,000 or,00 as you build out your design systems, you build out your components, you might need to go ahead and build those out on their own. Okay. So, I'm just going to

their own. Okay. So, I'm just going to go color match these one by one. And

again, the reason why I'm doing this so you can slow down the video, pause the video, follow along with me using the exact same hex codes. One, two, three, four. Because again, these are they're a

four. Because again, these are they're a little bit different than the ones I used at the collective kit. Um, but

they're pretty robust in the grand scheme of things. They produce

components that look pretty good. One,

two, three, four, then five. Uh,

perfect. Let's start working our way up from the bottom. And again, feel free to skip ahead uh if you've already uh done this part before.

our 150. Let's go with our 200.

Let's then go with our 300.

One, two, three, uh, four, then five.

And then lastly, we're going to have our 500 uh, right here. Beautiful. So, there

we have our 500. Again, if I made any mistakes there, feel free to call me out on the way. Let's then go with our blue.

And one thing we're also going to cover too is if I have very similar shades of like if you if I have two greens, what is it that I'm going to do? So, because

that's a pretty common use case that I do see. I do a lot of companies,

do see. I do a lot of companies, especially a lot of clients as well, is they do tend to have a lot of greens for whatever reason. One, two, three, four,

whatever reason. One, two, three, four, then five.

There we go. Perfect. Let's keep moving up.

There we go. We got our blues out of the way.

Let's then go with our oranges.

I also get a lot of questions as to where I learn to to build design systems is one of my co-founders of UI collective. uh he's very very senior in

collective. uh he's very very senior in the design system realm uh Mike. So

shout out Mike I know you're listening to this hopefully two three four five and he's runs a company that actually builds enterprise design systems and uh when I was first getting started with design systems he kind of took me under

his wing a bit and taught me everything that I'm teaching you now. So um

everything that I'm teaching you he taught me at one point and he's he's more of a design executive now more than anything else. again runs a company. He

anything else. again runs a company. He

used to be a design executive in the past where he ran a team of about 60 or 70 designers. Um so he's the one that

70 designers. Um so he's the one that taught me a lot of these items now and even now it's it's kind of fun because I still get to teach him some things in design systems whether come up with new components, a new way of approaching

things like a prototype. Um it's kind of fun that way where he taught me everything. Now I'm teaching him some

everything. Now I'm teaching him some things. So four,

things. So four, one, two, three, four, then five. There

we are. six.

This is probably the most boring part of this entire video, so I do apologize.

But again, I want to make sure that everyone can follow along with the hex codes that I'm using here, and I hope I didn't make any mistakes along the way.

And then one more. Let's go with our gray.

And these are kind of the core colors that you need as well. You can have a lot of other ones depending on your brand, but at the end of the day, you really only need an orange, green, blue, red, and gray. Okay, that that's really

ultimately all you generally uh really need.

And in the our collective kit design system, one thing you might have noticed is is if you bought that kit or if you are a member uh of the academy is that um there are a bunch of different other

shades in there. I just use those just for options for things like graphs. Um

those different types of shades can come in handy. So one, two, three, four,

in handy. So one, two, three, four, five, and six. Uh sorry about that. So

this one should be one more up.

Work from the top down. This one's

almost black.

Our 900.

Let's go with our 800.

And let's go with our 700. Beautiful. So

we have all of our Again, I hope we didn't make any mistakes there. So, we

have all of our brand colors out of the way. Okay. But before we move into our

way. Okay. But before we move into our alias collection, we think back to what I was talking about a little bit earlier is we did have some other types of variables that go inside of our brand collection. So, let's look at that next.

collection. So, let's look at that next.

So, actually before we get into that, one thing I do want to cover is if we have different different types of colors. Okay, so a great example I see

colors. Okay, so a great example I see all the time, different shades of green.

Don't know why. I just see different shades of green. Now, what I've seen a lot of other creators do in this space is what they say is every single if you have a a primary color that's green for

like your core brand or let's probably use like um red as an example is if you have if you're Coca-Cola and your core color is red then your air color should

also be red. That is not the case. It

would be nice but it's not always the case. So, what you can do is you can

case. So, what you can do is you can just duplicate this and introduce a different shade. So this might be shade

different shade. So this might be shade rose as an example. So all of your colors, if they're the same, they don't need to share the exact same color shade. They can have different shades.

shade. They can have different shades.

Just call them something a little bit different in your brand collection because what you're going to do is you're going to assign those colors those colors specific roles in your alias that we're going to get to very shortly. If it doesn't make sense now,

shortly. If it doesn't make sense now, bear with me. Now, what you can also do is there's a lot of color shades that aren't really used all that often. If

you think about like a lot of my background is in financial technology, so you have a ton of different colors that go into things like different graphs, different piraphphs, charts, all

that fun stuff is what you can actually do is I was to duplicate this and I just put this in a group called secondary scales. Okay? So you have your primary

scales. Okay? So you have your primary scales and then you have your secondary scales which are basically just scales that you don't really touch all that often only really if you need to. And

this is where you can introduce other colors for things like graphs where they don't really they're not really going to serve a purpose. They're just there if you need them. Okay. So in terms of

scalability of your brand colors both in terms of if you're going to have multiple shades of a color or if you have color skills that are not really used, you just want to park them somewhere. Those are some of the

somewhere. Those are some of the approaches that you can take. Okay. So,

still within our brand collection is we can look at font weights and font styles. Now, we're going to look at and

styles. Now, we're going to look at and once we get into our alias collection, how you might handle this for multiple brands, but if you're only using like one font style for one brand, and that's not going to change. You can always just keep it here inside your brand

collection. You don't need to worry

collection. You don't need to worry about your alias. But yeah, we're going to get to that very shortly. So, here

within my all variables, I'm going to create a string variable that we're just going to call enter and then enter.

Okay. What I can then do is it allows me control over uh the font styles that are actually applied or the font um type that's applied font family. So I can go

ahead and apply a variable here that's called enter. So in all my font

called enter. So in all my font families, all my font styles, enter is always going to be applied. So if I need to change this to robboto very like at a later date, I can change

the value to robboto. And I can see that robboto is actually going to get uh applied. Okay. So let's change that back

applied. Okay. So let's change that back to enter for now. Let's go ahead put this in a new group that we're just going to call our font uh style. And now

let's focus on our font weight. So if we look at inter here, our font weight, sorry, you might hear some sirens in the background. is inter has thin, extra

background. is inter has thin, extra light light regular medium semi-bold, bold, extra bold, and black.

In order for Figma to know what font weight is being applied, it needs their string variables need to match what's here. Okay? So, I can't put thinner or

here. Okay? So, I can't put thinner or thin, too. It would need to be thin,

thin, too. It would need to be thin, extra light, light, regular. So, let's

go ahead and do that. So, sorry, I'm going to take a screenshot just so I can see it.

uh bring this in wherever it went. Lost our screenshot.

Anyways, so it can be thin, thin. We

extra light, extra light, extra light. Uh we then got into light,

extra light. Uh we then got into light, light. You don't need to do them for all

light. You don't need to do them for all of them. You can kind of pick and choose

of them. You can kind of pick and choose the ones that you need because you're likely not going to have an extra light or a light. Uh you're probably going to stick to regular, medium, semibold, bold. So, light. Let's go with our

bold. So, light. Let's go with our regular. If I can spell regular, right?

regular. If I can spell regular, right?

Regular. Regular.

Let's then go with a Let's duplicate this variable. Let me go with a medium.

this variable. Let me go with a medium.

Medium.

Let's go and go with a semi-bold.

Semi- bold.

Uh, semi bold is two words here. Semi-

bold.

Semi bold. And we might have uh a bold and also uh a bold. So what we can do, let's just get rid of these two here just to keep it simple. Is I can go

ahead then and apply that variable which is going to be uh the bold. So it keeps things consistent that way. But now what if we have a different style of font

where the font naming convention isn't regular, it's not semi-bold, but maybe it's something else. How does that work?

So now let's look at how we might group some of these fonts depending on our brand's use case. So, I've gone ahead and just changed this to Robboto. But

what's thing that what's something that we notice about Robboto is they don't actually have a space in between semi and bold. What they do, what Inter does

and bold. What they do, what Inter does is they have a space between semi and bold. So now all of a sudden the font

bold. So now all of a sudden the font weights names are the same in theory, but they're actually a little bit different. And that can actually cause a

different. And that can actually cause a downstream break. So, we wouldn't be

downstream break. So, we wouldn't be able to apply the font weight that's here because it doesn't match what it is for the font if we're using Robboto verse inter. So, what we can do is we

verse inter. So, what we can do is we can group these together. Um, sorry, let me ungroup these entirely. I'm going to ungroup these. And what we're going to

ungroup these. And what we're going to do, we're going to put this in a new group that we're just going to call uh enter. Then, what we can do is we can

enter. Then, what we can do is we can duplicate this group that we can just call uh robboto. And one thing you could also do is you can put them inside a subgroup as well if you really really

wanted to. So if I go to enter, let's go

wanted to. So if I go to enter, let's go font uh fonts. Uh we have enter and then fonts uh robboto. So you can always keep track

uh robboto. So you can always keep track of what's what. So for robboto then change this to robboto robboto. And what

we're going to do is just remove the spacing in between semi bold so that it matches the font weight. Uh that's for robboto. Okay. super important there and

robboto. Okay. super important there and something that's pretty that goes pretty underrated and pretty under noticed when designers are setting up their font weights inside of their brand collection

itself. Okay, now that we have that out

itself. Okay, now that we have that out of the way and one thing we can also do as well is we can put this inside of a new group that we just call uh our font style and we can put these inside of

their own group that's font weight uh or style.

Oops. So I can type style and then weight and then this here becomes our style style and then we also have our weights.

Our weight again keeps things organized.

And one thing we're going to do again as I mentioned when we get into our alias collection we're going to look at how this might evolve on a brandto basis.

Maybe one brand's an insert and another brand is in robboto. Okay so now that we have our fonts out of the way let's look at our scale. This is a pretty complex topic. So before we get into building

topic. So before we get into building out a scale, what is a scale? So a scale is a list of all the number value values number variables sorry we would ever use within our design system. Why is it

important? One, it stops rogue variables

important? One, it stops rogue variables being added later. If it's not in the scale, don't use it. So if you don't have a three in your scale, don't add it to a border width for three because that's obviously not best practice and

it's going to look different across all the other components. So ultimately,

it's a source of truth for all the values. I'm not sure what I can use.

values. I'm not sure what I can use.

Check the scale. Your scale is going to be broken up into things like your border radius, your border width, um your font, size, your line height in later collections, whether that's your

maps collection or your responsive collection that we haven't introduced.

Um so it's ultimately everything that has a number pulls from the scale. Now

your scale is a super advanced topic of design systems. I do not recommend building out your scale first and then trying to build out your brand. So like

the your gaps between larger components, your your heights, widths of components if they're fixed, those kinds of things.

It's very difficult to do. Ideally, what

you should be doing is building out like your your font weights, your sorry, your font styles, uh your components, your modules to get an idea as to the spacing

that you're going to need, the sizes of your objects. Are you following a four

your objects. Are you following a four pixel grid or are you following a three pixel grid? There's a lot of very

pixel grid? There's a lot of very unknowns there that you're going to need to plan for before you go ahead and build out your scale. If you build out your scale first, you're going to try be

going to try to be squeezing your brand identity to fit the scale. Okay? Want to

call that out right away. But for the purpose of this exercise, we're going to build out a scale first, one that I already have pre-built, so you can follow along with me as I go. But as I do that, I'm going to talk about why

it's important to build out sort of your designs first, your components first, and then work backwards. Okay. Um, so

let's go ahead and build out a scale that I've already built. for actually

our collective kit which is included in the UI collective academy. So let's look at that next and some of the nuances that go along with it. Now let's go ahead and let's build out uh our scale.

So let's go ahead uh oops sorry let's create a new value here that we're just going to add a number value that we're going to set to zero or first off our scale sorry and then zero. Okay,

beautiful. Now, when it comes to your scale is you're still going to be following that 100 scale that we talked about in the like when we were building

out the colors. So, 100, 200, 300, so on and so forth. Now, the easiest way to go about this is go zero 100 is to follow

uh a four pixel grid. So, every single one of your your spacings, every single one of your what's the word I'm looking

for? um font heights or line heights, uh

for? um font heights or line heights, uh font sizes, everything should follow a four pixel grid, a multiple of four.

That's best practice. But you know, and I know that you're going to need some rogue values in between for things like your spacing, for things like um you

know, paragraph spacing, whatever. Okay?

But try your best to always align to a multiple of four. If you can't align to a multiple of four, align to a multiple of two. Never go from an even number to

of two. Never go from an even number to an odd number. Best practice. I know

this is a confusing topic. We're going

to go through it slowly. Okay. So, if

our 100 value is four, our 200 would be eight. 200 would be eight. Our 300 would

eight. 200 would be eight. Our 300 would be 12. Our 400 uh would be 16. Okay.

be 12. Our 400 uh would be 16. Okay.

Now, what's one thing we noticed about this right away is that, you know, a border width of four being our minimum value, it's kind of weird. Even a radius too, we might want a border radius of

two. We don't always want it to be that

two. We don't always want it to be that four. So, it was very similar to how we

four. So, it was very similar to how we introduced other colors here at the 50 level. We can do the same for our scale.

level. We can do the same for our scale.

So, we can introduce a 25, which is a one, as an example. Now, I know I said don't introduce odd numbers. a one pixel is the only one value is the only

um time I would ever want to see an odd number here if I'm using even number variables because think about a one pixel border border width it's a common treatment even if everything else is four you're always going to want that

option to have that one pixel border width to keep your components and your designs clean okay so that's the one caveat then we're going to introduce the

50 which is a two so now we're starting cover some of those more finite use cases like your border widths and your border radiuses.

And we can keep going down the line. We

can go 500 which is 20.

20. We can go 600 which is 24. Now

couple things that I want to call out here is I see a lot of creators doing this.

Two is equal to two.

Now, that's great in theory, but when we get into some of the larger values, okay, so let's just say for whatever instance, I don't know how this is going to work, but let's say 1,200 is like a

96. Uh, sorry, is 96 even a multiple of

96. Uh, sorry, is 96 even a multiple of four? Bad at math. Let me check. 96

four? Bad at math. Let me check. 96

divided by 4 equals it is. So if our 1200 is a 96 and what I see a lot of designers say and a lot of creators say is you don't

need a a 100 scale for uh your scale. It

can just be whatever the value is just call it 96 96.

Okay that's good in theory but what if this value needs to change? What if your your 1,200 actually needs to become a 100 and not a

96?

What ends up happening then is you can change the value but the name of the variable is going to stay the same. So

the code is not going to break. But if

all of a sudden we start changing the name of the variable which we already have um which is set to this becomes like uh sorry let's set this to like a thousand uh and this becomes like a

th00and oh god what's going on here uh zero thousand. There we go. Sorry. If you

thousand. There we go. Sorry. If you

start changing the name of your variable, then the code is going to break. But if we have all the names

break. But if we have all the names consistent and they don't change, it's just the value that might change, then the code's not going to break. Okay? So

that's why it's super important still with your scale to use the 100 scale.

Use the increments. Don't set the name.

Don't set the value to the name because the name if the value needs to change then the name is going to change and then your code is going to break. And

I've seen that a million times working with design system clients where they start changing the values which means that the name has to change and then there's a break in the code and developers aren't going to know what to do. So I know it drives everyone a

do. So I know it drives everyone a little bit crazy why you still need to use the 100 scale here. That is why is we don't want to make a downstream break

from our variables in Figma to our coded components into our coded libraries.

Okay, with that preamble out of the way, uh let's go ahead and delete this and let's keep moving down the line here.

Okay, so let's keep moving forward. So,

let's go with our 700, which is our 28.

And there's one thing that I want to show you here. And sorry, I do have a GG here just because this can get kind of confusing sometimes. If this is a 32, uh

confusing sometimes. If this is a 32, uh if this is a 900, let's set this maybe it's like a 36. Um, and then let's go a,000, which might be uh or sorry, 36,

not 46. And then this might be a 40.

not 46. And then this might be a 40.

Okay. Now, if we think about our spacing, right, we might go all the way up to 256, 256, 512 for like larger gap

elements between some of our components or we're building out a layout that's a specific way. Maybe it's an FAQ block

specific way. Maybe it's an FAQ block where there's a ton of space on either side as part of an onboarding.

Now, we don't want to have to go 4 four four four all the way up to 256 because what's the point of that? There is absolutely no need for half of those values. Now, this

is why it's super important to do some uh QA first personally on your designs, the type of design appearances that you're going for, the the font styles and font families that you're going to

use. Like it's important to build out

use. Like it's important to build out your design system, build out some designs before you build out your scale, or else you're just not going to have insight as to what those values are.

Now, to avoid having to go four pixel x 4 pixel x 4 pixel is what all these initial values do is they cover our border radiuses, our border widths, some of our initial gap for some of our

smaller components, our line height, our some of our font sizes.

But, you know, you might not use a 44.

Now we're getting into some of those larger sizes like our H tags and our larger spacing. So now what it's okay to

larger spacing. So now what it's okay to do is it's actually okay to start skipping the four values, but still keep it a multiple of four. So we're going

from 40 to 48. Our 1,200 might become a 56. So it is okay to start skipping some

56. So it is okay to start skipping some of those individual multiples of four.

Again, this is a pretty advanced design system concept in order to not have 4 million different variables at a multiple of four. So, now let's keep going down the line here. So, this might

our 1300 might be our 64. Our 1400,

forgive me, I am checking my cheat sheet here just so I don't leave it going astray. Uh might be at 72. Uh and now

astray. Uh might be at 72. Uh and now what we can do is with our 1500, we can even start going like beyond that multiple like that that increase of

eight. So the 72 might become our 96

eight. So the 72 might become our 96 here. Our 1,600 uh might become our 128.

here. Our 1,600 uh might become our 128.

Our 1700 might become our uh 256. So now

we're getting into some of those spacing elements. Our 1,800 might become, you

elements. Our 1,800 might become, you know 512 so on and so forth. Now again, the reason why we're using our 100 scale is because there's a lot of values here in between that we might want to introduce.

Like maybe for whatever reason, I do need an 80. Okay, just because my brand says I need an 80, I can introduce that 1450 in between these two or whatever that is. It would be like a Anyways, I

that is. It would be like a Anyways, I don't think it's a perfect split, but I digress. Um, so this is sort of a basic

digress. Um, so this is sort of a basic scale that you can always start off with if you do want to go through this approach. This might evolve as we build

approach. This might evolve as we build out some of those like font families and maybe like finesse some of our spacing elements, but this is really how you have a real basic scale. One thing I

want to also talk about as well is when you are building out your design system and you're still getting comfortable with your scale is one thing you can do just for the short term until you finalize your design system is apply the

numbers here in brackets because what that's going to do is it's going to show you what the value is when you're actually applying the variable and you just have to go back and remove it a little bit later on. So, your scale is

probably one of the most complex topics that you can cover in the in the realm of design systems, but as we go through and build it out, we're going to talk about this a little bit more. But again,

now that we have our brand collection out of the way, we have our colors, uh we have our fonts, we have our scales, we've talked about some of the nuances associated with it. Let's now talk about our alias collection. Now, you can start to see how everything starts to come

together before we move into our map.

Okay, so we've made it through our brand collection. Let's now rock and roll with

collection. Let's now rock and roll with our alias collection. So, your alias collection is where you're breaking out the colors um in your brand collection

into specific categories. Now, I used the example a little bit earlier on of Kokus. Look at that same example here.

Kokus. Look at that same example here.

If in brand you have like a red 100, 200, 300, 400, 500, 600, 700 in your alias, then that could be broken out in between your air scales and your primary

scales. Because again, I'm Coca-Cola. My

scales. Because again, I'm Coca-Cola. My

primary color is red. I also have an error color. They might share the same

error color. They might share the same scale. So they tie back to the same

scale. So they tie back to the same scale in your brand collection, but in your aliases, you're actually defining a specific role for it. The reason why this is important, and this is where a lot of designers struggle is we do this

to maintain consistency. Say we have this error alert. The colors here should not pull from the error scale or should pull from the error scale, excuse me, not the primary scale because it's an

error alert. So if our alertness has is

error alert. So if our alertness has is in an error state, why would we pull from the primary scale? We want to keep things consistent. Pull things from the

things consistent. Pull things from the appropriate scale. Your information

appropriate scale. Your information colors, so the things like your icon information in your mapped collection is going to pull from your information scale, whether that's an information 500

or information 600. So it helps to maintain broader consistency. That is

ultimately the purpose of your alias collection. Your alias collection is

collection. Your alias collection is also where you define all your other miscellaneous variables. Generally, your

miscellaneous variables. Generally, your mapped collection is just used for the colors that are actually applied towards your um your components and your designs. Generally, we only really like

designs. Generally, we only really like to have our our like our border radiuses, our border width, and our alias. Then the reason being is because

alias. Then the reason being is because alias is where we define another brand.

Maps is our maps collection is generally used for light mode and dark mode. And

it's pretty rare for your border radius and your border width to change across light mode and dark mode. It is less rare for your border radius and border width to change when you're going from

one brand to another. Think Coke versus Diet Coke. They might have slightly

Diet Coke. They might have slightly different border radiuses, slightly different border widths. So that's why we're actually including these elements inside the alias collection itself because we might need to toggle them

based on the brand that is selected.

Whereas our mapped doesn't deal with multibrands. It deals with light and

multibrands. It deals with light and dark mode. So that said, again, alias is

dark mode. So that said, again, alias is where we're also going to define another brand and we will look at that. But

let's dive right into it. All right.

Now, let's go ahead and let's uh start to create our uh alias collection here.

So, let's go ahead create a new collection that we're going to call alias. Then, what we're going to do is

alias. Then, what we're going to do is we're going to start breaking out these color scales into specific roles. Okay.

Now, um, what I'm going to do is I think probably the better example here is in the past what I would do is I always have primary as a different color.

But maybe what I might also want to do for this case just to alleviate any questions is if we introduce have a primary color as we think about Coca-Cola, maybe if we have a primary

color being the red and also have an air as well that's also red to show how we can handle that. Okay, so there's a method to the madness with this. So

we're start off with a primary uh 100.

So what I'm going to do, I'm going to create an alias of this. So what I did, just create a new variable, create the alias of that, and just search for uh

our red 100. We also then have a one, 150 200 300 400 500 600 700

800, 900. Uh I think we just stopped

800, 900. Uh I think we just stopped there at a 950. Let me make sure that's right.

Yeah, we did. Okay. So, basically what we're doing is just we're applying the exact same values. It's really that simple. It's not that difficult. So, we

simple. It's not that difficult. So, we

go to our 700 and then we're going to go with our 600 and then we're going to go with our 500.

Then, we're going to go with our 400, our 300, uh our 200, our 150, and then our 100. Okay? So this here, these are

our 100. Okay? So this here, these are our primary scales. So for whenever we have like a specific button, these are this is what our primaries would be used for. Again, we still need to get into

for. Again, we still need to get into our maps collection where we create the specific variables for that, but we're defining a primary scale. Now let's

let's look at error then, right? What I

can do is I can just duplicate this group and call this our air. That's it.

If you share the exact same, if the two roles share the exact same scale, just duplicate it, call it something different. Now, if we look, think back

different. Now, if we look, think back to um our our slide deck here. Sorry,

let me skip back. Is again, we do this to maintain that level of consistency is when we're building out our components, we want to be using our error colors. We

don't want to be using our primary colors. And another reason why we want

colors. And another reason why we want to do this is in the say in the future we want to tweak the air color specifically what we can do we can go into our brand add a different red maybe

like a like a rose or something and then simply just connect back the airs to that alternate shade. Okay everyone says oh that would never happen. Believe me,

I've worked with far too many design system clients to know that that happens way too often where they think they're going to use the exact same shade of red or green or blue, orange, whatever, and

then they end up slightly introducing a slightly different scale to offer some differentiation.

Hopefully that makes sense. But really

setting up your alias that simple. Let's

keep going through the rest of our other scales for this. And then we're going to look at some of our different modes and how we're going to bring in our border widths and our border radiuses as well.

Okay. Now, what we can do is just start going down the line. So, we'll just go with our information uh our information.

So, this can be our blue. So, just

select uh the alternate colors. So, blue

150, blue 200, blue 300, uh, blue 400, blue 500,

blue 600, 600. Oops, sorry, wrong one. 600, our

600. Oops, sorry, wrong one. 600, our

700, our 800, our 900, and then we have our 950.

There we go. And maybe just to save some time, I'm just going to skip ahead.

We're really going to be doing the exact same for each of these. Okay, so I skipped ahead a bit here. I'll take you through it. So again, we have our

through it. So again, we have our primary, we have our error that we did together, exactly the same, both red. We

have our information, which tends to be blue, our success, which is green. uh

our warning, which tends to be our orange. And then I'm also introducing a

orange. And then I'm also introducing a neutral, which I'm tying back to uh one of our slate scales and our brand. Now,

slate and gray pretty similar in the grand scheme of things. This is

something super important is you don't need to bring every single scale into your alias. Don't need to do it.

your alias. Don't need to do it.

Sometimes they just you just don't have a use case for everything. Sure, here

you might also add a secondary or tertiary scale if you need to because your brand might be a little bit more complex, but in your alias, keep it basic. Only really use the colors that

basic. Only really use the colors that are the colors actually going to go into your actual design system components themselves. Now, I I've heard the

themselves. Now, I I've heard the argument before that, oh, if I'm working with like a pie chart where you have all these different types of colors where there's like 15 different values, then

those should in the map connect back to your alias. Well, it doesn't need to. If

your alias. Well, it doesn't need to. If

it's only a color that's only used once in a blue moon in a very specific use case, just connect it right back to a brand. You don't need to if you're only

brand. You don't need to if you're only using one color once, you don't need to bring an entire scale from brand into alias and then into mapped. It just

doesn't make sense. Okay, so my suggestion to you in your alias only really have your main core scales. I

know it's a confusing topic. You have

any questions, drop a comment below, leave it on our community forum. uh and

again academy members they can get they get added to a slack chat with me where we can chat directly uh on these types of topics. Okay so let's now introduce

of topics. Okay so let's now introduce border radiuses border widths uh other things that go into our alias then before we look at how we might set up a different brand. Okay, now let's look at

different brand. Okay, now let's look at our border widths and our border radiuses. Sorry, I don't know why I did

radiuses. Sorry, I don't know why I did that. So let's create a new number

that. So let's create a new number variable that we're call border widths.

Uh, and then starting off with, uh, let's go.

Border widths is a funny one, uh, because you don't really have a ton of border widths. So, one thing I'm gonna

border widths. So, one thing I'm gonna do here is actually introduced to you the concept of t-shirt sizing. Uh, so

starting off with maybe like our extra small. So basically what t-shirt sizing

small. So basically what t-shirt sizing is, if you go back and rewatch what we did for the brand collection in the PowerPoint to those slides, I sort of showed you the different approaches where you go from like lighter to

lighter to light 100 to 200. Your

t-shirt sizing is something that can come in handy, I guess. um when you're working with uh number variables. So

instead of it being like a 100, a 200, a 300, a 400, if you only have like four variables and there's not that clear gap in between where it goes from 100 to 200. One thing you can do is just

200. One thing you can do is just introduce these t-shirt sizing where if I intro if I starting with an extra small, sorry, I'm getting ahead of myself here. Whereas if I create the

myself here. Whereas if I create the alias of this and connect it back to my scale, you know that extra small value for the border width might be 25. So

essentially one pixel. We can then do a small which would be 50. We can do a medium which might be four. And then

maybe we just need an eight for whatever purpose and we can get into a large which might be that eight value. Okay.

So for things like your border width, this is often a treatment that I do see happening. Alternatively, what you can

happening. Alternatively, what you can do is really just match what it is in the scale 50 to 100 uh to 200. And

again, the reason why we're doing this is because we're going to add a different brand here. Okay. Um so that's why we're bringing the border widths and the border radiuses into our alias is

because if that changes based on if we have another brand or not, it's going to update with it where it wouldn't in the brand collection. Okay, so that's a

brand collection. Okay, so that's a different approach using the t-shirt sizing that you might want to introduce.

Okay, so now what about border radius?

Uh, so let's go ahead and take a look at that next. So with border radius, it

that next. So with border radius, it might be pretty similar. Um, so probably one thing I didn't actually do here is I can set uh this to our n and then this

to our 25 and just set this to our zero in scale. Um, I'm sorry, I'm just going

in scale. Um, I'm sorry, I'm just going to delete this and do the same thing with our border width. Uh, again, I still don't have the ability to move around locations of my variables for some reason. So, it's not letting me

some reason. So, it's not letting me drag it up and down. That's why I did that. Anyways, I digress. So, pretty

that. Anyways, I digress. So, pretty

similar thing with your border radius.

But one thing that's important to know with something like your border radius is it's pretty rare to have just a radius of one. It's either two or it's four or it's eight. Whatever. Border

width is really the only ever use case where you would use one in the scale.

That's why we have it. just a one pixel border width all the way around. Keep

things nice and clean. Okay. So, we

generally don't have that in our border radius. So, for now, again, it helps to

radius. So, for now, again, it helps to build this out once you already have a sense of your components and your designs because you might have So, you have a none, you have a a two, you have

a four, you have an eight. Um, you might also have a sorry, let me redo these.

And then you might also have a um you know, a 12 for whatever reason. But then

what you might actually do is you might just jump all the way up to around in case you ever need like that pillshape button or what you can do is just select the highest value. It doesn't really matter. Okay, so that's a way that you

matter. Okay, so that's a way that you can approach setting up your border radius. That simple. Now what about our

radius. That simple. Now what about our fonts? Because you're going to remember

fonts? Because you're going to remember that during our brand collection as we introduced fonts for like our interstyle, interwe robboto style, robboto weight. How does that come into

robboto weight. How does that come into play with alias? So what we can actually do uh is inside of our alias collection is we can introduce another grouping

that we're just going to call fonts.

Okay. So color or sorry string we're going to call this font font not font uh font and this might just be our you know our primary font. Okay this comes in

handy if you might have primary font secondary fonts so on and so forth. What

we're actually going to do is we're just simply going to connect back uh to enter. Okay. So now whenever we're

enter. Okay. So now whenever we're um like assigning these to our text styles, it's always going to be enter.

But if we have another brand, we might be able to change that to robboto. Okay.

So again, also too, if you have a secondary font for whatever reason, maybe one's like a heading, another is a body, you can connect this to the alternate to something like Robboto.

Now, one thing that's important to note here is you don't necessarily need to bring in the different font weights. I

mean, you can if you want to, um, but it's not something that I usually do.

Okay, so font primary, secondary.

Beautiful. Now, let's look at actually connecting another brand or adding another brand to our alias to show you why this collection is so important. So,

now once we get to a mapped collection and we can start to show you and actually build some components, you're going to see why this makes sense. But

while we're here, we're going to introduce you to the topic. I do get a lot of feedback when I go to mapped and then I go back to alias. People get

lost. So, we're doing one collection at a time. Okay. So, this one here, this

a time. Okay. So, this one here, this could be brand one. So, let's look at an example here. Like if you're a Coke

example here. Like if you're a Coke brand, this might just be Coca-Cola.

CocaCola would be like your standard brand or sorry, just Coke. U Coca-Cola

is the parent company. What you can do at your alias then is then introduce another brand for Diet Coke where what's going to change let's say everything's

the exact same but Diet Coke is gray. So

what we can do find our gray connect it back. So you're really just changing the color. Gray 150 gray 200.

It's a shame it's already all all the way at the end. 300,

400, 500, 600, 700, 800,

our 900, and then a 950. So, it's really just swapping out the different colors.

That's all it is. if you have a different brand. Now, there's complex

different brand. Now, there's complex use cases where if the brand is completely different and it's not even remotely the same. Um, we can touch upon that a little bit later, but if we think

about all our variables here, the only thing that might change is really just the color of Diet Coke. That simple.

Now, if we scroll down all the way to the bottom, now this is why we have border width and border radius in our alias. and we're not just leaving them

alias. and we're not just leaving them as scales in our brand is because the border width and the border radius might also tweak very subtly. Maybe one is completely like u square where it has

that 90 degree button. Maybe one has a slightly rounded corner. You don't know.

Also too, same thing. You might want to swap the font styles across your different brands. So, introducing your

different brands. So, introducing your alias collection, great way to add different brands and have more granular control over your design system. Now

that that's out of the way, let's focus on the mapped collection and start building out some components. Now, let's

look at our mapped collection. Now, the

mapped collection houses all the color variables that are applied to your components. So, what goes into a mapped?

components. So, what goes into a mapped?

Whatever you need to be applied to components. It's really that simple. All

components. It's really that simple. All

your colors, that's really it. It just

all your colors go into your maps collection. Okay? You don't need to

collection. Okay? You don't need to worry about border radius and border width because we've already defined those in our alias collection.

Ultimately, whatever changes across a light mode or dark mode should go into your map collection. So, just your colors. It's that simple. Okay. So,

colors. It's that simple. Okay. So,

let's go ahead and let's create a new collection uh that we're going to call our mapped collection. Okay. We're going

to start off with our text. And the

reason why I'm not doing this in slides is because it's easier to visualize and to talk about it if I'm actually building it out. Okay. So, starting off with our text grouping. So, what's the first thing that comes to mind when you

need text? is your body text, your

need text? is your body text, your heading text, caption text, placeholder text, things like that. So that's

exactly where we're going to start on uh first. So instead of just being text

first. So instead of just being text placeholder, we I always call that grouping as to whatever our basic font colors are for things like our body

heading, I call that our default. Okay,

so but it's our default grouping because we need to define what this specific variable is going to be applied. So, we

have our text group. Inside of that is our default group for our default headings, our default body. If I'm if I have like a blog application and I open that up, what's the basic font that I'm

going to see? Okay, so let's go ahead.

Body heading body uh, caption, and then, you know, placeholder. So, these are some common

placeholder. So, these are some common ones that you tend to see out there. So,

what I'm going to do, I'm going to create the alias of it and tie it back to our alias, which in this case would be our neutral. So, our neutral 950,

uh, our neutral 900, our caption, maybe want to be a little bit lighter. Uh, maybe our 800.

And then our placeholder, we're going to want to be a little bit lighter still than that. Sorry, where's our neutral?

than that. Sorry, where's our neutral?

So, maybe here we might jump to our 600.

Those are the generic use cases that we have, okay, that we tend to see a lot of working with our design system clients, but you might have different use cases altogether. Now, let's um let me move my

altogether. Now, let's um let me move my video bar out of the way. So, let's go to add some of this text to the canvas and because I really want to hammer home

this point here. So, say I have like a marketing banner. Okay. And let me close

marketing banner. Okay. And let me close that. It's just on like a white

that. It's just on like a white background. So, I'm going to say, you

background. So, I'm going to say, you know, uh, hello or welcome to UI collective. Sorry, I should change this

collective. Sorry, I should change this background here to not be white so you can see it. There we go. Okay. So, if

our page color is white, we're going to have our text on top of that. Maybe this

a hero. This is set to 64. Okay.

All of a sudden, what if I sort of lower down the page? I have a CTA down here, but that color is actually the background is actually black.

Don't know what's happening there. Um,

that was a weird finger bug. Anyways,

but what if that color is actually black? Then our text color is not going

black? Then our text color is not going to work. Make sense? And the reason

to work. Make sense? And the reason being is we're going to need an on color value. So, let's duplicate this. And

value. So, let's duplicate this. And

this is going to be our text on color where if our basic text styles like our heading, our body or caption are on color, what's shown here? Here what

we're going to do, we're going to select our heading. We're also going to select,

our heading. We're also going to select, you know, our body. We're going to select our uh 100 and also our placeholder like our 100. And one thing

that I'm noticing here as well is I didn't add in a brand uh or black and white. Okay. So, forgive me. An honest

white. Okay. So, forgive me. An honest

mistake is I'm going to go ahead and create uh a new grouping here. Sorry.

That we're just going to call foundations. Foundations.

foundations. Foundations.

We're going to have our white. Uh, and

then we're going to have our black.

And then we're going to go into our alias. Same thing. Again, really just to

alias. Same thing. Again, really just to maintain consistency. We're going to

maintain consistency. We're going to have a new um color. That's going to be our foundations. A white,

our foundations. A white, then black.

Sorry, it's an honest mistake there. I

forgot about that. Silly me. Uh, white

and black. And then in our mapped collection now for our on color we can search for that white inside the alias.

Okay. So maybe that's going to be our whites. Maybe this is also going to

whites. Maybe this is also going to become our whites. Maybe we're going to leave these at a neutral 100 for whatever reason. Okay. So now what we

whatever reason. Okay. So now what we can do is we can apply the right which in this case is our text on color heading where if I send the background uh to back.

Oh, what did I apply? Not the right variable. Uh text on color heading.

variable. Uh text on color heading.

There we go. Sorry about that. So now

you can see we have our default text color. But then we're also going to need

color. But then we're also going to need a text color if that text is on a color.

So it's still legible. And this is what a lot of designers tend to skip over is they don't understand this use case.

What they often do and I've seen other people to teach it is they say, "Oh, just toggle the dark mode." But the issue with that is then in your design you're going to have some elements that are light mode, some elements that are

dark mode, and there's just such a break between them. like it doesn't make

between them. like it doesn't make sense. It can get confusing. But by

sense. It can get confusing. But by

breaking up your variables this way, it allows you to assign the correct color for your text. I know it's a little bit of a confusing topic. Again, any

questions on that, drop them below. So,

with our text default and our on color out of the way, let's keep moving forward. And again, with this on color

forward. And again, with this on color topic, we're going to be using this a lot as we build out some of our components and some of our variables.

Okay? So, memorize it. Okay? So, now

let's keep moving down the line. And if

we go back and look at our alias is we generally need text colors or text styles for all the ones that have a specific importance to it like primary,

secondary, tertiary or that have a role.

Neutral is just sort of like a definition for something that tends to be text a little bit later on. It

doesn't really serve a broader purpose.

Like it doesn't serve like a warning.

There's no neutral warning, right? I

don't know if that makes sense or not to you, but if it doesn't, drop a comment below and I'll get back to you. So, what

we're going to need to do now in our mapped is we're going to need to uh go to our all variables here. Let's create

a new group, a new group in there that we're going to call text uh primary and then our default.

Okay, so what this primary is is if we think back to our primary color is we're essentially giving that if a text is in a primary state, what color is applied

to it? Now the most common use case that

to it? Now the most common use case that for those who can't really wrap their head around this is like a link. Okay,

generally companies might want to have a link, not a button, but a link uh in their color. So it can be uh learn more.

their color. So it can be uh learn more.

Learn more. Let's shrink this down to something like 24 and let's apply our text primary default. Okay. So now it's a link and the only reason why it's red again remember is I'm doing this to

confuse you so you understand the difference is that we have our primary color is red but our error color is also red. So if you think about coke there

red. So if you think about coke there might want their links to be red because that is their primary color. Now a link is a good example for this. Um sorry let

me uh move this up here. Sorry, I wish I had a bigger screen for everyone, but I don't. Um, is let me move this. There we

don't. Um, is let me move this. There we

go. Is that what if this is hovered default hover? That's it. We're now we select a

hover? That's it. We're now we select a slightly different darker or lighter shade. So, if it's in a default, what

shade. So, if it's in a default, what value is applied? And if it's a if it's hovered, what value is applied? Let's

look at that exact same concept but for on color. Oops, I got two of these

on color. Oops, I got two of these things here.

So, if I bring this down. Okay, this

might not pass color contrast accessibility.

I'm not sure, but let's just say it doesn't. So, what we're going to

doesn't. So, what we're going to introduce is an on color where Sorry, I forgot I can't move variables down for whatever reason. So,

let me duplicate this. So, this here is going to be our on color.

And we're going to select a lighter shade, maybe a 100, and then an on color hover, which might be a slightly darker shade at like a 200. So hopefully you can see the difference as to the

different variables that we're creating.

So we have our default text, we have our default hover, we have an on color uh text primary, and an onolor hover. And

again, a link is the most common use case where you might see for something like a text primary. Okay. Now we can also introduce like subtle variables like on color subtle if it's like a

subtle component. I do get that question a lot.

component. I do get that question a lot.

If you take a look at our collective kit again a link is down below for that. I

do get into that level of variable complexity but we're not going to get into that right now. Okay. Now another

big question is what if I have a secondary? It's the exact same process

secondary? It's the exact same process except we're not connecting to a primary anymore. it would be connecting to a

anymore. it would be connecting to a secondary which we don't have in this individual use case. Okay, so hopefully that clears things up as to our text primary because I do get a lot of questions around what's the difference

between a text default and a text primary. Um hopefully that clears things

primary. Um hopefully that clears things up. Okay, now let's keep moving forward

up. Okay, now let's keep moving forward to some of the other variables in our text grouping. we can actually do them

text grouping. we can actually do them is because again remember how I chatted about each of these from here to here are going to need text colors applied to them is what we can do in our mapped

just duplicate it. So this here might be our air where instead of connecting to our primary we're connecting to our air 500 default air 600

air 100 and our air 200.

Let's duplicate this. This might be our information and this might become our default or

information 500, our information 600, our information 100.

Where's our information?

Where is it? Oh, sorry. Uh, our

information 200. Let's duplicate this.

This might become our warning. So, this

here would be our warning 500.

500 warning 600 warning 100 warning 200.

There we go. And another one uh for success, success 500, success 600,

success 100, and our success 200.

There we go. Just like that. So now we have basically all of our text variables that we might need. But think about if this was the context of a link. What if

that link's disabled? I've taught this a bunch of different ways in the past is if it's disabled, well, one thing we can do is we just get rid of our hover because a disabled is not going to have a hover because if it has a hover, people are going to assume that it's

interactive. Where we can have our

interactive. Where we can have our disabled default, which ties back to like a neutral, I don't know, like five 500 and then a neutral 500 for all. are

on color. They don't need to be the same. For me, we'll set this to our 400

same. For me, we'll set this to our 400 if it's on color. But again, even for your disabled elements, you're still going to need an on color. So, this

would be if a link is disabled. Now, one

thing that people always get confused about is uh like, oh, what color are my icons? Because people always assume, and

icons? Because people always assume, and sorry, what I'm going to do here is I'm just going to go into uh the collective kit that I have and just pull in any random icon. Uh, perfect. Let's bring in

random icon. Uh, perfect. Let's bring in this one here. is let me just let me just detach this. Sorry, I'm

going to attach the variables applied sneak peek there. Um, so this is just an icon that I got from the collective kit.

I used material 3 icons for this. Um,

and people always ask, it's like, well, how much different should an icon color be than a text color? And I say all the time, they shouldn't be like, they

should legit be the exact same. Because

if this is like something like at um what's like a handle like at Elon Musk Elon Musk, you don't want the at to be a

little bit different than the text. Then

people's eyes are drawn to the text, you know? It's just kind of awkward. So, why

know? It's just kind of awkward. So, why

not just have them the exact same? So,

this would here would be our uh text.

Uh, we're going to go with our Oh, sorry, our text primary. So, our

text primary default. So, this here should really be the exact same because this here creates some unison in your UI. So, there really isn't a

need to have icon colors different than the text that they're going to be paired with. So, the biggest hack that you can

with. So, the biggest hack that you can do for your icons, just duplicate it. But what's one thing

that's a little bit different is icons don't have a heading, a body, a caption, a placeholder. They just don't have that role. So, what you can do is

just simply delete the defaults and the on color, the on color grouping, not the on color, each of the different roles here, because those are still going to come in handy. But what this essentially

doing is it's allowing you as a designer to ensure consistency in your design systems that the icons when paired with text of the same value and of the same

rule are consistent. A better example would be if an icon is a default hover which is way darker than the text

which is 600. All of a sudden, if you hover over that element, then the icon is going to appear darker and have a stronger hover effect than the text. And

then users aren't going to know what's happening. Okay, so super important.

happening. Okay, so super important.

Keep your icons and the text colors of the same pair consistent. Saves a ton of time and a ton of effort instead of having to um Sorry, control- zed there.

Control- zed a couple too many times.

instead of having to come up with different colors for your icon and your text even though they're going to be paired side by side. Okay, so let's now look at surface. Now if we look at our text primary and our text air. So we

have default default hover on color on color hover. The biggest mistake is

color hover. The biggest mistake is designers make when they're setting up their Figma variables is thinking that they can't have the same naming conventions with their text and icon as with their surface.

Why not? Right? So let's go ahead and let's create a surface grouping. surface

uh primary uh default.

That's it. What do we have for our primary default? We have a 500. Why not

primary default? We have a 500. Why not

make it the same thing? So, primary 500 default hover 600. That simple. Now, you're probably

600. That simple. Now, you're probably asking is Kirk, what about our on color?

Does a surface need an on color? Not

really because services generally don't go into um checking for accessibility.

It's usually only text and icons that need to match that level of accessibility. So it's the text in the

accessibility. So it's the text in the icon that are going to need that on color to bring forward the right amount of wika uh color contrast. So I want to look at an example of us building out a

component now to show you how all these pieces come together. So if I just set this to learn more. Okay, simple button.

Let's just set this to medium and set this to like something like 16. Okay. Uh

let's go ahead just set this to the center and let's just add some auto layout. I'm going to go ahead apply our

layout. I'm going to go ahead apply our surface default.

Then what I'm going to do is I'm going to apply the text on color because our text primary is sitting on color. If this is

a primary button, we're going to be using the text primary because again, think Coca-Cola. For the purposes of

think Coca-Cola. For the purposes of this exercise, we're using the same color as air and our primary brand color. So, in this case, if we're

color. So, in this case, if we're Coca-Cola, our button is going to be red. I'm using our primary text color

red. I'm using our primary text color and our primary surface color. Now,

what's one thing that we notice right away is a lot of designers assume that, you know, if they just pick the lightest color, the darkest color, it's going to be accessible. It's not the case. I can

be accessible. It's not the case. I can

guarantee you right now this isn't going to be accessible. So what we can do then is for our text primary on color. Let's

just go ahead and apply the white. So

our foundation's white and also our foundations white. That simple. So now

foundations white. That simple. So now

that looks a little bit more reasonable.

So if I was to create the component of this now and I'm going to go ahead add a variant here. I'm now going to swap this

variant here. I'm now going to swap this out. So if this is our defaults, so this

out. So if this is our defaults, so this is our type. Uh this is our default and then this here is our hover and this here is our hover. What are we doing?

We're still within the primary grouping, but we're just going to change from the default to the default hover and our text on color hover. It's really

that simple. So add a quick interaction that states while hovering, we are going from one to the other. Now, hopefully

you see how all of these different variables can start to come together a bit. And one thing I'm actually going to

bit. And one thing I'm actually going to do here while I'm here is going to bring back in uh just an icon. So, I'm just going to go ahead paste it in just so you can see it.

The same type of logic is going to be applied here where we have sorry the name from our old file. Let me detach this as well. where if this is all of a

sudden our icon primary uh on color, but one thing I didn't do is I didn't go ahead and change them back. Okay, so always be sure to change

back. Okay, so always be sure to change it back to our foundations uh foundations because again we changed the color of our text on color. So we should change the color of our icon as well.

Okay, and it'll probably make sense to go through and do that for all of our other um items for error information, warning, success, disabled, so on and so forth. We're going to keep that white as

forth. We're going to keep that white as our on color. Same thing here. So apply

our icon on color hover. So now all of a sudden for hover we're using all of our hover elements and for our default we're using all of our uh primary elements not

in a hover state. Hopefully that makes sense as to how all these variables can come together to actually go ahead and build some components. So also one thing

that I do want to to cover is the idea of a subtle variable. Okay. Because if

we think about an alert, okay, so if I was to detach this and we think about an alert, you might not want might not want

all your alerts to uh warning, you know, like to to be this sort of chunky shade.

Sometimes it makes sense to introduce another variable type. Okay? And we call that our default subtle. And again, this is more

subtle. And again, this is more advanced. I'm touching upon this subject

advanced. I'm touching upon this subject is because people ask about it and I've seen it covered wrongly a bunch of different ways before. Um, so this is

default subtle. This would be our

default subtle. This would be our default subtle hover. And essentially what you'll be

hover. And essentially what you'll be doing is selecting this the lighter shade of this. So this would be our 150.

And then we apply that shade accordingly. Then what we would do is we

accordingly. Then what we would do is we would select the uh where is it the text primary default and then the icon primary default. Icon

primary default. Okay. So that's another option if you don't always want a lot of your elements to be that harsher surface color. Okay. Is to introduce this

color. Okay. Is to introduce this default subtle or default subtle hover.

Again, I'm not going to cover that across all of them because that's we're getting into more advanced componentry, more advanced variables, but for those who are curious and for which I do get a

lot of questions around is how do you create lighter shades of components?

What are the variables called? That's

the approach that you're going to want to take. Okay, so now let's keep moving

to take. Okay, so now let's keep moving down the line here. So, we have our primary. Let's now focus on our air.

primary. Let's now focus on our air.

So, for this, and sorry, one thing I wanted to confirm. Okay, so we did change that, which is perfect. And also

want to one thing that I did do is I just changed our on color on color hover to that foundation's white. Just looks a little bit cleaner with our color contrast. Okay. So I'm going to change

contrast. Okay. So I'm going to change this to our air uh air 500 air 600.

And let's go ahead and duplicate the group for our information, our information 500, our information 600. Let's duplicate this. Let's then go

600. Let's duplicate this. Let's then go with our warning.

Our warning 500, warning 600. There we go. Um, and

what's the else do we need? Our success.

Sorry. Uh, duplicate this group for our success.

So, our success 500 and our success 600.

And we're also going to need a surface disabled. So, what we can do is we can

disabled. So, what we can do is we can have a uh surface disabled. Again, we're

not going to need the hover for that.

So, just a surface disabled. We're just

going to select our neutral, something like a 150. Okay. And again, we're not going to build out all the components. I

do have other series for that. Uh, check

them out below. Uh, and our build a design system series is quite popular.

So, check that out where we actually build out some of these. And again, our more advanced build design system is as part of our UI collective academy. So,

also be sure to check that out. And this

here is our disabled. Okay. So, we have everything roughly in some decent shape.

So we have our text, we have our icons, we have our surface, but now what about our borders?

>> So within our surface as well, sorry, I forgot to actually re um forgot to include this part. So I might look a little different. My lighting might be a

little different. My lighting might be a little bit different. Um but so lubing back to this one now is with your surface.

One thing that we need is we need also define page surfaces, uh, card surfaces, like those types of items that aren't necessarily associated

with one of the colors that that we have here. They're more think of them like

here. They're more think of them like generic. So, within the surface category

generic. So, within the surface category is you don't even need to really put them in a grouping. You can if you want to, but we're going to create some variables. one for page. And for our

variables. one for page. And for our page, let's just tie it back to uh our foundations white.

We're also going to introduce a uh page secondary page secondary, which might just we might just leave that as white as well, but you might also want to tie that back to like a neutral 100

dependent. And then we're also going to

dependent. And then we're also going to need a default surface. Now, I always like to think about default surfaces as like a card. If you have a a card on a background, what's the color of that?

because it's not always like a primary color. Usually it's like a white or like

color. Usually it's like a white or like a like a neutral color. In that case, we're going to tie that back to that foundation white. Make sure it's in our

foundation white. Make sure it's in our alias, which it is perfect. And then you might also want a second color for a card.

Like maybe you have the majority of your cards are are white. Maybe you have some that are neutral. So you can call this uh our uh what's the word here that we use? Sorry. Uh our secondary. It can be

use? Sorry. Uh our secondary. It can be a default secondary. It can also just be a secondary if you want. or we can tie that back to like a lighter shade. Okay,

so these are also some services that we're going to need inside of our surface grouping for things like our page and also our cards. So the beauty with things like your borders is very similar to what we did with our text and

our icon where they're more or less the same just given our icon doesn't have our default and our on color is our borders are more often than not the

exact same color as our surfaces. So

what we can do, we can actually just duplicate this and call this our border. Okay. So what

essentially we're doing here is applying the border. So strokes, this is going to

the border. So strokes, this is going to be our border default. This here is going to be our border default hover.

And notice that they're the exact same.

Now, oftentimes what I get is that, you know, if they're the exact same, why do you need it?

Now, my response is always scalability.

What if they're the same color now, but maybe your brand standards change very slightly where maybe this becomes a very slightly darker, slightly lighter shade to add some more definition to the

border. Okay? So even though they are

border. Okay? So even though they are the exact same color, still applying the variable goes a long way in terms of consistency.

So again, oftent times a lot of designers skip the border because they think my border is going to be the exact same as my surface or why even need it.

That right there, great example as to why you need it. Now, one thing we're also going to want uh to include is we do need to start thinking about some of

our statuses uh or states. So, if you if this here is our our defaults, okay, so we have our

defaults. Uh we have our hover.

defaults. Uh we have our hover.

What if an object is in focus? And by

focus, I mean you're actually hitting the tab key. Again, maybe you're visually impaired um and you're on a screen reader. You're on a tab key to

screen reader. You're on a tab key to navigate your application. If something

has been clicked, how do you know it's been clicked? That's what's called a

been clicked? That's what's called a focus element.

So, with that, the most common treatment that you have for focus is where it's just a box around your

component. Sorry, let me remove this

component. Sorry, let me remove this here. where it's just a box around your

here. where it's just a box around your component where and again I would take a look at our build a design system series to learn a little bit more about this in

depth where it highlights to the user what is selected essentially what is in focus what has been clicked so

we're going to need a treatment and again I always do two pixels on either side this to left and right and then also top and bottom Um, and essentially we're going to need

a treatment for our borders that covers this focus use case. A lot of designers leave this out. Again, if you have questions on focus, check out our build a design system series where it covers this more in depth. But while you're

here talking about variables is all of our border colors, wherever we might have a button or an element that's clicked is, we're going to need a focus.

So what we can do is uh for our focus is I always set it the same value as the default. So in this case our 500

default. So in this case our 500 uh this is our focus our air 500.

This is our information our focus information 500. This is our warning. This is our focus warning 500.

warning. This is our focus warning 500.

This is our success. This is our focus.

success 500.

Now, you might not need a focus for all of these things. In this case, let's just make the assumption that we had a success button, that we had an information button, so on and so forth.

And that's why we're going to need the focus because we have elements in that grouping that can be clicked. So, what

we would then go ahead and do is we would apply, in this case, our uh border.

Oh, I'm sorry. Forgive me. I

accidentally applied these to the wrong group. So, let me go ahead delete that.

group. So, let me go ahead delete that.

Uh, delete this. Thanks for calling me out behind the scenes.

Sorry about this. Is the thing about making these videos is I make mistakes in real time so you can see me make those mistakes. So, this here is our

those mistakes. So, this here is our focus. Sorry about that. Let's clear

focus. Sorry about that. Let's clear

this up. This here is going to be our focus, which is that 500. This here is going to be the focus, which is that 500. Uh, this is the going to be our

500. Uh, this is the going to be our focus, which is going to be our 500. And

then this here is going to be our focus.

So, my apologies there. Thanks for

calling me out behind the scenes. So

then what we can go ahead and do is apply our border primary focus to our primary button. And now we have what

primary button. And now we have what that element would be in focus. Now

couple things that we're missing here is our is our width. Okay, we're always going to want to apply our width variable. So this is where we can go

variable. So this is where we can go ahead and apply just that one pixel border width all the way around. What we

can also do is we can even apply a radius. So we can apply a radius. Let's

radius. So we can apply a radius. Let's

set that maybe to something like four to make that nice and round. And we're

going to want to do the same for our focus state as well to keep it consistent. Four. You might also even

consistent. Four. You might also even want to go uh eight a little bit. Okay.

So, basically what we did there is we just built out our entire mount collection and showed you how you can apply these variables, how similar they are, how they share similar properties

or attributes. Um, and that it doesn't

or attributes. Um, and that it doesn't need to be super complex. A lot of designers tend to over complicate your maps collection thinking everything is a little bit different and that is just not the case. Also within our border

collection is we are going to need some more basic groupings because again these are specific to specific use cases.

What's your primary border? What's your

error border? But what about like a border around a card? So very similar to how we looked at with surface. So what

we can do is add another item here that we're just going to call our border default. And then what we would do is we

default. And then what we would do is we would create the alias of that uh and this year would become like our neutral uh 100. Okay. Also too at the same time

uh 100. Okay. Also too at the same time then is we're also going to need to include um like an on color border. So

for the same purpose as if this border resting on a specific color maybe there's a little bit of tie in like the background is that neutral 100. This

here might tie back to that foundation's white. Okay. Um, so in a nutshell is you

white. Okay. Um, so in a nutshell is you also do need some more general borders for think about like borders around a specific card was not tied in with any of the individual use cases like a

primary button or error. Um, just more general borders. So there's a couple

general borders. So there's a couple housekeeping items that we should probably do. If you're going to look in

probably do. If you're going to look in here, you're going to notice that some of our names and map are all lowercase, but um, in our alias, like that first letter is usually capitalized. So that's

something we would probably want to go ahead and clean up. I'm not going to do this right now, but one thing I want to do is talk about different modes. Okay?

Because we've already talked about uh our alias mode where we have a different brand, but then we also need to talk about what if we're light mode, dark mode, and that's always applied at your

mouth collection. So, what I'm going to

mouth collection. So, what I'm going to do is I'm going to apply a light mode.

And then I'm going to add another mode here, which is going to be our dark mode. Now, dark mode is surprisingly

mode. Now, dark mode is surprisingly easy to set up. The first thing you're always going to want to do when you're going dark mode is just inverse the colors that you already have. What I

mean by that is a lot of designers, they'll they'll try to go through and perfect um each one and they test color contrast as they're going. The issue

with that is if you test uh a component on dark mode, it doesn't work. and you

make tweaks to that color to make it work on light, but to make it work on dark mode in terms of accessibility, that might cause another component to no

longer work in terms of your dark mode.

So, don't go but don't go component by component to start. Basically, just

change all of the dark mode variables at once and inverse them and then see what it is that you have to work with and scale in from there. Okay, so what we're going to do is just inverse them. If

this is our darkest color on light mode, uh this is going to be our lightest color of neutral on dark mode. Same

thing. This is maybe our 200. And again,

when you're going through this, you should really just be going this quickly. Okay, so this is our

quickly. Okay, so this is our foundation's black. Foundation's black,

foundation's black. Foundation's black, neutral 100, neutral 950. Neutral 100.

Uh neutral 950. Text primer. Let's go

600, 400. This is where you can kind of play around with it. This is our 500.

Set this to black. Like when you're building out dark mode, you should be going this quick. You shouldn't even be thinking about it because you're g to go inverse them first. See what it is that

you have to work with and then make pivots. 600 500 black uh black.

pivots. 600 500 black uh black.

There we go. 600 500 black black warning 600 warning 500 black 600

500 black black disabled 600 uh neutral 700 and it's okay to make mistakes here too

you're going to go ahead and color contrast uh Black and then black. How many more left do we have to go? Quite a few.

We're going to do it all together.

600 500 black 600 500 black 600

five Oops, sorry. 500

black black and then our black. Let's go with our 600. And let's go with a 700. Almost

600. And let's go with a 700. Almost

there.

Sorry. Feel free to skip ahead here if you if you want to.

I know it's tedious.

There we go. Beautiful. So, in an ideal world, you have some UIs that you can test this with. What we're then going to do is let's just set this to black. And

then we're just going to inverse this.

So, this going to become our dark mode.

So, you can see how things pivoted a little bit. Again, depending on the

little bit. Again, depending on the brand, you might have a little bit more of a different different change. Um but

uh to light. There we go. So you can see how things differ. And that's where you should just get started with dark mode.

Just inverse them. See how they work.

Okay. But now we can even get a little bit more complex. So we can add in a different brand. If this is Coke, maybe

different brand. If this is Coke, maybe this is Diet Coke. Because you're going to remember that in our alias collection, what we did is we introduced that second brand where the only thing

that changed was just the primary color.

So even here too, we can set this to Diet Coke. set this to light and see how

Diet Coke. set this to light and see how the colors are just are they're changing a bit. Okay. Now, really that simple to

a bit. Okay. Now, really that simple to introduce other brands light mode, dark mode for um your design system. Now,

there are some nuances with this. Let's

take a look at that next. Okay, so let's set this back to All right, sorry. Just

set this back to our light mode here is I kind of broke like a golden rule of things where I built out my dark mode.

If I go back to mapped without being 100% sure what what's the word that I'm looking for? Um

what the contrast success rate is on light mode. And the biggest mistake that

light mode. And the biggest mistake that designers make when they're going from light mode to dark mode is they haven't finalized their light mode first in terms of making sure that all of their

components meet accessibility standards and they just jump right into dark mode.

What happens then is you're going to have to be checking light mode while you're checking dark mode and constantly flipping back and forth between the two changing variables. Maybe you need to

changing variables. Maybe you need to introduce a new variable um at one point, maybe like a 925 or an a,000 or an 850 which you might not have already.

What that does causes a whole lot of confusion and a massive headache. So my

suggestion to you is not even to worry about a dark mode until you've gone through each of your components, built them out on light mode, verify that they work for color, contrast accessibility, because then you know that you don't

need to touch light mode. It's only dark mode that might need a little bit of tweaking. Okay? Otherwise, again, you're

tweaking. Okay? Otherwise, again, you're gonna be bouncing between light mode and also dark mode. Now, another thing that I do want to cover is around the idea of

our multibrand.

Using this type of approach where we add another mode inside of our alias works best if our brands are a little bit similar. If you think about Coke, if you

similar. If you think about Coke, if you think about Diet Coke, they share a lot of the same colors here, but the only real difference is like maybe the primary is different. Maybe they might use a different, you know, neutral

color, maybe a different warning. It

works best when things are relatively consistent and there's not a ton of, what's the word I'm looking for? Changes

that would go into your alias collection or that second brand.

So, the other approach here, which is a little bit less preferred, is say you didn't have if you were just to delete

this, okay, and your brands were entirely different. So if you think

entirely different. So if you think about Coke and you think about Fanta, Coke and Fanta are both owned by the Coca-Cola company. Both of those brands

Coca-Cola company. Both of those brands have completely different colors.

Completely different brands, completely different logos. That's where it might

different logos. That's where it might make sense for you to actually do this.

For you to actually re rename this as brand Coke. Alias Coke.

brand Coke. Alias Coke.

Alias Coke and then maps Coke.

because it's still keeping everything within one file. But if the brands are that much different, then using the alias approach probably isn't best. They

might need their own collections at that point. Okay, that's what's called the

point. Okay, that's what's called the house of brands approach. So, it's a little bit more complex. But a big mistake I see

more complex. But a big mistake I see designers doing is trying to fit brands that have completely different color scales inside the alias because those components might be entirely different.

The way in which those colors are applied to components might be entirely different versus if the brands are similar. And that's what we called a

similar. And that's what we called a branded house where if you think about Coca-Cola, they have Coke Diet Coke, Coke Zero. That's a branded house. But a

Coke Zero. That's a branded house. But a

house of brands would be Coke, Fanta, Sprite, where all the colors are entirely different. I do have a video

entirely different. I do have a video that goes a little bit more in depth into that. I will link that below and I

into that. I will link that below and I might do another video on that in the future. So, be sure to subscribe for

future. So, be sure to subscribe for that. But those are just some nuances.

that. But those are just some nuances.

So, at a high level, make sure your light mode passes accessibility. It

works. You're happy with your light mode before you move on to your dark mode.

And having another brand at the alias collection does not work for every single use case. Sometimes it does make more sense to have it inside its own collection entirely.

>> Okay, so now what I'm going to do is I'm going to introduce everyone to the responsive collection. Now I don't

responsive collection. Now I don't really have slides for it cuz like kind of got to go through it to like fully recognize um its use is the responsive

collection is here to make sure that all of our designs are responsive. Okay, the

name serves its meaning. Now, what I mean by that is if we look at if we think about uh sorry, I'm going to close that for a sec. Maybe move this off to the side, but sorry, my video bar side.

Um is say we have like this light card like this, right? It's um you know, just a just a card. And let's probably give give it a little bit of a better

example. So, desktop MacBook 1440 and

example. So, desktop MacBook 1440 and let's just set it to like gray. Okay. So

say we have this card here on uh desktop.

When I switch this to a mobile frame, what's going to happen is that sure a lot of the elements inside might be set to fill. So those are going to be

to fill. So those are going to be responsive, but the parent width of the card is going to need a value defined

for its width. So, as you're going from desktop to tablet to mobile, the responsive collection allows items like

our headings, our body, our caption, our paragraph size to condense again because we're going from, you know, like an H1 on desktop to an H1 on mobile. But it's

also going to inform what the widths would be on that mobile device. Or if I was condense this in all of a sudden our mobile card

might look something like this.

It's in the responsive collection where we're going to define where and how these things are going to shrink. Now, it's a confusing topic, but

shrink. Now, it's a confusing topic, but I promise you we're going to break it down a little bit more in depth. So,

that's an introduction to the responsive collection. Okay. So, inside of a

collection. Okay. So, inside of a responsive collection, probably where it's best to start to get your feet wet is in terms of your different font

sizes, your headings, your bodies, so on and so forth. So, what I'm going to do here is I'm just going to create uh a new group that we're just going to call fonts, and maybe we want to start off

with our uh headings, and then our H1.

Okay. Now, this is where things can get pretty particular because an H1 has a text size. because it has a paragraph

text size. because it has a paragraph spacing. It's going to have a line

spacing. It's going to have a line height. So, we're going to want to

height. So, we're going to want to create groupings for each of those. So,

our text size, our text size, our paragraph spacing, paragraph spacing, uh our line height.

Okay. Then what we can do is we can define what these are, what these values are across our desktop, tablet, and mobile. So, we can create three modes to

mobile. So, we can create three modes to do this with our first mode being that desktop our second mode being the tablet and

then our third mode being the mobile size. Okay, one thing that's also

size. Okay, one thing that's also important to note here is we go back to our all variables is we're going to want a number variable for our sizing. So, uh

frame width uh frame width and we can just leave this as is. Okay, so we can just set this maybe to a 1440. Uh this

our tablet can maybe be 1024 and then uh our mobile can maybe be 440. Okay, we

don't need to tie these back to the variables inside of our of our brand collection and just because we don't really need to like it's it's very rare.

Why would we have a 1440 whiff? Okay,

basically is what I'm trying to say. So

you don't need to you can create spacing variables for those in the scale in the scale collection if you want to. We're

not going to do that. I have seen that done before. So essentially what these

done before. So essentially what these are is because depending on where you work uh you might have different sizes

of frames. So you might have a desktop

of frames. So you might have a desktop that's a 1440. Uh you might also sorry I'm going to change the background of this is you might also

have uh I worked at an agency once and they always did their designs in 1920 by 1080 just for a number of different reasons. So essentially what this is

reasons. So essentially what this is going to be doing is defining when you change the mode what the sizes of the frames should be. So desktop 1440, tablet 10 1024 and mobile 440 just as an

example. So that's the purpose of that.

example. So that's the purpose of that.

Okay. So let's close this and let's delete these. Now a couple things that

delete these. Now a couple things that we're going to notice here is we're also going to want to create groupings for all of our different uh h tags. Okay. So we can duplicate this

tags. Okay. So we can duplicate this group this here. Oops. Sorry. I have one an extra one here. So, this can be our

H2 H2. This can be our H3 H3. This here

H2 H2. This can be our H3 H3. This here

can be our H4 H4.

This can be our uh H5 H5. And then this here can be our H6 or

H5. And then this here can be our H6 or H uh six. Okay, just like that. Oh, I

spelled line height wrong across each of them. Oops, sorry, my mistake. Line

them. Oops, sorry, my mistake. Line

height. Line height. line height. Line

heights. Line height. God, I'm so embarrassed. Line height. There we go.

embarrassed. Line height. There we go.

Okay, so we have all of these set up. We

can also create additional groupings for uh what we might call our copy. So, this

is where we can get into things like our body size, uh our caption size, and you can again depending on how you want to go about things, um whatever's specific for your brand. What I actually always

like to do is have like a body large, uh, a body, a body, and then a body small, small, and then down here, you might have a caption. Okay, so that's how I

like to break things up. So again, we have our text size, paragraph spacing, and also our line height as well. And

the line height is also spelled wrong here. Oops.

here. Oops.

Line height. There we go. Beautiful.

That one is wrong here, too. Okay, so

that's sort of an introduction as to how we can set up uh our font sizes so that they're responsive across desktop, tablet, and mobile. Now, when it comes to creating your font size, like how

does it work? And we're actually going to introduce a tool called type scale for this. It's going to allow us uh to

for this. It's going to allow us uh to build out these individual scales. And

one thing I noticed really quickly, sorry, forgive me, is I accidentally made these uh string variables, not number variables. you're going to have

number variables. you're going to have to go back and adjust these to make them number variables. So my apologies there

number variables. So my apologies there everyone, that's on me. Okay, so in order to build proper type scales, there's a bunch of different tools out there that can help you do it. I use

this tool called type scale. Okay, I'm

going to walk you through it. One thing

that's important to note right away is you're going to recall when we were setting up our initial uh responsive collection and we added in our body size. We just had a base body. We had a

size. We just had a base body. We had a body large and body small. Okay, your

body size. Again, this is font dependent, but should generally always be 16 pixels. Anything below 16 pixels, you start needing to be a little bit more careful

around things like accessibility. Okay?

But if you have a base paragraph size of 16 is you never ever ever really need to worry about accessibility when it comes to your base body font. Okay? Word of

advice from me to you. Awesome. Now, one

thing too, again, it gives you all these different sizes in REM, pixels, and points. Again, we're Figma, so we're

points. Again, we're Figma, so we're just going to use pixels. And it also has these scales that you can choose from. So, we're going to use uh our

from. So, we're going to use uh our major third scale for start. Doesn't

really matter. You can tweak this based on sort of how large you want some of these things. Um, again, you go to

these things. Um, again, you go to augmented fourth, perfect fifth, where everything's like really, really large.

You know, you want to go smaller, major second. Uh, but we're going to choose

second. Uh, but we're going to choose major third for now. Okay? And when I go through and do this, I do get a lot of push back being, "Oh, your H1's too small." I know it could 60's whatever,

small." I know it could 60's whatever, pretty small for an H1. I'm just

including it here for now. Okay? It's an

example. Um, beautiful. Now, one thing that's important to note here as well is when I navigate to pixels, what what do you notice? Decimal. And you're probably

you notice? Decimal. And you're probably behind the camera right now saying, "Kirk, we can't have decimals as a font size. That doesn't make sense." You're

size. That doesn't make sense." You're

right. Like, it it doesn't make sense.

you don't want to have decimal sizes.

So, this is where a lot of um videos that I've seen covering this topic go astray is because they say just choose any number in and around the number that

it gives you. They say choose 39 uh for H3, choose 49 for 48. But what's the issue with that is it doesn't follow a natural grid. It's not following a

natural grid. It's not following a multiple of something. So all of the sudden is your text sizes are going to go up incrementally or down

incrementally a different ratio and it kind of makes things look a little bit weird. So what you're actually going to

weird. So what you're actually going to want to do is round all of these numbers to the nearest multiple of a specific value. Now we're going to choose a

value. Now we're going to choose a multiple of four. So let's look at that next now that my preamble is out of the way. Okay. So what I did is I just

way. Okay. So what I did is I just basically took a screenshot here of the particular scale. I want to go through

particular scale. I want to go through these examples together because there's actually some math behind it. Okay, so

what we're going to do is if we look here at the left hand side, sorry, I'm going to move this out of the way and see if I can condense this any anymore, which I can't, so apologies. Is you're

going to notice here, okay, we have a line height set to 1.6.

What we do, again, you can change this around as much as you want because line height depends on a lot of things like font and all that fun stuff, is eventually what we're going to be doing is we're going to be using this line

height value to calculate our paragraph spacing and our line height. Okay, we're

going to get to that very shortly. But

what I'm going to want to do is we're going to want to start with our text sizes for all of these elements. And

maybe what we're going to do is we're going to start off with maybe uh our let's start with our body. Okay, so our

base body size has a uh text size of going to be 16. Okay, our body large in this case can be pretty similar to our H6 which is going up to 20. Okay, it

might just be a different font treatment. Um heading might be a little

treatment. Um heading might be a little more bolded. Again, there's different

more bolded. Again, there's different things that you can do there. Body

small, I'm actually going to set our caption to 12 in this case and then our body small to 14. Okay, that's just generally how I set things up. I know

that's not necessarily included here, but that is generally how I do set up my copy. So, I set my text size to 20, my

copy. So, I set my text size to 20, my uh for my body large, my body text size to 16, my body small text size to 14, my body and my caption size to 12. That's

just how I set things up generally more often than not. Even though some of those values are not included here, I'm just doing that just from my own experience. But where things can get

experience. But where things can get interesting is the heading because look, H6 in this case is going to be, sorry, I have these weird slashes here, is going

to be 20. Okay, that's easy. But our H5 is set to 25. But remember how I was saying is like that doesn't necessarily follow a logical scale of things sort of

go up in like these random amounts every time. Like it just makes things

time. Like it just makes things difficult. So what we're going to do is

difficult. So what we're going to do is we're going to round these values to a multiple of four. Okay? So the closest

multiple of 4 to 25, it's 24. That

simple. Our closest multiple uh of to 4 to 30. So we go 20 24 uh 28 32. So our

to 30. So we go 20 24 uh 28 32. So our

text size for H4 is going to be 32. H3

closest multiple of four is going to be 40. H2 is going to be 48

40. H2 is going to be 48 and then our H1 is going to be 60. Okay.

So when it comes to our text sizes is really that simple is we're taking what's given here which is in decimals and we're just making it round to the nearest multiple of four. Keeps things

clean. It keeps things easy. Okay. So

creating text sizes it's really that simple at the end of the day. But where

things can get a little bit tricky is your paragraph spacing and also your line height. So let's take a look at

line height. So let's take a look at that next. So, where things get a little

that next. So, where things get a little bit tricky is with your paragraph space and also your line height. So, you're

going to notice this line height multiple here that I from the screenshot that I took. And what we're going to do to to calculate our paragraph spacing and our line height is multiply it by

that number. Okay. Now, when it comes to

that number. Okay. Now, when it comes to paragraph spacing, it can be preferential. It has less of an impact

preferential. It has less of an impact in the grand scheme of things. Um, so

you don't need to multiply it by the multiple. At least with a lot of clients

multiple. At least with a lot of clients that I've worked with, if they chose not to, I'm working with their design team.

Um, you can sort of go rogue from it if you want to, but for line height would highly suggest it. Now, what we're going to do is we're going to start off with that 1.6 value, but we might want to tweak it to like 1.4. So, I'm just going

to write in some text here. Lauram Ipsum

is the standard text of the world.

And we're set it to our text size of 60.

And then what we can do here, oops, that doesn't look good. Is with our paragraph spacing or with our line height, what we can do is multiply 60 times uh again, we

can do math in here. So I'm using a little star times that 1.6, which is 96. So let's set this to 96.

What's one thing that we notice there is it's I think it's the line height's a little bit too far apart if I'm honest.

Uh, so we might want to set this to 96 * or 60 * 1.4.

Let's try it out. So maybe this is set to 84.

That's better. Maybe we want to go time 1.2. 60 * 1.2, which is 72.

1.2. 60 * 1.2, which is 72.

And I think that's pretty good in the grand scheme of things. Okay. Now, uh,

when it comes to, uh, our paragraph spacing, uh, so the space between a lot of those paragraphs, we can just see what it like looks like. Okay, if we had to enter our H1, that is more or less

what it would look like. So, maybe we can just keep it the same for now. Okay,

so keep that uh to 72. So, for paragraph spacing, again, just test it out as you go. It can follow the same multiple. It

go. It can follow the same multiple. It

doesn't have to follow the same multiple. You could have more paragraph

multiple. You could have more paragraph spacing, less paragraph spacing, but just for the purposes of this exercise, maybe we're going to keep paragraph spacing and line height the exact same.

Does not need to happen that way. Okay,

just calling that out right now. Okay,

so let's keep going down the line here.

So, paragraph spacing. So, what we're 48 or line height, sorry, 48 48 uh time 1.2, which is 57.6. And we let me make

sure I did that math right. 48 time 1.2, which I did. Okay. So even in the case where we do get some of these multiples, what we're going to do is we're going to

look for the next closest item. So 48 52 56 uh 60. So this would be 56 in this case. I'm just going to set this to 56

case. I'm just going to set this to 56 as well. Uh then 40 * 1.2 40 uh * 1.2

as well. Uh then 40 * 1.2 40 uh * 1.2 is 48. So that keeps things nice and

is 48. So that keeps things nice and easy. 48 uh line height 32 32 * uh 1.2 2

easy. 48 uh line height 32 32 * uh 1.2 2 uh that's 38. So closest would be uh 40

and 40 for these uh H5 24 * 1.2 1.2 that is 28.8. So this is 28 and then this is

is 28.8. So this is 28 and then this is 28 and then this here is 28 and then the paragraph spacing for H6 20 * 1.2

is 24. So this year can also be 24.

is 24. So this year can also be 24.

Okay. And we can test this out uh by 20.

So this is 20 and then this is 24.

And if we condense this down, set this to to hug because we can sort of see what this looks like. And this is set to 24. So we can start to visualize what

24. So we can start to visualize what this text is really going to look like.

Okay, we can do that as we go along.

Beautiful. So then we can do the same for our body large because these are the same. So uh this is also going to be 24

same. So uh this is also going to be 24 and this is also going to be 24. Uh 16 * 1.2 1.2 2 19.2. So closer would be 20. And

then 20. Oops, not 29. Sorry, 20.

And then we're going to go with our uh 14 * 1.2. 14 * 1.2 is 16.8. So this is 16 and 16.

And then our 12 * 1.2.

Uh 14.4. So closely would be 16 and 16.

Okay. So, when it comes to setting up your your um type scales, that's a good approach that you can take. And you

might want to do some refinement here.

Okay? And this is just a quick example I did for the purpose of this exercise.

Every brand's going to be different. You

might want to follow 1.4, 1.6, 1.2. Now,

one thing as well that we want to think about is we go back to our brand collection and our scale. Ideally, we

would like to have a lot of these values in our scale. Okay? because as our scale, it's sort of the central source of truth for the numbers that we might want to use in our design system. But

looking in here, we might not have all of those values. So you'll recall earlier on in this tutorial, I was talking about how you should build out all of your text, all of your items

first before you actually go ahead and build out your scale. So what you would want to do in an actual sense, then take the values that you have here in your responsive collection for your desktop and also your your tablet, your mobile,

and then add them back into the scale.

Okay. So, what we're now going to do is uh we're going to take a little bit of a different approach now where we're actually going to look at uh how do we create those mobile sizes. So, here we are within type scale. Okay. And now

let's look at mobile sizing and how I create those specific sizes. Now, when

it comes to your mobile, because we have all these different scales here that I covered before, your mobile's a smaller size. So, just select a different scale,

size. So, just select a different scale, a smaller scale. Notice how the H1's and everything, like all the text sizes went down. It's really that simple to get the

down. It's really that simple to get the scale for your mobile size. So, let's go ahead. Let's take a screenshot of this

ahead. Let's take a screenshot of this and then build out our mobile sizing real quick. We're not going to look at

real quick. We're not going to look at tablet just as it's probably going to be a two-hour long video anyway. Um, I have client work I need to do. So, we're just going to do mobile. We're going to skip over tablet. So, as I mentioned here,

over tablet. So, as I mentioned here, we're just going to get rid of our tablet for now. Um, and what we're going to do is we'll start off with our copy actually. Now, for desktop and mobile,

actually. Now, for desktop and mobile, your body size, your paragraph sizing should really always be the same. Okay?

Okay. To maintain that level of consistency versus someone's using your a website or whatever on a desktop versus on a mobile, you want to maintain that level of consistency. Okay. So,

we're going to set this to 20 24 uh 24.

Just really just duplicate it. 16

20 uh 14 uh 16 16 uh 16

uh 12 16 and then you know 16. Okay. Um,

beautiful. That easy. Uh, then what we're going to do, we're going to go into uh our responsive collection uh, sorry, in our our headings for our responsive collection and do roughly the same thing that we did before. Okay. So,

we have 48 48 * 1.2 48 uh, * 1.2. So, that should be 56 actually or 1.2. Yeah, 57. We

already classified that as 56. So, set

this to 56 and this to 56. Again,

paragraph spacing, it doesn't need to necessarily follow this. You can play around with it. I'm just doing it here for the purpose of this exercise. Okay.

So then we have our 48 * 1.2 48 uh oh sorry I got to look at on the left here.

So 40 * 1.2 sorry no our text size is going to be 40 is going to be 40. Sorry I'm getting tired here. Uh and then B's are going to

tired here. Uh and then B's are going to be times 1.2. So 48s and then 48s. So

for our H3 we then have 33. So our

closest value then 2832.

So just going to be 32 32 uh * 1.2 is going to be 38 which are close going to be 40 and then 40.

And then our text size for H4 is going to be 28.

28 * 1.2 33. So that's 32. 32.

33. So that's 32. 32.

And then our H5 is going to be 24. 24 *

1.2 28 28 and also 28. And then our H6 is going to be 20. Uh paragraph spacing is going to be 24 and then 24. Okay, so

our H text is really going to be also the same on desktop as mobile. Okay, so

I hope I didn't make any mistakes there.

If I did, feel free to call me out on that. Uh but that's how you can go ahead

that. Uh but that's how you can go ahead and create some of these different text sizes for across your desktop and also uh your mobile for the responsive. Okay,

but there's a larger subset to this is things like spacing is if again if I have cards for things like a width, what is that on a desktop versus on like a mobile? Where do I define that? And

mobile? Where do I define that? And

there's actually another grouping within this responsive collection that we could create. So, in order to do what we're

create. So, in order to do what we're going to do next, this is going to be super specific to your brand, but I always say you can't sort of come up with this on your own, is you do need to have designs that are already available.

So, you know, you're familiar with the spacing, you're familiar with the padding, you're familiar with the gap between a lot of these elements. So,

let's look at these as an example. So,

here I'm noticing these are um pages that I got got from Untitled UI. Again,

these I think that I got these for free um from their free kit. I could be wrong. I'm not too sure. But um these

wrong. I'm not too sure. But um these here I can see he uh Jordan who created the kit, he's using 64 uh padding and 64 gap and 96 padding. He's using 64 and

96. Again, when we go in here, he's

96. Again, when we go in here, he's using 64 and 32. So let's keep a running track of sort of the values that he uses. So he's going he's using a what is

uses. So he's going he's using a what is it? So he's using a sorry I should have

it? So he's using a sorry I should have added something in there. So let's go like a 96. So, he's using a 6496 64 96 64

um 6496 6496. If we click in here, uh 32

6496. If we click in here, uh 32 uh 32 um let's see, let's see what else he's

got. 64 96 again and a 32. So, he's

got. 64 96 again and a 32. So, he's

using 64 96 32 pretty consistently.

Okay. So, if we were to add another 32 onto uh 96, uh 96 + 32, uh 128. I knew that was going to happen.

uh 128. I knew that was going to happen.

I just didn't want to get it wrong. So,

128. So, let's assume we're using a lot of these values for our spacing. Okay?

And this is why I say it's super important for you to already have some designs to go off of when you're building out your responsive collection.

Okay? And we want to introduce you to a topic uh that we came up with for some of our clients like a number of years ago that we call a jumper variable. And

what this does, and I've covered it before in the past. I did a video on building out responsive variables. Like

it's from like last year. It's pretty

old. Uh where we actually cover like this topic a little bit more in depth.

We're going to cover it now using some of these spacing variables that uh are in the kit that we just looked at. Okay.

What we're going to do is we're going to take these variables here and assign them a value. Okay. Okay. So maybe this is our um small, this is our medium, this is

our XL, and this is our uh our 2XL.

Okay, so again, super important for you to have an idea as to what your designs look like and what the spacing between elements is, what the gap between elements is before you do this. So let's

create a new number grouping uh that we're just going to call spacing.

Uh spacing. Sorry, I don't know where these came from. Let me delete those. Uh

that we're just going to call spacing.

Okay.

And we're going to put it inside of its own group. And maybe we're going to go

own group. And maybe we're going to go start off with an Excel. XL to medium.

Now, we've used the term jumper before in the past, but now everyone's using jumper. So, I'm going to use spacing.

jumper. So, I'm going to use spacing.

Take that. No, I'm kidding. Uh, so what this is essentially saying is we're going to build out variables for a bunch of different use cases that are that are going to happen in our design. So what

we're saying is that uh on a desktop the spacing might be or padding might be 96 but on a mobile we want or sorry yeah should be 96 but

on a mobile we want to take it to a 64.

It's just an option. So maybe we want to go uh Excel to small where on desktop that's 96 but maybe in a specific

element we want that to be 32.

Maybe we want to go from a 2XL to a medium because what mean we have one specific component that goes from uh 128

a padding to that 64 128 to 64. So

essentially what we're doing here is we're defining how the our modules our widgets what that padding would be and again this can work with things like

width as well on desktop and on mobile.

Now, one thing, a question that I get all the time is, Kirk, like if I have a ton of different items here, a ton of different spacing items, having a combination for every single one is way

too much. But that's why it's important

too much. But that's why it's important to build the designs first because you might not need every potential combination. And maybe if you have a

combination. And maybe if you have a 128, maybe will only go to a 64. Maybe

it won't go to a 96. Maybe uh a 96 will never go to a 32. only goes to a 64. So

it's that type of thinking and that type of audit that you need to do on your designs itself in order to build those nice responsive designs. Okay. So your

spacing variables or what a lot of people are using now in terms of like jumper variables. It sort of defines how

jumper variables. It sort of defines how the the padding the width how it jumps for specific elements or components from desktop through to your mobile. I do

know that can be a very very confusing topic. So if you have any questions on

topic. So if you have any questions on that, drop them below or ask on our community forum so everyone can can see the answers for that. If you do want to learn a little bit more about these spacing variables or jumper variables, I

do have a longer video on that where I cover these a little bit more in depth more in depth. So I'll link to that one uh below. Hey, thanks so much for being

uh below. Hey, thanks so much for being here and watching the video. If you want to support the work that we do at UI Collective, making sure this type of education is free for all, be sure to purchase our academy down below. I'll

put a link where you can see everything that goes into that. Also too, if you want to watch a video that I highly recommend, click right there. If you and if you want to watch our most popular video, click right there. Although it

does cover a lot of the similar topics, but we get into more similar more componentry a little bit later on in the series. Thanks so much.

series. Thanks so much.