1
00:00:00,150 --> 00:00:01,500
Hello, everyone, and welcome back.

2
00:00:01,770 --> 00:00:06,870
Next, what we're going to learn about these options up here in the middle, when you select like a

3
00:00:06,870 --> 00:00:10,260
frame or say like a rectangular shape like that.

4
00:00:10,770 --> 00:00:11,850
So let's jump right in.

5
00:00:11,860 --> 00:00:17,940
So I'm going to select R and I have the rectangle selected, as you can see, and I'm gonna draw a nice

6
00:00:17,940 --> 00:00:21,150
square right in the middle of my little frame over here.

7
00:00:22,230 --> 00:00:25,340
Let's zoom in and you have three options.

8
00:00:25,350 --> 00:00:26,750
Let's go through them individually.

9
00:00:26,790 --> 00:00:29,010
So the first option is edit object.

10
00:00:29,520 --> 00:00:32,580
So I've selected an object and I have a couple of options up here.

11
00:00:32,820 --> 00:00:34,260
I have the move tool.

12
00:00:34,620 --> 00:00:39,840
I have drawing tools like the pen tool that we saw before and the pencil tool.

13
00:00:40,380 --> 00:00:46,890
I also have the bend tool which will allow me to make some really nice curves and I have the paint back

14
00:00:46,890 --> 00:00:47,280
at all.

15
00:00:47,760 --> 00:00:52,350
So I really want to focus on a couple of these tools because you won't be using them all pretty often.

16
00:00:52,350 --> 00:00:59,760
But if we use the move tool, we can select like a point on this square.

17
00:01:01,500 --> 00:01:07,740
And we can move it any which way we want, so in this case, if we move it in, I'm going to make a

18
00:01:07,740 --> 00:01:08,910
little bit of a diamond.

19
00:01:09,570 --> 00:01:12,870
So I'm going to like both points and bring them in little by little.

20
00:01:13,320 --> 00:01:15,360
And I have a diamond.

21
00:01:18,860 --> 00:01:25,430
Now, if I wanted to you say something like the Bentall, I can take that.

22
00:01:27,300 --> 00:01:32,130
And start twisting it any which way I want, I can even make this into a little bit of an oval.

23
00:01:33,350 --> 00:01:37,220
Now, these are really great for making your own custom icons, and we're actually going to get into

24
00:01:37,220 --> 00:01:41,900
this in a later section of the course where we create our very own icons.

25
00:01:41,900 --> 00:01:46,540
But just so you can get used to some of these tools we have here.

26
00:01:46,940 --> 00:01:49,220
So I'm going to do that for this site to.

27
00:01:52,240 --> 00:01:54,670
Not a really nice oval, what we have going here, but.

28
00:01:58,780 --> 00:02:03,550
And we can even select these different points and bring them in, kind of looks like an egg about to

29
00:02:03,550 --> 00:02:11,020
topple over, but you don't need to actually click into here to to get those options.

30
00:02:11,020 --> 00:02:14,560
You can just double click on your shape and those options will appear.

31
00:02:15,640 --> 00:02:19,210
So that's to edit your object the next part.

32
00:02:19,370 --> 00:02:22,900
And when I spoke about the last video was a component.

33
00:02:23,320 --> 00:02:28,150
Now, this is one of the most powerful things about Theama and something that you will definitely use

34
00:02:28,150 --> 00:02:29,030
if you're on a team.

35
00:02:29,350 --> 00:02:32,020
I even use them when I'm doing solo work.

36
00:02:32,470 --> 00:02:39,160
Now, the difference between using components within a team and by yourself, it depends really on the

37
00:02:39,160 --> 00:02:40,930
plan that you're using within Sigma.

38
00:02:41,590 --> 00:02:48,070
Now, if you're using a free plan, you will only be able to use components within the file.

39
00:02:48,790 --> 00:02:52,120
You can't have a component be reused outside of the file.

40
00:02:53,370 --> 00:02:59,910
On a professional plane or an organizational plan, you can use components across teams, across files

41
00:02:59,910 --> 00:03:04,020
and across projects, and we're going into how to do that later.

42
00:03:05,400 --> 00:03:07,560
But this component.

43
00:03:08,840 --> 00:03:12,740
Little option here just creates a component.

44
00:03:14,060 --> 00:03:15,500
Now you'll notice that over here.

45
00:03:17,300 --> 00:03:21,650
Now, this is really great for interface design if you're creating new things that you need to reuse,

