So you may find that you want to create different components based off of the changes you made to an
instance, and that's totally possible within Sigma.
That's why it's so powerful.
So I call them themed instances or variants.
Essentially how you use them is that they're a way to kind of manage component states and variations.
They're created by taking an instance of that component like we did here.
So this is the instance of this original component, which also includes these atomic components, and
you can essentially create a component based off of that.
So if I want to take this, we have another instance over here.
Now, this could be like a basic component with text.
We can obviously hide this.
So this is an instance.
I can just call this label again, since this is going to be a new component and this this can be hidden
and now say I want to have an input, a component for inputs with icons just on the right side.
If I feel like I'm going to have a lot of this within my app, I may consider doing this.
And it's also just good to have so let's have a close button, which seems a little bit more generalized,
and what we can do here is we can just option can be to detach that original component so it won't be
updated by this anymore.
And we can rename it to Form Fields.
We can call it icon.
Right.
And if I do option Kapanke now, that's a component.
So we can rename this one to form field default.
You can keep on doing this as much as you want, like I can edit this still and these will both be edited,
so I'll show you what that looks like.
You know, that's how the border radius is changing, if I want to edit the film, it's still the same.
So if you want like, you can totally create different instances based off of the original that you
created, you can even go ahead and create like another component like this.
So I can call this default and I can do something like change the stroke, so I'm going to select the
input field.
And I'm going to change the stroke to like a red.
Bump that capacity up.
Well, that's really harsh.
OK, so I can do that and I can do object can be to just detach it from the master component.
Another way to do that is let me just do Manzie to show you.
You can right click and you can detach the instance right there.
So I'm going to detach that and I'm going to give it a new name.
I'm going to call it.
I'm going to say air and we can do option command.
And there you go, we have our own air component.
So it's just an easy way that you can kind of take that duplicated to make an instance, another great
way to use these is by going into your assets.
So I have a bunch of components there.
Over here is our building our own components section.
And you'll notice this is our page master components.
Look at that, you see our atomic elements at the top.
We see our elements over here that are kind of like our basic default, and if we go one layer deeper,
let me just stretch this out.
If we stretch us out, we see our farm field.
It follows the same kind of naming convention.
When you're creating styles, if you use a slash, it's going to create another kind of layer, like
a folder.
So we have our default air and we have just our regular form field.
Go ahead, go out there, make some components and try like duplicating them, detaching that instance,
creating a new version of that and creating a new component, because this is like one of the easiest
ways to work with components within Sigma.
I mean, it's really speeds up my workflow.
And especially when you come across, like, going out and creating like a design system or just creating
a bunch of components to make your life easier, especially designing at any level, whether that be
wireframe mean or whether that be like visual design and gradually creating more higher fidelity mockups.
This is going to help you.
You can easily edit the styles which could reflect in here if you're using color styles and typography
styles.
And if you edit these like atomic elements, they will edit your components.
And if you edit your components, edit those instances, everything is so connected and easy to update.
Go ahead.
Go out there and create your own components and those instances of those components.