Everyone, and welcome back, so I know I've spent a lot of time talking about, you know, component's
styles and all those different types of features that Fatema offers, but they play a much larger,
important role when we're thinking about design systems.
And I want to just talk briefly about what is a design system and why do we use one.
So a lot of people give a different name to design systems like people like to call them UI toolkits.
And that's OK.
I mean, that's what they kind of are.
A design system is more so involving your larger and broader team.
You know, your development team is helping making those changes and implementing those systems that
you've created.
So what I want to show you is how I use a design system within Sigma and why it's important.
So this is a design system I've created for our client called Habitual.
Now, I separated it into if we look over to the left here, I separated into three different sections.
Now, this isn't a full entire design system.
There's much more you could possibly even add to this.
But this is enough to definitely get you started and definitely get you creating a bunch of different
pages.
Now, what I've done here is there is this section called the Foundation, which houses all the styles
that we're going to use throughout the application, including certain components which I'll get into.
We have the component section.
Think of the components section, like a section of like atoms.
And when you build up atoms, they create larger components.
This section, which I call recipe's now, the difference between all these different things is components
we'll use of the foundation and recipe's will be more complex components that use a bunch more components
together.
It may be a bunch of cards together.
It may be a bunch of like checkboxes.
That's what I would call a recipe.
And they also use things from the foundation to bring this all together.
So let's get right into it.
I'm going to show you some examples of foundation and components and recipes.
In later, videos will go into how to create individual pieces for this design system.
So your foundation will host things like colors and these are your main styles.
So these are the colors for the application.
You can see that I've broken them into different sections and if we go down to the right, we'll see
our local styles.
And these are color styles that's going to actually typography.
We have typography and remember how we were creating that type system.
This is just more fully fledged.
We have different headings you can see here.
We have different text options.
So body large, small, regular labels, hence, which are displayed over here on the right.
And these are all different styles.
I have icons.
Twenty four pixel and sixteen pixel variants.
I have grids.
Let's turn those on so you can see the different types of grids I'm using.
Mostly these are just for the entire mobile screen and all these are used just so we can actually start
building components as well.
So if I go over to the component section, I have avatars and different versions of avatars.
You'll see that there is a base layer here and I'll get into that later.
There's different types of buttons that we will be using.
There's cards over here, different types of cards that we have.
Checkboxes.
So as you can tell, there's so many different types of components that we're making and reusing even
in our recipe section, if we take a look at something like carp, we have different types of karplus.
We have different types of like footers.
So these types of things are definitely ways to implement your recipes.
So in our next video, we're going to go over how to work with different types of elements in the foundation
of your design system.