1
00:00:00,330 --> 00:00:05,550
OK, now we learned a bunch of different concepts, we've learned about different tools, we learned

2
00:00:05,550 --> 00:00:09,750
about different panels, and you're probably thinking, Daniel, I just want to kind of get started.

3
00:00:09,750 --> 00:00:11,400
I want to jump in and trust me.

4
00:00:11,400 --> 00:00:12,420
I truly believe you.

5
00:00:12,630 --> 00:00:13,890
And that's what we're going to do right now.

6
00:00:13,890 --> 00:00:20,610
We're going to build a very, very quick Lanying hero section just to test out what we just learned.

7
00:00:21,270 --> 00:00:24,300
Now, I have a couple of images that I dropped into here.

8
00:00:24,720 --> 00:00:32,550
The easiest way to drop in an image is to either if you go in here, you can place an image which is

9
00:00:32,550 --> 00:00:38,670
like literally is uploading an image from your desktop or a file folder over here.

10
00:00:38,850 --> 00:00:41,190
You can even get these images through a plug in.

11
00:00:41,190 --> 00:00:45,000
And we're going to learn about how to use that in different lessons in the future.

12
00:00:45,210 --> 00:00:49,290
But I have these images here and I make them available for you and you'll be able to use them in your

13
00:00:49,290 --> 00:00:49,800
file.

14
00:00:50,990 --> 00:00:56,460
I really encourage you either to follow along and try to recreate what I'm doing or just try and do

15
00:00:56,460 --> 00:00:57,060
your own thing.

16
00:00:57,240 --> 00:00:58,860
I mean, it's just for fun.

17
00:00:58,860 --> 00:01:03,600
It's just to get used to the program before we actually jump in and start doing some more complex things.

18
00:01:04,180 --> 00:01:04,830
So let's do it.

19
00:01:06,090 --> 00:01:14,040
So one thing that we didn't necessarily go over really quickly was the create an auto layout.

20
00:01:14,460 --> 00:01:19,830
So the layout grid is really important for laying out things on your frame.

21
00:01:20,160 --> 00:01:23,610
And so if I select the frame, I'm noticing the design properties panel.

22
00:01:23,610 --> 00:01:28,320
I'm just going to click layout grid and this little grid comes up and that's not where we're going to

23
00:01:28,320 --> 00:01:28,630
use it.

24
00:01:28,650 --> 00:01:30,390
That's more for creating icons.

25
00:01:30,930 --> 00:01:35,850
But if I click on that grid and I click columns, that's what we want.

26
00:01:36,630 --> 00:01:40,830
So just follow along and I'll teach you how to create better grids in the future.

27
00:01:41,390 --> 00:01:42,840
We're just going to set the count to 12.

28
00:01:46,270 --> 00:01:53,500
We're going to set the margin to one hundred, your margin is your side on the left and right, and

29
00:01:53,500 --> 00:01:59,290
we're going to set our gutta to thirty two, so let's just stick with that for now.

30
00:01:59,290 --> 00:02:00,580
But this is going to be our guide.

31
00:02:02,240 --> 00:02:06,710
Now, this isn't going to show up in the final designs, you can toggle these on and off if you go to

32
00:02:06,710 --> 00:02:07,790
your view section here.

33
00:02:09,270 --> 00:02:15,370
You can show your grids, you have your pixel grid, which we have showing, but your layout grid.

34
00:02:15,730 --> 00:02:19,290
Now, this is my shortcut, which is control.

35
00:02:20,040 --> 00:02:23,160
So if I click control, it's going to toggle it on and off.

36
00:02:23,160 --> 00:02:27,150
And that's just there for you to use for your guide.

37
00:02:27,390 --> 00:02:29,280
It's not going to show up in your phone lines, like I said.

38
00:02:30,630 --> 00:02:37,710
But we're going to do that and it's going to place this here and we can scale this image any which way

39
00:02:37,710 --> 00:02:38,280
we want.

