1
00:00:00,950 --> 00:00:06,530
Everyone, and welcome back now we're going to get into the design properties panel.

2
00:00:06,830 --> 00:00:09,290
Now, this is where you're going to be doing a lot of work as well.

3
00:00:09,300 --> 00:00:11,810
So I've created another square in my frame.

4
00:00:13,280 --> 00:00:16,670
I placed it in the middle and I'm over here on the right.

5
00:00:17,180 --> 00:00:19,130
So you'll notice three options design.

6
00:00:20,140 --> 00:00:22,360
Prototype and inspect.

7
00:00:23,760 --> 00:00:28,770
We're going be focusing on design and we to go through all these different options that you may see,

8
00:00:30,180 --> 00:00:35,430
and it's going to be different and really depending on the different things that you are going to be

9
00:00:35,430 --> 00:00:39,040
doing, like text and a shape will have different properties and we'll go over that.

10
00:00:39,840 --> 00:00:41,080
So let's go through it.

11
00:00:41,550 --> 00:00:43,620
So the first thing you have is.

12
00:00:44,830 --> 00:00:50,600
The alignment this is going to align this object based off of its parent.

13
00:00:51,100 --> 00:00:53,670
So in this case, if I click left, it's going to be to the left.

14
00:00:54,070 --> 00:00:56,290
If I click to the middle.

15
00:00:56,440 --> 00:00:57,330
This is the middle.

16
00:00:58,110 --> 00:00:58,690
The horizontal.

17
00:00:58,690 --> 00:01:02,230
Middle, right, top.

18
00:01:07,240 --> 00:01:12,700
So you can if I wanted this to be centered perfectly, now it's centered to the middle vertical.

19
00:01:15,250 --> 00:01:21,880
This is the middle America and this is the middle horizontal, if I want to be left and bottom bottom

20
00:01:21,880 --> 00:01:22,250
left.

21
00:01:22,390 --> 00:01:23,580
That's all I would have to do.

22
00:01:23,590 --> 00:01:27,060
So if I wanted to be right, it would click this the line, right.

23
00:01:28,720 --> 00:01:30,280
And then Allwine top.

24
00:01:31,620 --> 00:01:37,140
So this is really great if you need to align an object to your canvas or your frame, but if you wanted

25
00:01:37,140 --> 00:01:39,030
to objects where you can do as.

26
00:01:40,430 --> 00:01:41,600
You can align them together.

27
00:01:42,470 --> 00:01:48,140
This is really great if you have two objects, so if you don't want to drag over these objects and say

28
00:01:48,140 --> 00:01:53,330
if you have three objects and you just want to select two, you just select one, hold down shift,

29
00:01:53,480 --> 00:01:54,350
select the other.

30
00:01:55,710 --> 00:02:00,290
And now they're both centered to each other.

31
00:02:05,360 --> 00:02:10,040
And then you would remove them manually to be sent to the actual frame.

32
00:02:11,200 --> 00:02:13,670
So those are the ways to align your items.

33
00:02:13,700 --> 00:02:17,750
I'm going to delete these other two squares, bring this one back to the middle.

34
00:02:20,170 --> 00:02:27,970
OK, next, we have these different values, we have a bunch here, we have your X and Y values, we

35
00:02:27,970 --> 00:02:29,660
have your with and your height.

36
00:02:29,830 --> 00:02:30,950
So these are your positional.

37
00:02:31,480 --> 00:02:35,290
So if I say something like two hundred going move two hundred to the left.

38
00:02:35,830 --> 00:02:42,730
So your X is your horizontal axis and your Y is your vertical zero is going to set me to the top.

39
00:02:43,420 --> 00:02:44,380
So let's go back.

40
00:02:44,800 --> 00:02:50,960
Your wife and your each are your within your height and this little chain is going to connect them.

41
00:02:51,280 --> 00:02:58,030
So if I affect this property right here, if I say change it to four hundred, it's going to actually

42
00:02:58,450 --> 00:03:01,390
be four hundred height as well.

43
00:03:01,390 --> 00:03:08,860
But if I unlink this chain and I say set at the height of two hundred now the width won't change.

44
00:03:09,730 --> 00:03:17,350
So let's go all the way back, OK, and we're going to do is just set this all to five hundred and I'm

45
00:03:17,350 --> 00:03:20,050
going to center it again on my frame.

46
00:03:20,950 --> 00:03:24,100
So we have a five hundred by five hundred pixels square.

47
00:03:24,850 --> 00:03:27,570
Next we have our rotational value.

48
00:03:28,060 --> 00:03:30,160
We can change this to say 90.

49
00:03:31,890 --> 00:03:33,960
Which in a case of a square, it's not going to do anything.

50
00:03:33,990 --> 00:03:37,500
But if we do forty five, there we go.

51
00:03:37,890 --> 00:03:39,120
Or if we do 15.

52
00:03:41,140 --> 00:03:47,290
So you can do that manually, but if you want to actually not do that manually, you can do it just

