Figma Variables Explained! Build a Scalable Design System Step by Step

In this tutorial, I will show you how you can create a design system from scratch using Figma and Figma variables.

We'll talk about design tokens, what are design tokens, and how to create design tokens inside of Figma. Uh how to create a scalable design system for your project. Currently, it's really

project. Currently, it's really important to create design systems for your projects because um if you're using MCP servers like Figma MCP connected to

cursor uh to uh create your websites for example or your apps um it's really important for these AI uh services to understand how your uh design is

structured. And in order to have

structured. And in order to have excellent results, you need to have a design system properly set up with variables that the AI will understand.

For example, what kind of um colors are used, how they're used, where are they used, and how you set up like typography and all of those things. And especially

outer layouts and design system uh with design tokens will help you structure your designs and will help you create your designs even faster and easier. Hi,

my name is Sergey. Welcome to my channel. And now without further ado,

channel. And now without further ado, let's create a design system from scratch. Okay, so I prepared the file

scratch. Okay, so I prepared the file already. Here we have the colors that

already. Here we have the colors that we're going to be using and we're going to be using for building our design system uh our design tokens. Uh and here

I have a small guide that will help me and you understand the structure of the design system that we are building. Uh

we're going to have three collections.

Um you can have more. Um in this video I'll show you how I do design system, how I make them with just three collections. And for me this is easy and

collections. And for me this is easy and uh it's enough for most of the projects.

And we're talking about like multi- pages uh websites. Currently I will be building uh an app. So uh I need a design system for it. uh and it's not

going to be something over complicated.

Uh and for most of the websites, you're going to have uh this and this will be enough. Uh if you're planning to work on

enough. Uh if you're planning to work on something really large, like really scale it up, but you can do it later on.

So basically, this is going to be your like um uh the beginning of your design system. Uh and then you can scale it up

system. Uh and then you can scale it up and uh multiply it by different um collections and add stuff. But this is like the base. Let's call it like the

base for any design system that you can do. And for the collections, we'll have

do. And for the collections, we'll have the base uh aliases and uh I use a typography as a different collection like an extra collection for it. Uh but

let's um start with colors. And again,

if you want to follow along with me, you can get this file from the description below. I will um save the link there. Uh

below. I will um save the link there. Uh

and you can use this guide as well for yourself. Okay. So for the colors, uh

yourself. Okay. So for the colors, uh what we need to do, we need to set up a color scheme which is going to be like the shades of the colors. Uh we're going

to go from lighter to darker shade. I'm

sure you saw this uh in in other projects or some design systems if you looked over the internet. Um I have my own way of doing it. I think it's really

easy. Um maybe someone else is doing it

easy. Um maybe someone else is doing it as well. and I'll show you this um life

as well. and I'll show you this um life hack how to do it. We'll start with the primary color. Again, um these three

primary color. Again, um these three colors are primary colors, the main colors of the brand that I'm going to be building the app for. So that's why I

will be using them as primary colors. In

your project, probably you will have something different because it all depends on the brand on the brand book.

You may have different colors. For

example, if you're doing something for, I don't know, um let's say p uh PayPal, you will have like blue colors as the main one, right? Uh or Airbnb, probably

pink or something like that. In any

case, uh in my uh project, uh I'll have this red as the main color of the logo.

Also, black and uh I will have this uh gray color. Uh but black and gray will

gray color. Uh but black and gray will be my neutral colors. they will be like in the in the neutral section for color schemes but I will have black like

separate but wait few minutes for it and I'll show you how it works. Um so we'll start with the red one and I'll just

drag and drop it over here. Uh using my option uh key I copy it and I will create a frame. So I create a frame

here. Uh something like this. It's going

here. Uh something like this. It's going

to be like a longer one. Uh I will need to have another copy here and another one over here. Um and this one is going to be the colors that we'll be

creating like on the left. This is going to be my scheme here. And I will need to create um eight more copies of this

square. So, basically, I'll need to have

square. So, basically, I'll need to have um four on top and four on the bottom.

Like so.

And altogether, it's going to be nine.

Why nine? Just wait a few minutes and I'll show you. Let's just Yeah, like this. Uh actually, we can set it up in

this. Uh actually, we can set it up in auto layout if you want. Shift A to create an auto layout. Perfect. It's 40

pixels between them. So this is going to be like the first uh the first color. Uh

so the center one uh is the main color that we used, right? So this is the one that we're using. And we'll be using it to build the rest of the scheme. Uh what

are we going to do on the right? Well,

basically on the right, I need to add another rectangle like this. And I need to make it black. And now I will move it

down like this.

Yep. And actually I can make another black color over here just to to make it easier for us to see uh what's going to happen.

Yep. It's going to be under my auto layout like this.

Oh, it doesn't really matter how it looks right now. Okay. um in order to make the shades of the color probably

you're thinking of using um opacity partly you're correct but the problem is that when you're using opacity you will

have this opacity uh value in your in your color but we don't want to use it we want the color to be 100% opacity all

the time uh and to have that we'll be changing the opacy acity over here on the right and then using the inspector uh tool we'll apply it to the left

color. So let's see how it works. So

color. So let's see how it works. So

basically this is the main color and now we'll go to the darker ones right. So we

see it 100 over here and I will make a uh step in 10%.

Or 20%. So this is going to be my 80%.

You see this is the 80. Uh what I want to do I want to select this color holding my command or control on

Windows. Then I used I um to get this um

Windows. Then I used I um to get this um inspector and I just copy this color. Right? So this

one you see it's already darker. Then I

go back to this color and I move down again by 20 20%.

Choose the the top rectangle again. an

eyropper not the inspector it's from the web um eyropper so that's why uh I'm collecting the color taking it

sampling it and going back again here and now I go to 40% you see it's on the black so this is very important on the

black color and again copy the color and the last one should be 20 but this one's going to be like really dark so probably will have

something like 30 and and we'll copy it over here. Yep. And when I remove the

over here. Yep. And when I remove the black, you'll see nice shades, right?

So, this is really good. Um, next next, as you understand, we going to have the same thing for the white. So, I select the bottom rectangle and I go to minus

80. And I just copy it over here like

80. And I just copy it over here like this. And then I go to

this. And then I go to 60%.

And oh, for the next one, this one is going to be 40.

Yep. Like this. And the last one is going to be 20.

Yeah. Really light.

So the first one is ready. So we see like the first shade for the first color is ready. Basically this the second