40
00:02:38,940 --> 00:02:40,660
So we'll just place that there for now.

41
00:02:41,010 --> 00:02:43,370
Now we're going to we're going to create like a company page.

42
00:02:43,800 --> 00:02:45,200
We're going to create some shapes.

43
00:02:45,420 --> 00:02:48,740
So I'm going to select my rectangle tool and go up here.

44
00:02:49,260 --> 00:02:51,330
I'm going to select my rectangle to like that.

45
00:02:51,330 --> 00:02:52,080
The zoom in.

46
00:02:53,230 --> 00:02:55,390
And let's give it a feel of say, like.

47
00:02:56,800 --> 00:03:03,730
I can read like that, and now what I'm going to do is I'm going to maybe create another shape so of

48
00:03:03,730 --> 00:03:04,480
Polygon.

49
00:03:05,790 --> 00:03:06,750
It's a triangle.

50
00:03:07,660 --> 00:03:10,060
And let's give that another color.

51
00:03:11,800 --> 00:03:19,030
We like yellow, bring that over here and I'm going to select my circle shape.

52
00:03:20,580 --> 00:03:21,960
And make a circle.

53
00:03:23,440 --> 00:03:25,600
And make this one maybe like blue.

54
00:03:27,420 --> 00:03:32,430
And there we go, so we kind of have, like, these shapes, I'm going to actually use them as my logo,

55
00:03:32,850 --> 00:03:39,090
so I'm going to just like rotate this any which way I want circles, obviously.

56
00:03:39,090 --> 00:03:39,750
Fine.

57
00:03:41,300 --> 00:03:42,980
We'll just keep these together.

58
00:03:45,700 --> 00:03:50,540
So we have our little logo here, and if he wanted to, we can group these.

59
00:03:50,560 --> 00:03:50,950
So if I.

60
00:03:50,950 --> 00:03:51,310
Right.

61
00:03:51,310 --> 00:03:51,820
Click.

62
00:03:53,190 --> 00:03:58,830
I can go in here and group this election so I can easily move that any which way I want, it's going

63
00:03:58,830 --> 00:03:59,450
to be on my grid.

64
00:03:59,460 --> 00:04:00,360
It's going to be at the top.

65
00:04:00,870 --> 00:04:01,500
Perfect.

66
00:04:02,130 --> 00:04:05,970
So I'm going to create like a consultancy website hero page.

67
00:04:06,570 --> 00:04:07,320
Look at these people.

68
00:04:07,320 --> 00:04:08,940
They're talking about something really important.

69
00:04:09,030 --> 00:04:10,320
Let's get some text.

70
00:04:10,560 --> 00:04:11,520
So I'm going to write.

71
00:04:12,330 --> 00:04:13,350
I'm just going to drag.

72
00:04:13,350 --> 00:04:14,610
And so I have some text.

73
00:04:15,210 --> 00:04:24,270
So let's write Transforming the Way or organizations

74
00:04:26,820 --> 00:04:33,750
define design and build software.

75
00:04:36,220 --> 00:04:44,350
And if I selected all, I can go over here and change the font now, really nice I like is Merriwether.

76
00:04:44,980 --> 00:04:46,780
I'm going to change the font weight.

77
00:04:47,810 --> 00:04:55,970
And keep it to regular, we can even change the font size that's going to be fine, these different

78
00:04:55,970 --> 00:04:56,670
options here.

79
00:04:56,690 --> 00:04:59,750
So I like to do is I'll just do an alternate.

80
00:04:59,840 --> 00:05:02,420
So that's based off of how many lines of text you have.

81
00:05:04,550 --> 00:05:05,540
So I'm going to do that.

82
00:05:07,350 --> 00:05:12,880
And I'm going to let that go all the way, or we can just decide.

83
00:05:12,960 --> 00:05:13,400
There we go.

84
00:05:13,410 --> 00:05:17,070
So it's going to take up five columns and my image is going to take up.

85
00:05:18,330 --> 00:05:28,080
Seven, so that's looking really good, what else I'm going to do is I'm going to make another text.