53
00:03:47,290 --> 00:03:51,640
by going over here and you see how my cursor changes as I get close to a corner.

54
00:03:54,410 --> 00:03:58,780
If I hold that, I can spin it, if I hold shift, I'll go in increments.

55
00:03:58,790 --> 00:04:01,250
So I think it's 15 degree increments.

56
00:04:02,420 --> 00:04:04,310
And you can spin it any which way you want.

57
00:04:07,660 --> 00:04:10,530
And this is your corner radius.

58
00:04:10,720 --> 00:04:18,040
So if I want 100, it's going to make it rounded, you can even select this little dot here and pull

59
00:04:18,040 --> 00:04:18,400
it in.

60
00:04:20,140 --> 00:04:25,270
So now I have two hundred and fifty radius, and that looks like a circle where I can make it small,

61
00:04:25,270 --> 00:04:27,310
like a little card on a UI.

62
00:04:28,900 --> 00:04:35,770
That looks really good now if we go back and just reset it to zero, we'll go back to our square below

63
00:04:35,770 --> 00:04:35,920
that.

64
00:04:35,920 --> 00:04:37,870
We have constraints now.

65
00:04:37,870 --> 00:04:42,130
Constraints are really good for responsiveness in general.

66
00:04:43,180 --> 00:04:51,680
And basically it's how your item reacts to when your frame is being stretched or contracted.

67
00:04:51,700 --> 00:04:55,710
So in this case, if we look at our constraints, they're left in top.

68
00:04:56,140 --> 00:05:02,310
So that means if I resize my frame from the right in the bottom, it's not going to do anything.

69
00:05:02,530 --> 00:05:04,240
So I'm going to command Zengel back.

70
00:05:05,890 --> 00:05:11,260
But if I select from the top left, it's going to move with that top left.

71
00:05:12,750 --> 00:05:16,600
So pretty core right now, this is where it gets really interesting.

72
00:05:16,620 --> 00:05:22,800
Now, if we want to make like, say, responsive cards and stuff like that, all we need to do is set

73
00:05:22,800 --> 00:05:23,640
these properties.

74
00:05:23,970 --> 00:05:28,590
So in this case, say, left and right and top and bottom.

75
00:05:30,300 --> 00:05:40,710
Let's scale this, you'll see that now it's going to scale with your the way you scale your actual frame.

76
00:05:42,020 --> 00:05:47,440
So this is great for responsiveness if you're working on a different screen sizes and you want to create

77
00:05:47,450 --> 00:05:53,090
like maybe card components that you want to be able to reuse at different sizes and the content moves

78
00:05:53,090 --> 00:05:55,320
easily within, this is the way to do it.

79
00:05:55,610 --> 00:05:59,090
So I'm going to Kamandi all the way back to when we had a beautiful square.

80
00:05:59,600 --> 00:06:02,620
And there we go next.

81
00:06:02,630 --> 00:06:05,970
What we have is different blending modes.

82
00:06:05,990 --> 00:06:08,210
So this is kind of something you would see in Photoshop.

83
00:06:08,450 --> 00:06:14,240
We have like multiply, we have screen, all these different things really great for if you're using,

84
00:06:14,240 --> 00:06:15,530
like, multiple colors.

85
00:06:17,310 --> 00:06:19,750
And I say, I want to make this multiply.

86
00:06:19,800 --> 00:06:21,870
We can do that also within Sigma.

87
00:06:24,020 --> 00:06:25,910
So those are your blending.

88
00:06:28,280 --> 00:06:29,360
You're blending modes.

89
00:06:29,840 --> 00:06:31,380
Next, we have our filles.

90
00:06:31,400 --> 00:06:33,430
This is very self-explanatory.

91
00:06:33,860 --> 00:06:37,700
You just need to click this little section here and you can edit the hex value.

92
00:06:37,700 --> 00:06:39,220
You can even change to RGB.

93
00:06:39,590 --> 00:06:47,360
You have Celsius and so on, and you can go and just drag your cursor and change the color.

94
00:06:48,620 --> 00:06:49,520
You can change that hues.

95
00:06:50,620 --> 00:06:53,680
And you can go up and down, get all those different values.

96
00:06:56,180 --> 00:07:02,050
And get some really nice colors, so they've got we got kind of like this nice turquoise teal bright

97
00:07:02,090 --> 00:07:05,540
color right here, you can toggle that to turn on and off.

98
00:07:05,540 --> 00:07:12,440
If you're working with different layers, maybe different components, you can also add more color fills

99
00:07:12,440 --> 00:07:14,130
on top of one layer.

100
00:07:14,570 --> 00:07:16,960
So this one is a linear one.

101
00:07:17,210 --> 00:07:18,820
You can change that up here.

102
00:07:18,980 --> 00:07:21,500
So in the case earlier, we had a solid color.

103
00:07:23,520 --> 00:07:27,720
And we can change that opacity to see like 20 so you can see the layer below it.