is ready. Basically this the second thing we need to do is we need to do the same exactly thing for all of the colors. Uh so that's why I'll need to

colors. Uh so that's why I'll need to copy it here. And

I'll make it I'll make a copy of the color here and here again. And now what I want to do, I

here again. And now what I want to do, I just want to, you know, like duplicate this and select the color in the center.

Yep. And now I will just make it quicker. So this is going to be my top color, and this is going to be my

bottom color. So basically, again, I'm

bottom color. So basically, again, I'm going um down uh in opacity by 20%.

Um, if you don't want to wait, you can skip the video or I will just make it quicker because this takes a lot of time. So, I'll fast forward uh at this

time. So, I'll fast forward uh at this moment.

All right. So, this is it. I made all of the shades for the colors. We don't need this anymore. And we only will need

this anymore. And we only will need these things. All right.

these things. All right.

Uh so this is ready. So we're going to be using this to create design tokens exactly the color tokens and we'll apply

them later for the aliases uh and we'll be using them in the design uh later on. So the next step is to

create variables. Now let's see how it

create variables. Now let's see how it works. Uh we go to this variables um

works. Uh we go to this variables um section over here and we press this little icon. And now we need to create

little icon. And now we need to create collections. So I create a collection

collections. So I create a collection and the first one is going to be just color. So I press color. Uh here we see

color. So I press color. Uh here we see collection number one um all variables.

And um if we look back at my guide, we'll see that we'll be creating uh a base collection. So I'll rename it to

base collection. So I'll rename it to base.

You can call it whatever you want. So it

doesn't matter. And now we'll have a group inside of this base collection which will be called color. And inside

of the color we'll actually create all of these variables all of these uh like tokens at the first level tokens. Um

this is very important. Some of the things um may take time just because you need to create all of these things and it may take like I don't know maybe 30

minutes or an hour. Uh but again at the end it will save you a lot of time when you're going to be working on the project and actually um you can if you

create this design system you can use it for your other projects as well. just

copy it. Uh so you don't have to create it every time because to tell you the truth, most of the things here that we're going to be using, especially like

the uh scaling scales like the the spacing number and all those things uh they will be the same at most of the projects like I don't know like 95% of

your projects you'll be using the same numbers.

All right. Uh so let's create our first color and I'll show you how it works.

Basically what we need to do now uh we need to uh make duplicates of this color of this uh variable I'm sorry. Uh so to do that I can um just copy and paste

over here but it doesn't work. So uh

let's try to um oh uh press duplicate right. So we duplicate it like this. And

right. So we duplicate it like this. And

we need to create nine duplicates as as you may understand.

and one more and uh and break. All

right, so it's nine. Uh we'll be using the system um of the 100 value. Uh I

believe it's used in the tail CSS and tailwind CSS. Uh and it's really easy to

tailwind CSS. Uh and it's really easy to understand uh once you begin to use it.

So the lightest one is going to be 100 and the darkest one is going to be 900 and the main the middle one is going to be 500 value. Um, these are going to be

the names of the of the uh colors. And

then if you want to have something a little bit darker than this, for example, and this is a 300, you add uh you make it dark a little bit, but it's going to be lighter than the 400. So

it's going to be like 350, for example.

So it's really easy to understand. Um um

this is the system everyone works with basically all of the designers. So you

just need to stick to it and um uh understand and just remember it. So,

I'll rename all of these um colors, all these variables right now.

And then we'll apply all the colors. So,

this is going to be 700 and this is going to be 800 and this is going to be 900 like this.

Now we go to the value. We select the value. We select the eyropper. And now

value. We select the eyropper. And now

we need to, you know, just copy the colors to our values. You see they have the hex code. Um this is because they're

using this. Um this is going to be look

using this. Um this is going to be look like the first level of our design token. Uh, and

token. Uh, and later on we'll add aliases and we'll rename them of course to actually what we need like the names that we're going

to be using we'll be using later in our project. So we just need to copy this

project. So we just need to copy this and the last one is the 900. All right.

So as you see as you can see I have this scheme color scheme ready. Now I need to select everything with here. Um, so I'm holding my shift and I click on the last

one and the the first one. Right click

here. And now I need to create a new group with selection. I create a group.

And now I will call it color.

And here I will need to create a new group.

And I will call it red. just the name of this of this color. So, so I have the color this is like the collection inside of

the base and I have the color red with all the variables over here. Right? So,

this is our first kind of like first part of the our design system, our design collection. Next, what we need to do, we

collection. Next, what we need to do, we need to create things for the other uh the same things for the other colors.

So, to make it easier, you just select all of them with shift and you click copy. And now you need to go, for

copy. And now you need to go, for example, to color uh and create new variable like this. And here you just

paste like so. Uh you can delete this color over here. Just delete variable.

And now you need to select all of these colors again. You see these are in red

colors again. You see these are in red and these are just like inside of the collection inside of the color. And

again create new var new group. And

we'll call it neutrals or neutral. And now we'll copy the

or neutral. And now we'll copy the colors. So we go to again from the

colors. So we go to again from the lighter to darker like so.

500.

Eight. And the last one is 900. All

right, 900. And here I want to add two more colors.

I'll add white.

And I'll add black.

Oops.

The white is going to be on top and black is going to be over here. So

this is like the black one. All right.

Great. So, we have color, red, neutral.

Again, going back to color, create new variable.

Uh, select all of the red ones. Copy.

And here we click paste. Delete this one color. Now, again, select all of the

color. Now, again, select all of the colors that you variable color variables color variables that you have um selected and you select create a new

group of selection. And here we'll call it purple.

And now we repeat the same thing. We

just go here and we sample all the colors like so.

Um, it takes time.

So I will fast forward right now so you don't have to waste your time watching me doing all these things. So see you later.

All right. And this is the last one. So

I've created all of these colors here.

So we have a collection color and in the color we have like groups named by color, right? So we have all of these things over here. Great. So uh

this is the base and now we'll need to create aliases for these colors. Uh

we're not going to go right now to the next um parts of the base collection. I

just want to finish with the colors. So

the next step will be is to create aliases. And how we're going to do it,

aliases. And how we're going to do it, we'll create a new collection. Create

new collection. And we'll call it aliases.

Um again, you can call it whatever you want. It doesn't really matter. Um it's

want. It doesn't really matter. Um it's

just for you and for the client if you're doing this work for a client because actually like creating design system like this um can be like a service and actually we sell the service

with my team. So this is a business idea for you to think of. And now what we need to do, we need to create aliases for the um different things. Um we're

