Everyone, and welcome back.
So as you can tell, there are a bunch of different components a user can interact with, and maintaining
those components is pretty crucial for any project.
And this is generally a large task.
So you want to set aside a lot of time to do something like this, especially if you're creating something
like a design system or if you're just creating a bunch of different variants of inputs because, you
know, inputs can be the most complex UI elements that we deal with.
So here are some tips to building some of your very own components within Fagbug.
Step number one, let's learn about master components.
So when we create inputs within Sigma, remember, we need to adhere to our base unit.
I'm using eight pixels.
So let's create something very simple, like a single line input field.
So I'm actually just going to create a massive frame.
Or we can play around, we can call this.
Master component's.
And I'm going to do is I'm just going to select another frame.
And this going to be my input field.
It's going to be 40 pixels in height.
It's going to have a border radius of five pixels.
And it's going to have a nice little stroke.
So that is our stroke.
Perfect.
I just changed the border radius to two.
OK, and let's give it a fill of white, that's fine.
OK, so this is our input field.
What should we call it?
Amerigroup in Berfield.
Now that this is done, we're going to use components.
Now, this page over here, we're going to build out a couple of different components within it.
And it'll serve as a kind of like our source of truth.
And by using master components, we can really reuse them across all of our designs.
So let's turn this input into a component.
So to turn into a component, you can right click and create a component or you can use the quick shortcut,
which is option command.
So now you'll notice it's a component.
If I go back and press commands, you can also create a component up there.
Now, it's a component which is pretty awesome, let's copy it somewhere, so I'm going to copy it right
here.
You can tell that the little icon has changed and that means that this is now an instance of the master
component or the parent, whichever you want to call it.
I call it the master.
And that's what fitment calls it as well.
You can copy this component anywhere you want as much as you want, but as soon as we kind of like edit
the master component, it reflects in the instance.
So this makes managing inputs so much easier.
So let's take a look at how we can update some inputs across our designs by changing something in the
master.
So this is our master.
What we're going to do here is we are actually going to give it a fill.
Off I go, very light gray, and you can tell that it's changing their.
There you go.
We have a couple of copies and we can just change them all and you can tell that they all adhere to
that master component, which is totally awesome, because if you're creating an individual input for
every single instance that you use it, when you want to change one, you probably are going to want
to change everything else because you want to keep everything very consistent.
Using components totally helps you do that in such an easy way.
So that's how you create components within Sigma.