46
00:03:21,650 --> 00:03:29,050
like buttons or logos, text, there's different things that you can do and you can recreate.

47
00:03:29,870 --> 00:03:35,480
Now, if you see my component right here, there is four little dots.

48
00:03:35,810 --> 00:03:42,380
And those four little dots basically signify that this is a master component.

49
00:03:43,570 --> 00:03:49,210
So you don't want to touch this one, but if you do want to reuse it, what I would do is I would copy

50
00:03:49,210 --> 00:03:49,360
it.

51
00:03:49,360 --> 00:03:52,420
So I'm going to Kominski and Kamandi now.

52
00:03:52,420 --> 00:03:57,160
I have another component, but this is an instance.

53
00:03:57,700 --> 00:04:03,370
And what that means is this is another variation of this component.

54
00:04:04,210 --> 00:04:08,050
So you can have a file with your main component.

55
00:04:09,810 --> 00:04:16,980
Or a page with your main component and you can have the instance be reused throughout the rest of the

56
00:04:16,980 --> 00:04:24,330
file, in the case of using it within a free plan, like we'll be using it for this project that we're

57
00:04:24,330 --> 00:04:25,020
going to be building.

58
00:04:25,740 --> 00:04:26,810
So let's take a look at that.

59
00:04:26,850 --> 00:04:29,670
So in the assets panel, I'll see.

60
00:04:29,670 --> 00:04:31,440
I have local components.

61
00:04:33,290 --> 00:04:35,210
And you'll show me which frame it is in.

62
00:04:35,240 --> 00:04:36,770
So if I won, this is the frame.

63
00:04:36,770 --> 00:04:46,130
So if I rename this, I can call this components and if I go back into my assets section, I'll see

64
00:04:46,130 --> 00:04:48,110
that those were my components live.

65
00:04:48,410 --> 00:04:50,930
So I have my rectangle one and it's selected.

66
00:04:50,940 --> 00:04:52,330
That's my master component.

67
00:04:53,780 --> 00:04:57,980
But I don't have this component there because that is just a copy of this.

68
00:04:58,850 --> 00:05:00,590
So let's go to a different page.

69
00:05:00,620 --> 00:05:01,910
Let's see how we can use this.

70
00:05:02,540 --> 00:05:08,240
So I'm going to do here is I'm going to go into this frame and I'm going to go into my assets and I

71
00:05:08,240 --> 00:05:09,470
can just drag it over.

72
00:05:11,680 --> 00:05:17,230
And there we go, we have an instance, if we go back to my layers, we can see this little diamond

73
00:05:17,590 --> 00:05:20,400
shows that I have an instance of it and I can delete it if I want.

74
00:05:20,410 --> 00:05:22,990
And that component will always be there.

75
00:05:23,770 --> 00:05:29,200
Now, if I go back and I go back to that original component, if I delete that.

76
00:05:32,590 --> 00:05:33,850
I have no more component's.

77
00:05:35,750 --> 00:05:43,460
Let's go back and fix that, so there's my component and that's how you create components within Fatemah,

78
00:05:43,460 --> 00:05:48,120
it's really easy, really easy to use across different parts of your app.

79
00:05:48,140 --> 00:05:51,540
It's what we're going to be doing even in like the user flow section.

80
00:05:51,580 --> 00:05:56,240
We're going to be doing it when we're creating our very own components for our design system.

81
00:05:56,450 --> 00:05:58,010
It's going to speed up your workflow.

82
00:05:58,020 --> 00:06:02,960
Can you imagine if you have to keep on designing the same button over and over again when you can just

83
00:06:02,960 --> 00:06:06,500
easily go over to the assets panel and just copy and paste it from there?

84
00:06:07,040 --> 00:06:12,560
At least they'll all be the same and they'll all be very consistent and your decisions will be much

85
00:06:12,560 --> 00:06:13,900
more consistent afterwards.

86
00:06:14,720 --> 00:06:20,330
It's a great practice to have a component library for whatever file you're working on, especially when

87
00:06:20,330 --> 00:06:21,560
you're in the final stages.

88
00:06:22,640 --> 00:06:26,340
So we're going to delete this component next, I'm going to create a new rectangle.

89
00:06:26,360 --> 00:06:30,450
So I collect art and click shift and create a square over here.

90
00:06:31,250 --> 00:06:34,400
I'm going to zoom in, so I'm just sliding in.

91
00:06:36,650 --> 00:06:37,580
The next option.