going to be using colors for we'll have text, we'll have surface, we'll have icons, borders, and not for the spacing

right now. So we'll we'll stick to these

right now. So we'll we'll stick to these ones. So uh we'll create a

ones. So uh we'll create a text first. uh then we'll uh go to the

text first. uh then we'll uh go to the next one. So and currently I will use

next one. So and currently I will use again color uh and uh I'll make a group right away. So I'll create a group and

right away. So I'll create a group and it's going to be called text.

All right. Uh and in the text uh we'll have another group and this one is going to be called uh headings.

Headings right like this. Uh and in in the headings we'll be using um again the same colors that we had over here. But

again it depends on what kind of colors they're going to be using for the headings. I think in my case in my

headings. I think in my case in my project I will be using only neutrals for the uh for the headings and um I will copy them right now. So I'll copy

this. So I select I just went back to

this. So I select I just went back to base collection uh and the neutrals. I

click copy and now I go back to alyses.

I select heading uh and here I paste these colors over here. I'll delete the first one. And now I will need to link

first one. And now I will need to link uh these colors to the base collection.

Right? So I click on the color here. I

go to libraries and here I will find my base collection and with

neutrals. And now I will go to right

neutrals. And now I will go to right here. You see color. Oops. Um,

here. You see color. Oops. Um,

sorry about that. Color and white. You

see color neutral white. And you see I'm adding um this token design token to this value white inside of the heading. Um and it

is connected to the base collection. So

I'll need to do all of these uh things over here. So I'll need to find neutrals

over here. So I'll need to find neutrals and I'll need to connect them like so.

All right. So I connected them. Uh the

next thing uh is to create of course um body and we'll again copy this. We'll

copy and we create a new variable.

Paste it here and we'll delete this of course and we'll connect this to a new group and we'll call it body.

And basically we already have everything set up. So we'll have this and this.

set up. So we'll have this and this.

These are like two different things. Uh

we can also um create a top level um group here. So we can um uh create

group here. So we can um uh create another group.

Let's make it this way. We'll create

color and create a group. And it's going to be like on top. And this one is going to be called color.

And we'll move the text with all of these things inside of the color. So

this is much better. So we have color, text, heading. Um then what we need to

text, heading. Um then what we need to do, we need to create links, right? So

um let me just delete this variable inside of the color collection. Uh and

we'll create a new one. Uh, and for the links, I'm thinking that probably they're going to be using the red uh the red color, right? Uh, so I'll just copy

red and make copy and go to alysis and I create a new

color or a new variable.

Uh, and here I need to paste all of these things. This one I delete.

And I'll make a group.

Create a group. And I'll call it link.

And for the links, it's going to be right here. I need to move them. For the

right here. I need to move them. For the

link, uh, I will be using my primary color, this one. This is the main color, the 500. So, I will need to delete all

the 500. So, I will need to delete all of these variables.

uh and in the darker version I might use something else but currently we're using only one uh mode only for the light light version of the website. So I'll

delete all of these things and I'll only have um the link colors. So I will choose the 500 from the red from the

color collection from this one from the base. Okay. And

um here we'll call it a default.

Okay. And now I need to duplicate it.

And here I will call hover.

Rename it to hover. And now I will change it to for example 600. Okay. Um,

I can have it like in a different um different collection, but let's keep things simple. Uh, and for the body,

things simple. Uh, and for the body, again, we can um choose what kind of colors that we're going to be using for the body. So, for example, I'll be using

the body. So, for example, I'll be using um 800 for the body. Uh, and I can delete all of these things. Again,

I will delete variables and I'll be using only 800. Uh 800 or 900 doesn't really matter. Let's let's delete black

really matter. Let's let's delete black and use only 900 and or white. It

doesn't matter if we're going to have like a um darker darker um background.

We'll be using white color. So, this is going to be my default.

All right. So, this is for the body. And

for the headings, same thing. Well,

currently I have all these set up. Uh

but we'll keep it for now. All right. Um

the next thing what we want to do, we want to um make disabled text. And uh

we'll add again we'll add another uh another variable.

And this one is going to be uh disabled.

Oh. Uh hold on. Uh we need to create a new var of new group and this group is going to be disabled disabled. Uh we'll move it up right

disabled. Uh we'll move it up right here.

And here we'll need to create a disabled um default and we'll um link it to our base

neutrals. So, for example, for disabled,

neutrals. So, for example, for disabled, we'll be using 200. Um, and uh

maybe we'll have another disabled um another disabled variant. So, we'll

duplicate this. And uh let's call this uh 200. And this one is going to be 100.

uh 200. And this one is going to be 100.

And I will add a 100 here. So, and this one is going to be Yeah, it's pretty good. Or we can make it a little bit

good. Or we can make it a little bit darker. Um,

darker. Um, uh, actually I want to have another one because I think I might be using different shades. So I will duplicate it

different shades. So I will duplicate it and I'll call this one 300. And of

course I will pick the 300 over here. So

maybe they're going to be like different things. So the text, we have the text

things. So the text, we have the text and then we'll have the information.

So again create a new variable. Um,

information text. So these are things that um going to be somewhere in uh for example notifications or something like that. So

we'll uh create a new group and we'll call it informationation like this and again move it down and for the information we'll use a default

color. Um

color. Um uh again for now uh I will use

um I think it's going to be blue and default is going to be 500. All right.

So this is the default. Um and then we'll use success warnings and errors.

So we need to add these groups as well.

Uh and let's create them. You can add as many as you want, but these are like the basics. I'm showing you the basics, so

basics. I'm showing you the basics, so we're not like wasting a lot of time on this. Uh, and for the success,

this. Uh, and for the success, we'll be having again um several several colors. For success, we're going to be

colors. For success, we're going to be using our green green token. And uh

we'll have different ones. For example,

um default one is going to be 500. So

we'll call it default and then we'll have something else. So

we'll have we'll duplicate this and we'll add example um 700 and we'll call this one 700. So and I

want to duplicate it again.

And we'll use something lighter just in case we need it. So it's going to be I don't know maybe 300.

So this is going to be 300. And I'll

move it over here on top. So we'll have like default uh darker. So we can actually rename them

and default light and dark.

Yeah, this is a good idea. Uh actually

in the information we can uh also have this.

Let's go to information again and paste it here and like so. And we'll select the blue one uh for 300

and the darker blue 700 is going to be for the darker version. Right? And

default is 500. So the success uh let's create another color.

[Music] Uh we'll duplicate this. Oh, copy this.