86
00:05:30,330 --> 00:05:36,060
And we're going to write some more copy, we connect strategy.

87
00:05:36,570 --> 00:05:38,370
Now, I have all this text prepared.

88
00:05:43,720 --> 00:05:44,440
And.

89
00:05:46,050 --> 00:05:51,390
You can either just, like, redesign somebody's landing page for this and we'll test.

90
00:05:53,410 --> 00:05:54,670
That's what I'm kind of doing.

91
00:05:57,290 --> 00:06:04,790
So data services, what else do we have to bring your organization's

92
00:06:07,100 --> 00:06:16,250
most valuable software driven experiences to life?

93
00:06:16,610 --> 00:06:22,130
OK, now going to select US song with Kamandi and I'm going to make this a different font.

94
00:06:22,160 --> 00:06:24,380
Let's do something like Open Sans.

95
00:06:25,190 --> 00:06:26,270
That's nice.

96
00:06:26,270 --> 00:06:29,330
And we are going to bring that down.

97
00:06:29,570 --> 00:06:31,540
14 a little too small.

98
00:06:31,550 --> 00:06:32,630
We can go up a little bit.

99
00:06:33,050 --> 00:06:35,800
Eighteen is fine and we'll keep it on regular.

100
00:06:36,140 --> 00:06:41,330
And once again, I'm just going to make it autosite and it's going to be the same with if we wanted

101
00:06:41,330 --> 00:06:41,540
to.

102
00:06:41,540 --> 00:06:43,930
We can even bring that in a little bit more.

103
00:06:44,810 --> 00:06:49,640
And what we're gonna do next is we are going to make a button.

104
00:06:50,510 --> 00:06:55,550
No, the way I like making buttons is I like making them within a frame so you can put frames within

105
00:06:55,550 --> 00:07:00,260
frames, like I have a frame to select it right now and I can make a frame and I can make another frame

106
00:07:00,260 --> 00:07:01,050
if I wanted to.

107
00:07:01,520 --> 00:07:02,450
So this is my button.

108
00:07:02,830 --> 00:07:04,190
You can't really see it right now.

109
00:07:04,900 --> 00:07:06,800
And I'm just going to put it right here.

110
00:07:07,850 --> 00:07:09,410
But I'm going to fill it.

111
00:07:10,070 --> 00:07:12,950
I'm going to fill the frame with my team colors.

112
00:07:12,950 --> 00:07:13,850
So say black.

113
00:07:15,110 --> 00:07:16,330
No, let's do blue.

114
00:07:18,030 --> 00:07:22,590
There's my button and inside of my button, I'm going to select a textile and I'm going to select inside

115
00:07:22,590 --> 00:07:23,100
the frame.

116
00:07:23,110 --> 00:07:28,300
And if you notice inside my layers, my text will go underneath my frame.

117
00:07:28,320 --> 00:07:31,050
So now we have kind of this layer within a layer here.

118
00:07:32,130 --> 00:07:36,240
So I'm going to say let's do learn more.

119
00:07:37,530 --> 00:07:40,080
So I'm going to select all of that.

120
00:07:40,260 --> 00:07:41,460
I'm going to select the fill.

121
00:07:41,880 --> 00:07:50,440
And let's do like I'm also going to set that to Senate and I'm going to make sure that it's auto with.

122
00:07:50,460 --> 00:07:56,940
So that means it's going to grow with the actual width of the copy inside.

123
00:07:58,080 --> 00:08:02,670
So I'm going to select that text again, I'm just going to center it within this frame.

124
00:08:03,630 --> 00:08:06,060
Now, this is where things get a little bit interesting.

125
00:08:07,870 --> 00:08:12,430
Nonetheless, like this frame and what you can do is you can do this in two ways.

126
00:08:13,750 --> 00:08:15,510
But we're going to rename this to Button first.

127
00:08:16,800 --> 00:08:17,760
You can do this in two ways.

