1
00:00:01,090 --> 00:00:07,690
So you may find that you want to create different components based off of the changes you made to an

2
00:00:07,690 --> 00:00:10,960
instance, and that's totally possible within Sigma.

3
00:00:11,140 --> 00:00:12,630
That's why it's so powerful.

4
00:00:13,090 --> 00:00:16,480
So I call them themed instances or variants.

5
00:00:17,020 --> 00:00:23,140
Essentially how you use them is that they're a way to kind of manage component states and variations.

6
00:00:23,140 --> 00:00:26,750
They're created by taking an instance of that component like we did here.

7
00:00:27,400 --> 00:00:34,210
So this is the instance of this original component, which also includes these atomic components, and

8
00:00:34,630 --> 00:00:38,350
you can essentially create a component based off of that.

9
00:00:38,380 --> 00:00:43,240
So if I want to take this, we have another instance over here.

10
00:00:45,570 --> 00:00:48,870
Now, this could be like a basic component with text.

11
00:00:49,840 --> 00:00:52,270
We can obviously hide this.

12
00:00:53,740 --> 00:00:55,000
So this is an instance.

13
00:00:57,320 --> 00:01:05,690
I can just call this label again, since this is going to be a new component and this this can be hidden

14
00:01:06,260 --> 00:01:12,290
and now say I want to have an input, a component for inputs with icons just on the right side.

15
00:01:13,070 --> 00:01:18,200
If I feel like I'm going to have a lot of this within my app, I may consider doing this.

16
00:01:19,310 --> 00:01:24,980
And it's also just good to have so let's have a close button, which seems a little bit more generalized,

17
00:01:24,980 --> 00:01:32,630
and what we can do here is we can just option can be to detach that original component so it won't be

18
00:01:32,630 --> 00:01:33,800
updated by this anymore.

19
00:01:34,040 --> 00:01:37,280
And we can rename it to Form Fields.

20
00:01:37,700 --> 00:01:39,980
We can call it icon.

21
00:01:40,640 --> 00:01:41,120
Right.

22
00:01:42,560 --> 00:01:46,670
And if I do option Kapanke now, that's a component.

23
00:01:48,040 --> 00:01:50,980
So we can rename this one to form field default.

24
00:01:52,490 --> 00:01:58,400
You can keep on doing this as much as you want, like I can edit this still and these will both be edited,

25
00:01:58,850 --> 00:02:00,530
so I'll show you what that looks like.

26
00:02:02,160 --> 00:02:09,720
You know, that's how the border radius is changing, if I want to edit the film, it's still the same.

27
00:02:10,780 --> 00:02:18,190
So if you want like, you can totally create different instances based off of the original that you

28
00:02:18,190 --> 00:02:22,900
created, you can even go ahead and create like another component like this.

29
00:02:24,870 --> 00:02:33,480
So I can call this default and I can do something like change the stroke, so I'm going to select the

30
00:02:33,480 --> 00:02:34,200
input field.

31
00:02:35,260 --> 00:02:38,860
And I'm going to change the stroke to like a red.

32
00:02:41,140 --> 00:02:42,610
Bump that capacity up.

33
00:02:43,550 --> 00:02:44,560
Well, that's really harsh.

34
00:02:46,750 --> 00:02:54,260
OK, so I can do that and I can do object can be to just detach it from the master component.

35
00:02:54,550 --> 00:02:57,370
Another way to do that is let me just do Manzie to show you.

36
00:02:57,580 --> 00:03:01,560
You can right click and you can detach the instance right there.

37
00:03:01,810 --> 00:03:04,060
So I'm going to detach that and I'm going to give it a new name.

38
00:03:04,180 --> 00:03:05,460
I'm going to call it.

39
00:03:06,570 --> 00:03:09,920
I'm going to say air and we can do option command.

40
00:03:11,100 --> 00:03:13,980
And there you go, we have our own air component.

41
00:03:14,900 --> 00:03:20,360
So it's just an easy way that you can kind of take that duplicated to make an instance, another great

42
00:03:20,360 --> 00:03:23,660
way to use these is by going into your assets.

43
00:03:24,350 --> 00:03:25,930
So I have a bunch of components there.

44
00:03:26,810 --> 00:03:29,810
Over here is our building our own components section.

45
00:03:30,110 --> 00:03:32,870
And you'll notice this is our page master components.

46
00:03:34,530 --> 00:03:37,410
Look at that, you see our atomic elements at the top.

47
00:03:38,470 --> 00:03:45,670
We see our elements over here that are kind of like our basic default, and if we go one layer deeper,

48
00:03:46,360 --> 00:03:47,680
let me just stretch this out.

49
00:03:47,860 --> 00:03:50,150
If we stretch us out, we see our farm field.

50
00:03:50,230 --> 00:03:52,210
It follows the same kind of naming convention.

51
00:03:52,210 --> 00:03:56,770
When you're creating styles, if you use a slash, it's going to create another kind of layer, like

52
00:03:56,770 --> 00:03:57,310
a folder.

53
00:03:57,550 --> 00:04:01,820
So we have our default air and we have just our regular form field.

54
00:04:02,050 --> 00:04:07,120
Go ahead, go out there, make some components and try like duplicating them, detaching that instance,

55
00:04:07,120 --> 00:04:13,780
creating a new version of that and creating a new component, because this is like one of the easiest

56
00:04:13,780 --> 00:04:16,280
ways to work with components within Sigma.

57
00:04:16,300 --> 00:04:19,120
I mean, it's really speeds up my workflow.

58
00:04:19,360 --> 00:04:25,960
And especially when you come across, like, going out and creating like a design system or just creating

59
00:04:25,960 --> 00:04:31,030
a bunch of components to make your life easier, especially designing at any level, whether that be

60
00:04:31,030 --> 00:04:38,310
wireframe mean or whether that be like visual design and gradually creating more higher fidelity mockups.

61
00:04:38,590 --> 00:04:40,120
This is going to help you.

62
00:04:40,870 --> 00:04:46,660
You can easily edit the styles which could reflect in here if you're using color styles and typography

63
00:04:46,660 --> 00:04:47,020
styles.

64
00:04:47,020 --> 00:04:51,190
And if you edit these like atomic elements, they will edit your components.

65
00:04:51,190 --> 00:04:58,000
And if you edit your components, edit those instances, everything is so connected and easy to update.

66
00:04:58,510 --> 00:04:59,020
Go ahead.

67
00:04:59,020 --> 00:05:03,400
Go out there and create your own components and those instances of those components.