I'm sorry. Uh we'll make a new group and we'll paste these colors here. This one

we'll delete. And we'll call this group a warning. Well, for some um warning

a warning. Well, for some um warning messages, we'll have them on top right here. And

for the warning, we'll be using orange.

So, we'll need to create a lighter orange. And then this is going to be our

orange. And then this is going to be our 300.

Um for default, of course, we'll be using 500 orange. And for the darker, we'll be using uh 700 orange. Okay. Um

next uh we need to create error. Uh and

for the error again we need to create a new group and this one is going to be error.

Uh it's going to be over here.

We paste colors and then we'll link link them to

red. Okay. Uh, and for the warning we'll

red. Okay. Uh, and for the warning we'll have 300.

Uh, default it's going to be 500.

And for the darker, we'll have the 700.

Again, you can add as many as you want.

It uh doesn't matter right now. Uh, for

the buttons, we'll need to have them extra. So, this is going to be actually

extra. So, this is going to be actually um should be on the surface, right? So,

this is the surface. uh or you can have like elements different elements. So um

as we have different icons um let's create a new group and we'll call it surface.

So basically surface is the thing that for example like backgrounds uh that you're using any shades uh whatever well basically like a

background and the main elements of your website or an app.

So this is going to be my surface and I'll move it down over here. And in

the surface we'll have such thing as background background color.

Uh and actually we'll need to have a new group. And this group is going to be

group. And this group is going to be background.

Oops.

And in the background we'll be having of course white for example default.

Um, and then we'll be having our primary and uh we'll have secondary and we'll have um for example the button colors.

um button on and we'll duplicate it and we'll call it button hover. We're not going to have a

button hover. We're not going to have a hover in the app, but you may have it on the website and we need to have it disabled.

All right. Um, we'll create a collection, a new group, I mean with this. And this group is going to be

this. And this group is going to be called buttons.

Okay. So, for the background, let's go back. for the background primary. Um

back. for the background primary. Um

we'll have a um really light one just to have this kind of you know um shade or actually we

can have a primary white and for the oops hold on I'm not using the right one. Uh we need to go back to the

one. Uh we need to go back to the neutrals and have the color white. And

here for default I will be using uh the um in the base I'll be using this 100. So

the primary is white and the secondary uh I want to have a darker red u just to have it you know some interesting

some interesting background like for example 600. Uh for the buttons again uh

example 600. Uh for the buttons again uh default one is going to be my um red primary.

So uh I will just look for red and it's going to be

500. uh on hover um uh will have red uh

500. uh on hover um uh will have red uh 600 and disabled um we're going to have

uh neutrals that are going to be for example um 100 and you remember we had a neutral

color for the body again um or for disabled so it was 300. So, we need to check how it's going to look with the button um with 100 and the text is going

to be darker. So, it should we should check it out and we'll fix it later if we need. Um then we need to create icon

we need. Um then we need to create icon set. Uh so, we need to create a new

set. Uh so, we need to create a new variable again and we'll need to create a group and we'll call it icons. And

these icons uh they're going to be like in separate group. And in these icons we basically

group. And in these icons we basically need to have the same thing as in text.

So we'll have um error warning success information and disabled. So we just can like we can copy these things uh and uh

duplicate groups and we'll move them down here in the icons. Okay, just to save some time. Uh, and we'll need to have like a

default default group for it. Uh, so

uh it's going to be our properly uh red color. Um or

uh for now it's really hard to say. Uh

but we need to change this again to we'll need to remove the number two.

So we we need to have um another group which is going to be our default.

And we'll just copy it.

um or we can call it default or we can call them main for example. And here uh we need to paste the colors that are going to be used for the

for the icons that are not error messages or they're not disabled or information. Uh and uh yeah, so we need

information. Uh and uh yeah, so we need to figure out how they going to look. U

for now we can make them just black um just for sakes sake of saving some time.

Uh so I go to neutrals and I will pick black and this is going to be my default default color for the for the icons. Um

and I can create another um uh color and for example it can be active that we want to like you know point out something and I'll make them again red

and 500 red. Uh just check that I have everything is fine here that I'm connecting the right uh colors for all of these things. All right, great.

So icons are ready. So you see we're kind of going like faster now. Um next

what we need to do we need to create a new variable of course and we'll create a new group with it and this group is going to be called borders and for the

borders uh we need to understand what kind of what colors are we going to be using for the borders

uh borders and uh we'll have primary so we need to create a new group here uh and this is going to be our uh primary

Uh then we'll need to duplicate it.

And this one is going to be secondary.

And now we'll need to duplicate these ones as well. Like disabled information because probably we'll be using them as well. So I'll duplicate these groups

well. So I'll duplicate these groups just to save some time. And I'll move them down here. Uh and of course we'll

need to remove uh the the numbers. Okay.

Like so.

Um for the primary u we can have let's call it default.

Um yep.

And for the primary uh default uh border uh we can have something like uh I don't know for example oops uh not this one.

We can have something like 200.

Uh and again we can have darker or lighter. Uh basically we can copy these

lighter. Uh basically we can copy these ones as well from the neutral collection uh and uh use them. But again it should

you should understand uh what kind of um colors they're going to be used for the uh primary

and uh for me I want to have uh default uh and uh also I want to have active uh and uh yeah that's it for now and

maybe yeah that's it. Let's let's use only two. And the active is going to be

only two. And the active is going to be uh red.

Uh again, 500 is fine. Okay. Um yeah.

And for the secondary um maybe maybe we'll use something like um a purple.

And the purple is going to be 500 for the default.

Or let's make it purple. it's not really our color scheme. So maybe uh again uh for the neutrals we'll be using um oh I mean for the secondary in neutrals we'll

be using for example u black. Yeah,

black is fine and for the air basically these are should be the same. Okay. So these are the borders and now um I think with

colors we're ready with coloring uh with uh creating aliases uh for the color and uh we have some groups inside. So let's

check them out. So we have aliases we have color for the text uh for headings for body. Uh for headings we can remove

for body. Uh for headings we can remove some of them again. Uh we can remove for example I want to have um 900 for the

heading color. Um uh so I'll or black

heading color. Um uh so I'll or black will save it. And also maybe I will have white. Uh and I'll remove um all of

white. Uh and I'll remove um all of these I guess. Um

I guess. Um yeah, let's remove Yeah, let's remove these ones.

So we'll only have white and black. And

for the body, we'll have 900, right? But

we can always go for 800, for example.