128
00:08:18,860 --> 00:08:23,520
You can select your text and you can go to your constraints.

129
00:08:23,540 --> 00:08:29,210
Remember what I said about having something within a frame resize easily, you can send it to the center

130
00:08:29,780 --> 00:08:33,620
and center and every time you move your frame, it's just going to move.

131
00:08:33,830 --> 00:08:40,100
If you said it to left and right, what's going to happen is it's going to shrink because it's only

132
00:08:40,100 --> 00:08:41,150
the size of a text.

133
00:08:41,150 --> 00:08:43,760
So that means you would need to expand the text.

134
00:08:44,450 --> 00:08:50,150
Now, I'm holding option here while I'm expanding it all the way to each side.

135
00:08:51,410 --> 00:08:57,830
Now, if I go back and I said it back to center, that's one way to make a big button and we can round

136
00:08:57,830 --> 00:08:59,000
the corner is on that.

137
00:08:59,390 --> 00:09:02,900
So I said it's a five and clicked enter to confirm that.

138
00:09:03,290 --> 00:09:04,790
And I'm going to hide my grid.

139
00:09:04,790 --> 00:09:06,230
It's controlled for me.

140
00:09:08,010 --> 00:09:12,270
So I have a nice button, but if I wanted to do, say, an auto layout.

141
00:09:13,290 --> 00:09:17,310
I can click through this little Ottilia line, selecting the button frain.

142
00:09:18,680 --> 00:09:24,620
Click that and what it's going to do is five, two or more items within this frame, it's going to automatically

143
00:09:24,620 --> 00:09:26,980
lay it out in a horizontal direction.

144
00:09:26,990 --> 00:09:35,110
So if I say copy this and paste it, it will be automatically added and it will grow the entire frame.

145
00:09:35,870 --> 00:09:38,510
You'll see that the space between is ten.

146
00:09:38,510 --> 00:09:42,580
If I make it like say something like twenty four, it's going to grow.

147
00:09:43,160 --> 00:09:48,590
If I make the space around, you can make that over here.

148
00:09:48,650 --> 00:09:57,410
So this is your top and your bottom, your left and your right and where it is with in this actual frame.

149
00:09:57,440 --> 00:10:00,440
So everything is to the left and the right.

150
00:10:00,450 --> 00:10:03,800
So your auto layout right now is these are kind of like your constraints.

151
00:10:03,800 --> 00:10:09,980
If you're not allowed all the content, I want them to be centered to the middle in this case.

152
00:10:13,340 --> 00:10:19,460
Right now, they're packed together, but you can also have space between so if I select this frame

153
00:10:19,460 --> 00:10:24,890
and I scale it, they're going to be to the left and the right in this case or top to the bottom if

154
00:10:24,890 --> 00:10:26,420
there's positioned vertically.

155
00:10:27,140 --> 00:10:28,430
So let's remove all this.

156
00:10:28,430 --> 00:10:32,300
I'm going to command all the way back, but we're going to keep the Ottilia.

157
00:10:34,150 --> 00:10:40,720
And what we're going to do is we're going to set this can be set to zero because we only have one thing

158
00:10:40,720 --> 00:10:41,130
in here.

159
00:10:42,070 --> 00:10:42,870
We're going to go in here.

160
00:10:42,910 --> 00:10:44,200
We're going to set this to the center.

161
00:10:44,770 --> 00:10:48,760
We're going to do 16 for the top, 16 for the bottom.

162
00:10:50,200 --> 00:10:57,320
We're going to have space of 40 on the left in space of 40, right, and that's perfect.

163
00:10:57,370 --> 00:11:01,830
It's packed in there and we are going to set the constraints.

164
00:11:01,840 --> 00:11:07,580
So if it's hug contents, that means it's going to not grow when I move it left or right.

165
00:11:07,630 --> 00:11:08,650
So if I select this frame.

166
00:11:09,610 --> 00:11:10,720
And move it left or right.

167
00:11:11,020 --> 00:11:12,400
Those things are not going to grow.