92
00:06:42,280 --> 00:06:50,200
Now, to create a mask and then a copy this, so in case of Apple, I can you option shift?

93
00:06:51,750 --> 00:06:59,790
In drag, and that will drag a new square or you can just do a command and command via copy and paste,

94
00:06:59,790 --> 00:07:08,380
it doesn't matter, but we're going to make one of these a mask, so let's select a different color.

95
00:07:09,090 --> 00:07:12,270
So I went over to my fill, going to select red, bright, bright red.

96
00:07:13,230 --> 00:07:17,910
Now, if I select both of these and I click.

97
00:07:19,810 --> 00:07:21,220
The mask option right here.

98
00:07:24,540 --> 00:07:25,590
You'll notice that.

99
00:07:26,810 --> 00:07:27,830
One of these.

100
00:07:28,830 --> 00:07:31,740
Is hidden while the other one is showing.

101
00:07:33,250 --> 00:07:34,690
Now, if I move over.

102
00:07:36,480 --> 00:07:41,610
You'll notice that the rectangle on the left was actually acting as kind of like a window or like a

103
00:07:41,610 --> 00:07:45,480
frame into viewing this rectangle.

104
00:07:46,230 --> 00:07:51,930
This is great for imagery or if you want to, like, hide different shapes.

105
00:07:52,710 --> 00:07:55,790
So this is a great way to kind of do that.

106
00:07:56,580 --> 00:07:57,720
And if I delete this.

107
00:07:58,960 --> 00:08:04,630
It shows again, so let's do that one more time this time, let's overlay them.

108
00:08:06,080 --> 00:08:13,700
Uses mask and rectangle two is now the mask, and now if I move rectangle three.

109
00:08:16,570 --> 00:08:19,790
You'll see that it is being hidden by rectangles, too.

110
00:08:20,650 --> 00:08:24,190
So really cool way to create masks.

111
00:08:27,390 --> 00:08:34,410
But another great thing, so I'm going to click rectangle again and make another square you can create.

112
00:08:35,250 --> 00:08:36,570
You can use Boolean.

113
00:08:37,970 --> 00:08:38,780
Options here.

114
00:08:40,450 --> 00:08:46,750
So these bullying options or operations are right here, and usually this is when you have two or more

115
00:08:47,050 --> 00:08:47,710
shape's.

116
00:08:49,280 --> 00:08:55,670
Available, if I select all, I'm just going to drag my cursor over them, if I select all these, I

117
00:08:55,670 --> 00:09:01,730
have union selection, I have subtract selection, intersect, exclude, and I can even flatten these.

118
00:09:02,360 --> 00:09:05,660
So if I do a union, you'll see that they're all together.

119
00:09:05,660 --> 00:09:06,860
Now, they're one shape.

120
00:09:06,860 --> 00:09:10,310
If I double click in here, I can pull them out if I want.

121
00:09:11,330 --> 00:09:12,320
But they're still a union.

122
00:09:14,800 --> 00:09:22,360
Now, if I go back, bring that back in, go back, Manzie, and now I have all these shapes again.

123
00:09:23,720 --> 00:09:24,740
You can you subtract.

124
00:09:26,270 --> 00:09:27,710
You can do intersect.

125
00:09:29,620 --> 00:09:37,300
You can do exclude all these different options, and at the end, if you want to finalize your design,

126
00:09:39,160 --> 00:09:44,470
you'll see, like I said before, like, you can access these layers underneath and you can fiddle with

127
00:09:44,470 --> 00:09:45,100
them if you want.

128
00:09:45,700 --> 00:09:48,670
But if you want to access your design.

129
00:09:51,300 --> 00:09:52,780
I'm going to just fix this.

130
00:09:52,800 --> 00:09:53,350
OK, cool.

131
00:09:53,400 --> 00:09:54,260
This looks pretty cool.

132
00:09:54,630 --> 00:10:00,780
I'm going to actually select it, go to my Boolean operations and click Flodden selection and now I

133
00:10:00,780 --> 00:10:07,380
can no longer select that, but now I can edit it like it's its own shape so I can start clicking the

134
00:10:07,380 --> 00:10:11,700
move tool, the bental if I wanted to and go in a little bit deeper.

135
00:10:13,140 --> 00:10:20,520
And do weird stuff like this, this becomes really handy when you're actually using these different

136
00:10:20,520 --> 00:10:26,190
types of tools to create stuff like icons, and that's it for the top bar.