again here uh for links we have links uh default and hover um uh they're red um so because our main color is red so I believe in this situation this design

red color for the links is going to be nice we have disabled uh also we have um text which is error text well uh again

it might be um um it may not be good for the red to be for the error to be red color uh or for the links to be red because they're conflicting uh with

error. So, let's change them. And we'll

error. So, let's change them. And we'll

have the link uh for example, we don't we didn't use purple. So, let's h create um for example, purple links. They're

going to be like like this. And for the hover of the link, we'll use um 6 600.

And also, uh we need to show the link that was used already, right?

So um uh this one is visited visited.

Uh this is really good for the website and so we'll um change it to for example 400. Okay. Uh yeah like this.

400. Okay. Uh yeah like this.

So uh oh uh we forgot the this one. We

forgot to remove it. So we have colors. Wait, hold on. Did I just delete

colors. Wait, hold on. Did I just delete icons? No, I have the icons here. All

icons? No, I have the icons here. All

right. Great. So, I have the icons. I

have borders. Um, great. All right. So,

this is for for the color part. And now,

let's go to scaling. All right. Now,

let's do some variables for scaling. Uh,

again, let's go to our variables. Let's

go to base. Uh and here in the base we'll just add another variable which is going to be a number right and now we need to create a new group

and this one is going to be called scale.

Uh and we'll just move it up right here so it's not inside of the color. Set

scale. And here in scale we'll um just create things like zero and we'll duplicate it. Um, hold on. Yep.

duplicate it. Um, hold on. Yep.

Duplicate. Uh, and we'll have one here.

And in the value, we'll also have one.

Uh, duplicate again. Uh, here it's going to be two. And here two again. And now

it's not going to be three, guys. Oops.

Uh, and now it's not going to be three.

It's going to be something else. It's

going to be four. Uh, why four? Because

I'm using uh eight point grid system.

Uh, and I encourage you to use it as well. You can read more about it like

well. You can read more about it like somewhere in internet just Google eight point grid. Uh so basically all of the

point grid. Uh so basically all of the numbers that are used in my designs are divided by eight or by four um by four to make it easier to divide like smaller

numbers. Uh and I'll be using this

numbers. Uh and I'll be using this system for basically everything in the design for um uh the sizes of my frames

for the sizes of my gaps for outer layouts and also for uh typography. Uh

and here I will make um things like I mean the the numbers it's going to be four uh now it's going to be eight. Uh

the next I will add uh 12. So it's

basically divided by 14 or by four. Uh

but uh still we need to have it.

Sometimes we'll use 12. Uh next is going to be 16. And here's 16 as well.

So next one is going to be um what is it? Uh 20.

it? Uh 20.

Uh 20. And the next we'll duplicate it.

It's going to be 24.

Next.

Oops. Oh, hold on.

Uh, next is going to be uh 28 duplicate 32.

Um, then it's going to be 40.

And here I will don't I will have it 64 as the next one.

So these are like pretty large numbers.

And this one is going to be 80.

And then I will have a 120 and the next one is going to be 160.

and the next is 200.

Yeah, that's it. So, this these are the numbers that I'm going to be using.

They're all divided by four or eight.

And next, we'll go to our um aliases and we'll create now we'll create a new thing which is going to be called spacing.

So, we'll need to create a variable.

It's going to be number. And we'll link it to a group. And uh this group is going to be called spacing.

And I'll need to move it out of the color group.

And it's going to be over here on the bottom. And for the spacing, I will be

bottom. And for the spacing, I will be using such things as none. And I will link it to another variable. And you can

see I have this little thing over here.

Apply variable. And I'll go to my base and I'll pick zero. And now it's connected. So this is the spacing zero.

connected. So this is the spacing zero.

Um, and now I will create another uh number, another variable. And this one is going to be SP4. It's just easier for me to remember that this is spacing four

and I'll connect it to again base scale and I'll pick number four here. Then I

will use another number and this one is going to be SP8.

Um these things are going to be used the spacing basically for like gaps in outer layouts and paddings. Uh and u I like

for me I don't need a lot of them. So

basically I will have uh only few and maybe uh next one's going to be 16 for example. I can always add uh more

if I need. Uh so

next one is going to be SP oops hold on remember SP um 24.

These are exactly divided by eight 24.

And another one.

And this one is going to be uh 32.

And I'll link it to A32 from my base collection.

And the last one uh is going to be SP 40.

SP40.

Okay. Next, what I want to do, I want to create another um number and I'll create another uh collection

and it's going to be called uh radius and for the radius I will again create none.

And here I'll link it to my base zero.

Uh, basically I want to copy these things again because they're going to be the same. And I'll just uh paste them

the same. And I'll just uh paste them here. Uh, and uh, I'll just rename that

here. Uh, and uh, I'll just rename that to RD. This is just easier for me to

to RD. This is just easier for me to remember. This going to be radius. And

remember. This going to be radius. And

we'll have another variable over here uh, which is going to be um, radius 200.

Uh this is just the things like to create a really um like circle shapes.

So we'll um create 200. All right. So

this is ready. Um

here we need to have another group. Uh

so I'll create a group for this. I'll create a new number. Uh

for this. I'll create a new number. Uh

and it's going to be called uh border.

Oh, hold on. Just leave it this for now.

I'll just create a new group selection.

And this one is going to be called uh border.

Uh actually no, we have a little mistake that we have a border and radius inside of the spacing. But we need to have uh this uh spacing to be in uh in um in

another group. So it's going to be like

another group. So it's going to be like spacing border and radius. they should

be like in a separate group uh all three of them. So what we need to do we need

of them. So what we need to do we need to um rename um and to move them uh to another group. So um I'll just create a

another group. So um I'll just create a group um yeah new group rename spacing to um

sizes for example and this group is going to be called spacing. So this is the correct way to

spacing. So this is the correct way to do it. So we have spacing, we have

do it. So we have spacing, we have border and we have radius. For border we don't have anything else yet. Uh but we need to have um some numbers here,

right? Uh so I will just uh copy um for

right? Uh so I will just uh copy um for example these three. I'll copy them and paste

these three. I'll copy them and paste them to border.

I'll remove this one. Uh none is zero.

Then I'll want to have a border in one.

And here I will just rename it to BR1.

And this one is going to be BR 2. And of

course I will use two pixel. Uh

basically these are the only um places where we'll be using one and two I I believe. But still this this is good. So

believe. But still this this is good. So

we have sizes. So we have spacing, we have radius and we have border. And this