168
00:11:14,160 --> 00:11:15,940
So let's make this a little bit smaller.

169
00:11:17,090 --> 00:11:17,460
OK?

170
00:11:18,620 --> 00:11:22,230
So I don't want that to grow, I just want to stick it to the left and the right, perfect.

171
00:11:22,250 --> 00:11:27,880
But I want all these to be in their own frame as well so we can do that.

172
00:11:28,100 --> 00:11:32,210
So I'm going to select them all and I'm going to put them in a frame.

173
00:11:32,960 --> 00:11:35,420
Now, there's a couple of ways we can do this.

174
00:11:35,450 --> 00:11:38,540
If I right click, I can go to frame selection.

175
00:11:39,380 --> 00:11:43,080
And the the shorthand for that is option command.

176
00:11:44,420 --> 00:11:45,830
So now they're all in their own frame.

177
00:11:46,400 --> 00:11:48,320
So I'm going to rename that content.

178
00:11:52,060 --> 00:11:54,850
And here I'm going to go to Ortolan again.

179
00:11:56,240 --> 00:11:59,330
And I'm going to position them apart 16.

180
00:12:01,500 --> 00:12:06,450
Let's make it 20 for a little more space, maybe 20 for OK.

181
00:12:07,800 --> 00:12:09,240
And what I'm going to do is.

182
00:12:10,520 --> 00:12:12,210
I'm going to leave everything like that.

183
00:12:12,650 --> 00:12:17,690
That's perfect, the constraints I'm going to put fixed and I'm going to make sure that it's going to

184
00:12:17,690 --> 00:12:19,490
scale left and right.

185
00:12:20,920 --> 00:12:26,440
We can leave it to hugging content, because if I add, say more, text the bottom, I'm going to comment.

186
00:12:26,440 --> 00:12:29,200
See Kamandi, this frame's going to grow.

187
00:12:29,350 --> 00:12:31,150
And this is great for adding content.

188
00:12:31,150 --> 00:12:37,720
Like if you have lists and you want to constantly add new items to your list, you can do that with

189
00:12:37,720 --> 00:12:39,280
something like auto layout.

190
00:12:39,430 --> 00:12:42,400
It's really great for growing lists or shrinking things.

191
00:12:42,610 --> 00:12:44,860
Awesome, especially for content like this.

192
00:12:45,130 --> 00:12:50,620
If I wanted to to add more content, everything is going to grow the more I type.

193
00:12:51,850 --> 00:12:55,270
OK, so now that we have that set up, it can be left and right.

194
00:12:55,270 --> 00:12:56,890
And if we go back to our frame.

195
00:12:59,960 --> 00:13:05,050
Now, that is going to shrink once we set the content within, so the content within is right now is

196
00:13:05,060 --> 00:13:05,900
at fixed width.

197
00:13:05,900 --> 00:13:13,010
But if I do filter to container and this one is filled to containers, it's going to go all the way

198
00:13:13,010 --> 00:13:13,670
to the edge.

199
00:13:15,580 --> 00:13:21,700
Let's see how everything moves, so now it's automatically responsive.

200
00:13:21,730 --> 00:13:23,170
Now, that is pretty wild for me.

201
00:13:23,320 --> 00:13:25,270
I love that that about Fatemah.

202
00:13:26,290 --> 00:13:26,920
Perfect.

203
00:13:27,400 --> 00:13:29,390
So we have that built out.

204
00:13:29,680 --> 00:13:31,060
The image is very similar.

205
00:13:31,130 --> 00:13:32,900
I'm going to do is I'm just going to select that.

206
00:13:32,920 --> 00:13:34,290
I'm going to do left and right.

207
00:13:34,780 --> 00:13:36,370
We're actually going to bring this image in.

208
00:13:37,510 --> 00:13:38,560
Let's overlay it.

209
00:13:39,760 --> 00:13:41,500
And we can do something like this.

210
00:13:45,210 --> 00:13:51,540
And we can make the image left and right, we'll make this left and right, and you can start seeing