104
00:07:27,750 --> 00:07:31,590
So if I go back and I go up here, I can change it to linnear.

105
00:07:32,220 --> 00:07:33,660
I can change it to Radil.

106
00:07:35,100 --> 00:07:42,830
Angular diamond, and you can even have an image, so a lot of different options for you right there.

107
00:07:44,540 --> 00:07:49,590
So let's go back, let's actually remove this layer just by clicking this minus button, so you still

108
00:07:49,590 --> 00:07:50,900
have our nice fellow over here.

109
00:07:51,270 --> 00:07:52,500
You can add stroke's.

110
00:07:54,130 --> 00:07:59,670
So you can see a light black outline around this shape, we can change that over here.

111
00:07:59,680 --> 00:08:02,070
So if I change that to 10, that's the value.

112
00:08:03,040 --> 00:08:03,720
There we go.

113
00:08:05,620 --> 00:08:11,260
So there's different ways you can have it centered, you can have it inside, outside, that's sometimes

114
00:08:11,260 --> 00:08:13,200
up to preference, depends on what you're doing.

115
00:08:13,210 --> 00:08:15,780
Like see if I'm using a button I'll usually have access to inside.

116
00:08:15,790 --> 00:08:22,360
So it doesn't affect, like, different sizing in terms of the pixel width of the actual button itself

117
00:08:22,360 --> 00:08:23,170
and the pixel height.

118
00:08:25,060 --> 00:08:26,450
You can have different effects here.

119
00:08:27,160 --> 00:08:31,900
So if I click that plus button, if the default effect is going to be a drop shadow, you'll see that

120
00:08:32,140 --> 00:08:34,440
very faint drop shadow right there.

121
00:08:37,860 --> 00:08:43,170
You can edit the values of that drop shadow, so I have it set to like 10 y, so it's going to move

122
00:08:43,170 --> 00:08:43,910
it down 10.

123
00:08:44,490 --> 00:08:50,940
And if I want to move it ten to the right, it's going to look like the shadows being cast to the right.

124
00:08:51,100 --> 00:08:56,280
That means the light source is coming from the here and you can blur it any which way you want.

125
00:08:56,760 --> 00:09:02,710
So I played it to say 20 and you can set the opacity and the color of that shadow.

126
00:09:02,970 --> 00:09:05,730
So in this case, let's make it like a dark blue.

127
00:09:07,140 --> 00:09:15,720
And we can see that right there, that's one effect, other effects that you can do are in inner shadow.

128
00:09:17,840 --> 00:09:25,570
You can do layer by layer and you can do background layer, so let's stick to our regular drop shadow.

129
00:09:26,000 --> 00:09:31,250
The last part of here is the export so you can export any which way you want.

130
00:09:31,250 --> 00:09:32,900
You can do multiple exports.

131
00:09:33,800 --> 00:09:43,700
We can set this sizing kind of like the prefix you can set the of which file type you want really easily

132
00:09:43,700 --> 00:09:50,960
be able to export those to whichever desktop you have, file folder and easily access all those files.

133
00:09:52,090 --> 00:09:55,750
Next, we have text, so I'm going to delete this.

134
00:09:56,760 --> 00:10:03,990
Nice square that we made, so I'm just going to click, delete or backspace and I'm going to select

135
00:10:04,130 --> 00:10:06,510
T for the text and I'm just going to click.

136
00:10:07,920 --> 00:10:12,540
And then a hello and a comment, which we will select all of them.

137
00:10:13,560 --> 00:10:17,700
And you'll notice that they still have the similar properties, like we don't have the corner radius

138
00:10:17,700 --> 00:10:18,120
here.

139
00:10:18,840 --> 00:10:21,000
Yeah, that's basically kind of what we don't have.

140
00:10:21,000 --> 00:10:28,260
But now we have a text and we can change the copy to be whatever font or typeface that you want.

141
00:10:28,270 --> 00:10:31,190
In this case, we can do like Helvetica or something like that.

142
00:10:32,160 --> 00:10:40,110
We have our different font options or weights and we can adjust the size we have leadin.

143
00:10:40,110 --> 00:10:42,960
We have all those different options.

144
00:10:42,960 --> 00:10:44,510
We have kerning in there, too.

145
00:10:44,820 --> 00:10:47,430
So this will likely this will affect your line height.

146
00:10:47,430 --> 00:10:54,030
You can set it manually, you can set your kerning and your letter spacing to whatever percentage you

147
00:10:54,030 --> 00:10:54,450
want.

148
00:10:55,020 --> 00:10:57,720
And you can still use those different options.

149
00:10:57,720 --> 00:11:04,230
Like if you have text over image, you can select like a drop shadow effect to fix that if you have

150
00:11:04,230 --> 00:11:06,450
any legibility or readability issues.

151
00:11:08,080 --> 00:11:15,100
And that's all you really need to know for designing within Sigma, at least using design panel over

152
00:11:15,100 --> 00:11:15,430
here.