is everything is an alias uh collection.

So we have color and we have sizes here.

The next step is going to be to add a typography collection. All right. So

typography collection. All right. So

let's add some uh types. We'll go to variables again and we'll go to base.

And in the base we want to add a thing which is called a string. So I'll add string. And I will add it to a new

string. And I will add it to a new group. Uh, and this group is going to be

group. Uh, and this group is going to be called type.

And in type, we'll have another group.

And this group is going to be called font weight.

And in font weight, we'll have a regular.

And here the string value is going to be regular.

Uh then we'll duplicate it and duplicate again. And here we'll have a semi-bold and bold.

Just copy and paste it here.

So that's it. This is for the font weight. And we'll just duplicate this

weight. And we'll just duplicate this group and we'll call it font family.

And in font family, we'll have just two fonts. Um, this one is going to be body

fonts. Um, this one is going to be body and this one is going to be heading headings. For the body, um, for example,

headings. For the body, um, for example, we'll be using enter.

And for the headings, we can use something else. And, uh, or you can use

something else. And, uh, or you can use the same the same type for the headings.

But uh in my case for the headings uh probably I will use uh for example like something like popins I don't know

or we can use the same thing let's leave it in enter for the um body and headings. So basically these things that

headings. So basically these things that we have right now in the base collection this is a type and now we'll need to do one more thing we'll need to create a

typography collection uh actually it can be in the aliases if you want or you can have it in a separate um uh separate collection it doesn't really

matter um so I use it as a separate collection um just to make it easier uh so I will create a new collection section I will call it typography.

Uh and here I will create a variable uh which is going to be a number. Uh and I will create a group and uh this group

will be called font size.

Uh and one more group inside. Uh this

group is going to be body.

And here I will have three numbers for the body. as you may understand. Um so

the body. as you may understand. Um so

this is going to be my um duplicate this and for this one we'll have something like small and medium

and large. So you can call them like

and large. So you can call them like different names. It doesn't matter

different names. It doesn't matter because it can be like captions or something like that. For the medium uh we'll have a default value that we'll be using. And again, we need to connect it

using. And again, we need to connect it to our base. We go to base and we go to scale. And we'll be using 16 for the

scale. And we'll be using 16 for the medium. And it's going to be like our

medium. And it's going to be like our default size for the text. For the small text, we'll be using um

uh we'll be using for example uh 12.

And for the large uh again we go to base scale. For the large, we'll be using 20.

scale. For the large, we'll be using 20.

Okay, so this is like the body body text. Um, you can have this even smaller

text. Um, you can have this even smaller like eight, but I don't recommend it because it's going to be really hard to read from the screens, especially on mobile. Uh, the next thing what we want

mobile. Uh, the next thing what we want to do, we want to have headings. So, I

will duplicate this group and I will call it headings.

And in headings, uh, we need to have something interesting here. We'll need

to have uh the headings for the SEO uh which are all the H's uh H1, H2, H3 or 5, 6. For your project, you can use only

5, 6. For your project, you can use only 1 2 3. And this is what I'm going to be using right now. So I will have H1, H2,

and H3.

Uh and how do you get the actual numbers for the headings? Well, um, in my experience, I already know, uh, approximately what numbers I'll be

using, but if you're just starting out and you're not sure how to get the numbers, I will show you a way to do it.

So, this is a service that I recommend you to use. There are like tons of them out there, but this is the easiest one, like type scale. And here what we need to do, you can um actually look how your

types look at the website, the landing page for example, or or a blog post.

Well, I'll use the blog post. It's like

easier. Um you'll see that H1 is like the main header on the website. Then

you'll have like a small text, the P, which is the paragraph. Then you have H2, H3, and the rest. Uh on the left side, you'll see our font size. This is

the default font size. As you remember, we used 16. And now we'll use the scaling. And for the scaling I recommend

scaling. And for the scaling I recommend you to use major thirds.

And here uh for the major thirds you'll see that we can pick the type the the font family. For the body it's enter.

font family. For the body it's enter.

And we'll pick the weight. It's 500. Uh

like the main one. For the line height it's going to be one 1.6 which is fine.

uh the color it doesn't matter right now and we'll see it in pixels right so we want to see the pixel sizes and here you

can see that um you can see the scaling that starts from the your body copy from your body text which is really important it's 16 and you can see that it goes up

uh to H6 H5 H4 and all of these things uh and uh to get this right uh basically you can see these numbers numbers that are

like 31.35.

It's better to use clean numbers uh that are saying for example like 21 or or 31 or 32. Uh here is 39

or 32. Uh here is 39 uh 06. It's better to use 40 for example

uh 06. It's better to use 40 for example like so these are like even numbers. So,

um let's just uh make a screenshot of this uh for us to remember and I I'll paste it to my Figma file. Uh and it's

going to be really easy to set up the the headings for the the text. Right?

So, I have pasted it here and now we can see um the numbers, right? Um so, H1 is the largest one. Now, we can see it's 61. Here it shows 61. And what I want to

61. Here it shows 61. And what I want to do, I just want to find the closest number and it's going to be 64 in our

case. Then the um H2 uh which is 48.

case. Then the um H2 uh which is 48.

Well, we can use H2 as 48. Again, we

don't have it. Uh but again, we can add it and I'll show you how to do it right now. We go to our base. We go to scale

now. We go to our base. We go to scale and here we can create a new variable uh number and it's going to be 48. And the

number is going to be 48 as well. And

now let's move it over here. Now we go back to our typography to headings and let's pick the 48 from our um base

collection. And for the H3 it recommends

collection. And for the H3 it recommends us doing it 40. Okay. So let's it's 39 something. Well, we'll use 40 for that.

something. Well, we'll use 40 for that.

So this is it. So we set up like three headings. We can add again. We can add

headings. We can add again. We can add more um just in case we need them. So

let's add H H4. Uh and this one is going to be 32. So we go to our base and this

is going to be 32. Let's add another H H5. And okay, let's do all of them.

H5. And okay, let's do all of them.

Right. So we'll have H6 as well. And in

the H6 uh it's 40. Uh so we'll go to base. Oh, it's 20. I mean, I'm sorry.

base. Oh, it's 20. I mean, I'm sorry.

So, it's 20. And for the H5, we'll link it uh to uh 25. So, in our case, it's going to be

uh 25. So, in our case, it's going to be 24 or 26 or uh 24 or 28. Well, I think

24 is all right for the H5. So, we have it set up. So, we have a body uh sizes uh medium, small, and large. And we have