211
00:13:51,540 --> 00:13:53,900
how this plays nicely together.

212
00:13:56,020 --> 00:13:58,090
So we kind of have like our own responses.

213
00:13:58,960 --> 00:14:01,270
Well, design, really cool stuff.

214
00:14:02,200 --> 00:14:07,060
OK, next we're going to I'm going to select the text layer again.

215
00:14:08,750 --> 00:14:15,260
And I'm going to have some navigation options, I'm going home on a command C, Command V.

216
00:14:17,350 --> 00:14:18,580
I have about.

217
00:14:21,590 --> 00:14:23,150
I have services.

218
00:14:26,150 --> 00:14:33,550
I have case studies and the last one I have contact.

219
00:14:35,180 --> 00:14:38,510
So these are all my options and I can do that same thing I can.

220
00:14:38,540 --> 00:14:40,880
Right, click in while I select all them.

221
00:14:41,060 --> 00:14:42,710
Frame that selection.

222
00:14:44,320 --> 00:14:48,260
We commit to an ideal layout and we can space than any which way we want.

223
00:14:48,820 --> 00:14:51,480
And I'm just going to put them all way onto the right for now.

224
00:14:52,850 --> 00:14:53,780
And center at.

225
00:14:55,050 --> 00:14:58,980
If I select all these, I'm going to go up here and I'm just going to center them.

226
00:14:59,860 --> 00:15:04,400
On that vertical axis, and now we kind of have our header, really cool stuff here.

227
00:15:05,050 --> 00:15:07,810
So this Budden, let's talk about quickly components.

228
00:15:07,810 --> 00:15:11,650
So now we have this button that I want to reuse, say, through the website as our primary.

229
00:15:12,040 --> 00:15:18,640
What I can do is I can create a component out of it by clicking that button up there and I can rename

230
00:15:18,640 --> 00:15:20,200
this component to primary.

231
00:15:21,850 --> 00:15:26,380
Now, I'm going to go into my prototypes and I'm going to want to use that primary.

232
00:15:26,380 --> 00:15:32,650
So I'm going to buy assets, tap it on desktop right now, and I can reuse that primary button that

233
00:15:32,650 --> 00:15:33,940
we just created.

234
00:15:35,310 --> 00:15:40,770
I'm holding an option while I'm driving it, option and shift is going to let me drag it while keeping

235
00:15:40,770 --> 00:15:44,460
it on the on the same vertical axis.

236
00:15:45,520 --> 00:15:51,490
You can space that and stop at the crib and we can modify this and create different variations of that

237
00:15:51,490 --> 00:15:54,880
primary button if we wanted to, but this primary button.

238
00:15:56,380 --> 00:16:02,110
Is reuseable now, so I'm going to delete those and go back, so as you can see with what we learned,

239
00:16:02,110 --> 00:16:03,970
we could easily create a little Web page.

240
00:16:03,970 --> 00:16:05,280
We created some shapes here.

241
00:16:05,560 --> 00:16:08,200
We learned how to use our text layers.

242
00:16:08,440 --> 00:16:10,710
We learned how to create components with buttons.

243
00:16:11,020 --> 00:16:19,780
We had images, constraints, creating a responsive website, using frames and using the new audio feature

244
00:16:19,780 --> 00:16:21,400
that Sigma had just released.

245
00:16:21,880 --> 00:16:25,860
And we were easily able to create something that looks really great.

246
00:16:25,940 --> 00:16:29,470
Let's toggle that grid so I have control.

247
00:16:30,700 --> 00:16:31,690
Let's toggle that.

248
00:16:31,690 --> 00:16:34,410
And that looks really, really nice.

249
00:16:34,720 --> 00:16:36,130
It looks really professional.

250
00:16:36,340 --> 00:16:37,660
And now you're ready to go.

251
00:16:38,410 --> 00:16:43,090
If you have any questions, don't hesitate to reach out to me and I'll get back to you really quickly.