our headings as well. Next thing what we want to do, we want to create a line height for everything here, right? Um,

this is like we're going really deep.

Uh, you don't need to do this in all of your projects, but you may need it. So,

uh, let's duplicate this.

So, we'll duplicate this group and we'll rename it to line height.

And in line height we go to body. And

the idea is how you can um find the line height right. Uh as you remember uh in

height right. Uh as you remember uh in our sample in our website we used um 1.6

right. So we'll use uh 1.6 here as well.

right. So we'll use uh 1.6 here as well.

So for the uh l head here we'll need to pick uh the number right. So uh for the body it's going to be 1.6. We don't have it here. Well, we'll need to add this

it here. Well, we'll need to add this variable. Uh, and actually uh we can

variable. Uh, and actually uh we can already check how this looks. So, this

is the body here, right? And we can uh what we can do, we can pick the uh 16, right? And for the uh line height, we

right? And for the uh line height, we can see that if I click here, we can see the line height, right? In pixels. Uh

so, we'll use that number. We'll use

this value. So, we're not going into like grams or ms uh or percentage. We'll

use just the numbers. So, for example, if our um uh text uh body copy is 16, we'll probably use something like I

don't know um this one looks good like 24, right? So, I will use 24 for it as

24, right? So, I will use 24 for it as well. If our size um for the text is 12,

well. If our size um for the text is 12, really small, right? And I will use something like 20 for the line height.

So I'll pick 20 for the line height. And

if our um if our uh body is body copy is 20, we'll use something like 28 for the line

height. Okay, this is set up. Okay,

height. Okay, this is set up. Okay,

let's see headings. Let's go to headings and let's start with with the smallest one uh which is uh 20.

Uh and for the heading this is going to be probably uh 24. Okay, it's fine.

uh 24. Okay, it's fine.

So this is the smallest one. So for the line height we'll use 24 over here. Uh

then for the uh H5 so we'll change it 24 here. So, it's going to be 24. And the

here. So, it's going to be 24. And the

line height should be larger, right? So,

maybe 32. Yeah. So, we'll use 32 for this. Uh or even 28. Let's see.

this. Uh or even 28. Let's see.

No, 32 is better. Uh actually, you can do it mathematically. You can figure it out, but I'll do it just like this. Uh

it's easier. And uh I believe it looks fine. uh but you can use other um apps

fine. uh but you can use other um apps for example like the one that I showed you like the website and they will show you a proper way to do it mathematically uh but I think for now we'll just use it

uh in this way so this one is going to be 40 uh and for H3 which is 40 the types the the size of the letters is 40 so um for

the line height maybe it's going to be 48 or something like that yep uh 48 8.

Uh then 48 for H2.

Uh and here we'll have it maybe maybe 56 or 54.

Yeah, I kind of like 52.

Um so we don't have it here. Let's see how it looks with 64.

Um, well, not so good, right? So, I

guess maybe we can uh add another number like 52. So, we'll go back to the base and

52. So, we'll go back to the base and we'll go to scale and we'll add a number which is going to be 52.

And we'll add it right here.

Okay. And it's going to be 52.

Now, we go back to typography.

And here for the H2 we'll use 52. And

for the H1 which is uh 64 value we'll use uh something like

yeah maybe 64 is fine like it's really large heading so we'll use 64 for it as well for the line height. All right so this is ready. Uh so basically we can like you know check how it looks. It

looks fine. Uh the next thing what we need to do here we need to have a paragraph spacing. Uh and again we'll

paragraph spacing. Uh and again we'll need to copy uh duplicate this group and we'll call it um paragraph spacing

like this. Uh and again we'll have small

like this. Uh and again we'll have small and headings are going to be like this.

So how to see how how it's going to look? We just pick um this text right

look? We just pick um this text right here. Let's just like blur them. Uh

here. Let's just like blur them. Uh

we'll have it for example, we have 20 right now, right? And we go to these um settings of the text and we'll pick uh the paragraph spacing over here. You see

it's zero right now. And we just move it like this. And we can add uh paragraph

like this. And we can add uh paragraph spacing. And maybe we can use something

spacing. And maybe we can use something like 16 for the large uh body, right?

So, we'll use 16 for the medium. Uh for

the medium, uh the text should be 16.

Uh oh, no, no, no. It's um line height.

Oh, no. It's 16 for the font size. And

for the line height, let me check. Uh

for the line height, we had um 24, right? So, uh here is going to be

24, right? So, uh here is going to be 24.

And now we need to see how it looks. Uh

well, we'll move it down a little bit.

So, we probably will have like eight uh or even 12. Let's see. Yeah, 12, I think, is good. So, we'll pick 12. And

for uh the small ones, uh I guess it's going to be eight. So, let's just pick for the line height, I don't remember.

We had the small 20 uh and body was 12.

Let's check it out. So, we have body 12 and for the uh line height, it was 20.

And now we can see uh the 12 is really big, right? So uh we'll use eight for

big, right? So uh we'll use eight for the line for the paragraph spacing which is here already set up. So eight is fine. Same thing we need to do with

fine. Same thing we need to do with headings. Um so we'll just uh copy this

headings. Um so we'll just uh copy this heading uh and paste it here. Enter. Yep. And we

can check out how it looks. So basically

this one is um 64x 64. So this is for H1. And here

64x 64. So this is for H1. And here

we'll need to have it for example uh 32 I believe is fine. So we'll pick 32 right here. Uh for the H2 it's uh size

right here. Uh for the H2 it's uh size is 48.

And uh for the um line height it should be 52 right 52.

Uh and paragraph spacing should be smaller maybe 24.

Okay. Uh so we go to paragraph spacing to 24 right here. Okay. Uh and now for

the H3. H3 we have uh 40 for the size

the H3. H3 we have uh 40 for the size and we'll have our u

line height uh for the H3 was 48. So

we'll change it to 48 right here. Uh and

for the spacing I don't know maybe maybe 16 is fine.

Yeah. So for H2 is 16. Yep. So that's

it. So basically this is the way to do it. Um

it. Um again I'm not sure that I'll be using uh H4 H3 but uh we'll see we'll see how it

goes. So basically um this is 32 for the

goes. So basically um this is 32 for the line height right so we'll u uh we'll see. But for now I'll probably

leave it at u H1 H3. So I'm not going to be uh doing

H1 H3. So I'm not going to be uh doing this right now. So, I'll just delete them. And if I need these variables, I

them. And if I need these variables, I will finish them later. But, uh, for now, I don't I'm not going to be using them at all. Uh, so I'll just delete it

for now.

All right. So, finally, everything is set up in terms of our variables, our design tokens, and let's see how it works. Let's see it in action. Uh, what

works. Let's see it in action. Uh, what

I want to do, I want to uh create like a button. So I'll just create a text and I

button. So I'll just create a text and I call it a button. Uh and um yep and I'll create out a layout out of it. So I

press shift A. Right. Uh now I want to uh create a color for it. So what I want to do I want to go to uh my right section and I'll use fill and in fill I

will go to libraries and here I will look at my u primary colors and my aliases. And here I will find um

aliases. And here I will find um something like button, right? You

remember we had a button. So I'll look for buttons. Yeah. And here is my

for buttons. Yeah. And here is my surface button. So I'll use red. Uh now

surface button. So I'll use red. Uh now

what I want to do, I want to create some um paddings inside. Uh so I will use variables for the paddings and these are

spacing. You see aliases, spacing

spacing. You see aliases, spacing and radius, right? Uh so I will use spacing. For example, 24 for left and

spacing. For example, 24 for left and right. And for bottom, top and bottom, I

right. And for bottom, top and bottom, I will use 16. All right? Or even larger, I can use another 24. I can use like 40 like this. Uh, but we don't remember

like this. Uh, but we don't remember what kind of the size of the text. This

is for the button. It's 32. It's pretty

big. Let's change it to something smaller. So what I want to do, I want to

smaller. So what I want to do, I want to uh change the uh the size of the um of the text inside of the button. So I go

to my variables here. And what I want to do here, I want to so I'll need to find the type. So I will go to

the type. So I will go to aliases and I'll need to go to typography and I'll need to find my

body size. And I'll use medium 16 right

body size. And I'll use medium 16 right here. You see? And now it looks really

here. You see? And now it looks really strange, right? Um because we have the

strange, right? Um because we have the line height uh wrong. So I will use apply variables again. I will go to my

uh line height. And here is the line height for body. And you remember we used medium for the for the text size.

So I'll use medium here again. Uh and

now uh we can see that it's it looks pretty strange, right? So it looks like really small. The text is small and the

really small. The text is small and the um paddings are quite big. So now I can go back and change the paddings uh to 24

and on top and bottom we can use eight for example. And now I can even change

for example. And now I can even change the radius uh something like eight. Uh

again going back to my um um text inside of the button and now I want to change it uh to uh color and you

can see the color text headings color body uh we can add um different things like we can also add aliases for text

inside of the buttons. But for now I'll just use uh color text body white.

That's it. So this is uh the button right here. It's like a default button,

right here. It's like a default button, right? And what I want to do, I want to

right? And what I want to do, I want to um uh make a component out of it, of course. So I'll just right click on it

course. So I'll just right click on it or I can uh go right here on the top on the right on the right and create a component. So now this is a component

component. So now this is a component and uh I what I want to do I want to create a another variant of this component. So I click here and this is

component. So I click here and this is going to be my default. It's right here default. And this is going to be my uh

default. And this is going to be my uh for example hover right a hover. And

remember we made as extra um color for the hover. Uh so I will click here with

the hover. Uh so I will click here with with the fill. And you see we have a button hover and that's it. So these are things are ready. Um this is just a

small example right? Uh what we want to do with the text again we want to create the different headings. So this is going to be my for example H1 or H2 and H3. Uh

so I will pick the first one and I will uh make we need to make styles uh because currently we don't have any

styles here. Um but before that we need

styles here. Um but before that we need to create a um variable and we'll need to find headings

and font size for headings is going to be H1. Uh then we need to find line

be H1. Uh then we need to find line height line height for the headings H1 and uh again we need to do for the spacing uh

we'll need to find the uh paragraph spacing.

So paragraph spacing for the headings H1, right? So this is this is ready. So

H1, right? So this is this is ready. So

this is going to be my H1. Uh this is it's set up. So and the color again for the color we need to find uh the color for the headings.

So I put headings color you see text color headings we'll use black. All

right. So this is set up uh and we need to create a style. So we create a new style. We'll call it H1.

style. We'll call it H1.

Uh and we can see like different options here and again we can use variables for this for the font. You remember we were making

uh font weight and font family. So font

family is for headings is enter. It's

the same as body in our case. So I'll

pick um headings or enter. And for regular again I want to create a variable. So I

will go to apply variables for the regular. And uh again we need to uh find

regular. And uh again we need to uh find uh our font weight and this is going to be bold, semi bold or regular. So I will

use a semibold. So this is semibold for um for my heading for H1 or again I can I can go for bold uh and I can do it

like this. All right. And now what I

like this. All right. And now what I want to do, I want to create a style, right? So this is all set up and this is

right? So this is all set up and this is going to be my style H1. And I will click create style. All right, create

style. Uh and I will have it over here.

style. Uh and I will have it over here.

Uh and now uh I will apply it to everything in inside of my website or an application. So basically this is what

application. So basically this is what we can do for H2, H3 and the rest. Uh

and of course for the body uh again I will just pick uh the uh the font uh font family for the body.

Uh I will pick the variable for the body here. Again we'll pick the type u font

here. Again we'll pick the type u font weight regular. Uh then I will create a

weight regular. Uh then I will create a variable for the type. So oops

uh here is fonts font size body medium and here uh we'll use oops

um for my uh line height line height medium for body and for

paragraph spacing again I will use paragraph spacing body medium. All

right. And now I can create a style and it's going to be my paragraph or just P. I can call it P.

And everything is linked here. So I'll

create a P. And this is my style for my uh which is going to be used for my body copy.

So these are the basics that you can do and um you can scale up this design system in any way you want. Basically,

you can add different uh fonts, different uh colors, whatever. You can

apply them to your components that are going to be used inside of your uh design. Uh it may look really long at

design. Uh it may look really long at the beginning that we were setting it up, but again um remember that at the end it will make your life so much easier that you're not going to be like

uh looking for waste. you're not going to be thinking what kind of size that I should use, what kind of color I should be using for this or that element. So

these uh things are um essential for any any design. I hope you like this video

any design. I hope you like this video and I hope it was useful for you. Please

uh in the comments below tell me about um your design systems, how you build them and maybe you have any questions.

Please comment below and please don't forget to like the video if you like it and subscribe to my channel if you haven't already. and I'll see you in the

haven't already. and I'll see you in the next one. Bye-bye.

next one. Bye-bye.