1
00:00:05,040 --> 00:00:09,970
One all right everybody welcome back.

2
00:00:10,050 --> 00:00:16,200
What we're going to talk about now is symbols of what they are and why they're so cool.

3
00:00:16,200 --> 00:00:18,830
So what is a symbol.

4
00:00:18,840 --> 00:00:27,870
A symbol is something that you can create and sketch that you can easily reuse or repeat just like in

5
00:00:28,350 --> 00:00:31,040
programming with the DRY principle.

6
00:00:31,050 --> 00:00:33,210
You know we don't want to repeat ourselves right.

7
00:00:33,210 --> 00:00:40,410
So in the first set that we built we did a lot of copy pasting with our navigation bar and other things

8
00:00:40,980 --> 00:00:47,730
but luckily with symbols we only need to create things once maybe once or twice and we can reuse them

9
00:00:47,880 --> 00:00:50,490
through our entire project.

10
00:00:50,490 --> 00:00:53,110
So go ahead and click insert.

11
00:00:53,310 --> 00:00:55,660
And we're going to just thrown an art board.

12
00:00:55,950 --> 00:00:57,530
IPhone 7 is fine.

13
00:00:58,530 --> 00:01:00,710
And let's go ahead to make a navigation bar.

14
00:01:00,710 --> 00:01:08,720
So we're going to insert a rectangle and we're going drag it over toward Snap's to the edges and let's

15
00:01:08,730 --> 00:01:12,780
bring it down 65 65 points.

16
00:01:13,230 --> 00:01:13,470
Right.

17
00:01:13,470 --> 00:01:18,930
If you if you don't get around 65 you can adjust it over here in this in this pain.

18
00:01:19,150 --> 00:01:23,410
So it should be 375 by 65.

19
00:01:23,760 --> 00:01:34,690
Let's go ahead and get rid of the border and let's give ourselves a nice cool color now or something.

20
00:01:34,850 --> 00:01:36,080
It looks nice.

21
00:01:38,690 --> 00:01:39,650
That's pretty cool.

22
00:01:39,650 --> 00:01:41,030
Kind of like that color.

23
00:01:41,090 --> 00:01:45,260
Find a cool color doesn't need to be anything crazy.

24
00:01:45,850 --> 00:01:46,700
Yeah.

25
00:01:47,210 --> 00:01:50,520
And give it a shot if you want.

26
00:01:50,570 --> 00:01:55,080
All I want is a shadow for this one.

27
00:01:55,130 --> 00:01:57,440
And let's go insert some text.

28
00:01:57,440 --> 00:02:03,970
So go ahead and type title right.

29
00:02:07,020 --> 00:02:12,500
And drag it over to the center we will for for this purpose.

30
00:02:12,690 --> 00:02:14,700
We'll go ahead and leave it.

31
00:02:14,760 --> 00:02:22,910
See how it snapped the top was a line to the center the vertical center will go to do that.

32
00:02:22,910 --> 00:02:30,010
Just cuz we'll pretend that there is a status bar up here so we want to keep enough room for everything.

33
00:02:30,460 --> 00:02:34,710
And let's go ahead and.

34
00:02:34,830 --> 00:02:35,170
Oh.

35
00:02:35,210 --> 00:02:43,760
Before we insert anything else I want to make this center alignment right as we type things will go

36
00:02:43,820 --> 00:02:45,880
outwards.

37
00:02:45,920 --> 00:02:49,570
Also inserts in text and over here.

38
00:02:49,580 --> 00:02:56,680
We'll type in right for the right side and let's make sure it is right aligned.

39
00:02:57,020 --> 00:03:07,390
And let's quickly toggle on our grid with control g to at least have some sort of dimensions to work

40
00:03:07,390 --> 00:03:13,270
with this looks like it's roughly 20 20 points away doesn't need to be exactly perfect.

41
00:03:13,270 --> 00:03:16,010
This is just an example.

42
00:03:16,030 --> 00:03:25,180
And finally let's insert our left after We'll make this left a line.

43
00:03:25,960 --> 00:03:37,460
And again let's try this over and make it roughly 20 away from from the left edge.

44
00:03:37,460 --> 00:03:45,050
Now we didn't really get this quite perfect so let's just go ahead and highlight all three of these

45
00:03:45,080 --> 00:03:48,580
with shift shifting counting all three.

46
00:03:48,860 --> 00:03:52,170
And I am just going to click this little bit aligned vertically.

47
00:03:52,180 --> 00:03:53,690
I was going to snap everything

48
00:03:56,720 --> 00:04:07,360
together vertically and now I'm going to command g to group these into a group and let's call it navigation

49
00:04:07,360 --> 00:04:10,000
details.

50
00:04:10,660 --> 00:04:18,820
Now I'm just going to drag and make sure that this is aligned through the center with perfect and I'm

51
00:04:18,820 --> 00:04:26,830
going to grab this rectangle a hold shift and click the rectangle in the group this and we'll just call

52
00:04:26,830 --> 00:04:29,270
this navigation bar.

53
00:04:31,220 --> 00:04:32,090
Great.

54
00:04:32,100 --> 00:04:40,450
So we have our navigation bar looking good left title and right now what I'm going to do with the navigation

55
00:04:40,450 --> 00:04:46,390
bar highlighted as I'm going to go up here to this button right here that says Create symbol.

56
00:04:46,900 --> 00:04:51,950
And once you click it and watch it happen so click it.

57
00:04:52,270 --> 00:04:55,720
Go ahead and leave navigation bar as the title and hit.

58
00:04:55,720 --> 00:04:56,380
OK.

59
00:04:58,130 --> 00:04:58,370
All right.

60
00:04:58,370 --> 00:05:00,810
So two things have happened.

61
00:05:01,640 --> 00:05:04,300
And the first one is that a.

62
00:05:04,340 --> 00:05:10,640
Another page is created called symbols and if we go to it we'll see that our navigation bar is now in

63
00:05:10,640 --> 00:05:11,680
the symbols page.

64
00:05:11,680 --> 00:05:13,260
So what does this mean.

65
00:05:13,340 --> 00:05:15,070
So let's go back to page 1.

66
00:05:15,710 --> 00:05:28,040
And now the navigation bar that we created has a create symbol or the creates the symbol symbol next

67
00:05:28,040 --> 00:05:30,610
to it denoting that it is a symbol.

68
00:05:30,950 --> 00:05:37,970
Now normally if this was a regular group that we had just created we'd be able to double click and access

69
00:05:37,970 --> 00:05:39,390
our title.

70
00:05:39,890 --> 00:05:40,120
Right.

71
00:05:40,130 --> 00:05:49,600
But now if we double click it we are in the symbols page and we can edit our symbol right from here.

72
00:05:50,450 --> 00:05:57,680
So let's just say we wanted to change the color right so we can go ahead and click into a rectangle.

73
00:05:57,770 --> 00:06:00,140
Change the color to an orange.

74
00:06:00,140 --> 00:06:02,600
Maybe I wanted one of this instead.

75
00:06:02,600 --> 00:06:05,910
Or how to Kolata nice color.

76
00:06:06,350 --> 00:06:06,680
Right.

77
00:06:06,680 --> 00:06:13,760
And so if we go ahead and click return to instance we're going back to our page 1 and now our symbol

78
00:06:13,790 --> 00:06:14,940
has changed.

79
00:06:14,960 --> 00:06:15,230
Right.

80
00:06:15,230 --> 00:06:18,650
So why is this important.

81
00:06:18,680 --> 00:06:23,120
It seems like we kind of create an extra step because now we have to go into the instance and then change

82
00:06:23,120 --> 00:06:24,890
things and then go back out.

83
00:06:25,220 --> 00:06:26,920
Well there's two.

84
00:06:26,960 --> 00:06:29,450
Two really really huge reasons why this is important.

85
00:06:29,450 --> 00:06:41,060
So the first one is and you might be thinking why didn't we put actual titles and assets into our navigation

86
00:06:41,060 --> 00:06:46,900
bar why don't we just name it what it was well over here on the overrides.

87
00:06:47,030 --> 00:06:49,640
You can actually change things on the fly.

88
00:06:49,640 --> 00:06:52,980
So let's just say this is our screen.

89
00:06:53,100 --> 00:07:01,820
Go ahead and just type home and now it appears and let's say on the right there is done on the left

90
00:07:01,820 --> 00:07:03,590
there is compose.

91
00:07:03,590 --> 00:07:14,900
So what I like to do is keep the names of things inside of the symbol something readable so I know that

92
00:07:15,050 --> 00:07:17,310
the title is home right.

93
00:07:17,330 --> 00:07:22,310
If we just went and typed in home and created a symbol it would show up at home here.

94
00:07:22,310 --> 00:07:25,980
So we have title left and right and we can easily just change that.

95
00:07:25,980 --> 00:07:28,810
So let's see maybe this turns into it.

96
00:07:28,850 --> 00:07:36,370
I don't know but that is one huge huge benefit of of symbols.

97
00:07:36,500 --> 00:07:43,430
The second and probably the most obvious is if we have another our board let's go ahead and hands make

98
00:07:43,430 --> 00:07:52,580
another art board instead of copy pasting this and having to edit the assets within them individually.

99
00:07:52,580 --> 00:08:00,690
What we could do instead is just go up here to answer go ahead and click symbol and there is our navigation

100
00:08:00,690 --> 00:08:01,770
bar that we just created.

101
00:08:01,770 --> 00:08:11,070
So we can go in and just kind of roughly align it and left click to place it and boom there is our symbol

102
00:08:11,070 --> 00:08:12,810
we don't need to recreate anything.

103
00:08:12,960 --> 00:08:17,290
Don't need to remember any Hex's or the titles of anything.

104
00:08:17,420 --> 00:08:20,760
And let's just go ahead and snap this over.

105
00:08:20,910 --> 00:08:27,560
We're going to align it vertically and then align it to the top so that the position is correct.

106
00:08:28,750 --> 00:08:38,830
And if we we so like this again we can change it so maybe this is an in box and this is you know back

107
00:08:38,830 --> 00:08:40,540
maybe.

108
00:08:40,570 --> 00:08:43,040
And this is composed now.

109
00:08:43,240 --> 00:08:52,860
I don't know but hopefully you're able to see the powerful tool that is symbols.

110
00:08:52,870 --> 00:08:54,860
Symbols are huge.

111
00:08:55,450 --> 00:09:00,580
And we could even probably go back to the first half that we created and create symbols.

112
00:09:00,610 --> 00:09:04,310
A lot of symbols to help streamline our workflow.

113
00:09:04,330 --> 00:09:07,700
But I wanted to show you what it was like to do things manually.

114
00:09:07,750 --> 00:09:12,280
And then the power that you have with symbols.

115
00:09:13,240 --> 00:09:20,240
So Leslie let's go ahead and open up a new file.

116
00:09:21,670 --> 00:09:28,090
File from template or new file new from template and click iOS UI design.

117
00:09:28,090 --> 00:09:36,580
And what's really cool about scatch is they anticipate what people are going to be using their program

118
00:09:36,580 --> 00:09:36,980
for.

119
00:09:37,000 --> 00:09:43,210
Especially with mobile design so they have created a bunch of symbols right out the gate that you can

120
00:09:43,210 --> 00:09:44,080
use.

121
00:09:44,080 --> 00:09:51,410
So I use this as a as a template when I start my product I like to start it.

122
00:09:51,430 --> 00:09:58,060
If I'm building an app for iOS I like to start with with this template as you can see you can do Android

123
00:09:58,060 --> 00:10:02,330
icon Mac app material design.

124
00:10:02,670 --> 00:10:09,040
Awesome really really cool templates but let's go ahead and create new page.

125
00:10:09,040 --> 00:10:09,910
Show you what I mean.

126
00:10:09,920 --> 00:10:17,040
So let's go up here insert when you are bored iPhone 7 is fine.

127
00:10:18,380 --> 00:10:25,850
And now we go to symbol all of the symbols that were that came with the template are here at our disposal

128
00:10:25,850 --> 00:10:27,270
which is awesome.

129
00:10:27,380 --> 00:10:31,050
So we could even we can throw a tab bar in here.

130
00:10:31,130 --> 00:10:32,130
Right.

131
00:10:32,960 --> 00:10:39,580
And let's just snap this to the center to the bottom so we know it's in perfect alignment.

132
00:10:39,740 --> 00:10:51,900
This could be a I don't know home and as you can see on the overrides we can we can change these and

133
00:10:51,930 --> 00:10:53,610
as they change they'll change in real time.

134
00:10:53,610 --> 00:11:00,190
So inbox now this inbox message or messages same thing.

135
00:11:00,370 --> 00:11:02,660
Oh it's still search.

136
00:11:04,490 --> 00:11:08,530
Profile and more.

137
00:11:08,540 --> 00:11:13,520
All right so there are so many different ways we could use this medium and choose images so these aren't

138
00:11:13,520 --> 00:11:19,620
little squares ugly squares they are you know icons custom icons that we have.

139
00:11:20,030 --> 00:11:28,730
And feel free to play around with this you know we have let's see the navigation bar you could throw

140
00:11:28,730 --> 00:11:31,300
in a navigation bar in here.

141
00:11:31,920 --> 00:11:36,060
Let's go ahead and make sure this is all perfectly aligned.

142
00:11:36,110 --> 00:11:39,860
I use this a lot to add in.

143
00:11:39,940 --> 00:11:43,390
Where is it the status bars.

144
00:11:46,220 --> 00:11:46,590
Just.

145
00:11:46,640 --> 00:11:50,330
I can get a full feel about how things are going to look.

146
00:11:50,330 --> 00:11:56,080
So the last thing I want to show you is how to detach these.

147
00:11:56,090 --> 00:12:03,020
So right now if we change something like let's just say this was a certain color you know and we want

148
00:12:03,020 --> 00:12:05,920
to change the color and we want to use this as a template.

149
00:12:05,930 --> 00:12:08,240
Be completely separate from our symbols.

150
00:12:08,510 --> 00:12:16,970
What we can do is with the symbol selected go ahead and click click over here and scroll all the way

151
00:12:16,970 --> 00:12:17,200
up.

152
00:12:17,210 --> 00:12:22,990
And at this very very this first first line item is detach from symbol.

153
00:12:23,240 --> 00:12:31,580
So once we hit detach now it is just a regular group and we can edit things how we want so let's just

154
00:12:31,580 --> 00:12:34,200
say you know this particular one.

155
00:12:34,250 --> 00:12:41,090
I just want to change maybe you know no shadows with a cool red color.

156
00:12:43,760 --> 00:12:44,950
Let's change the

157
00:12:48,260 --> 00:12:50,670
over here.

158
00:12:50,750 --> 00:12:52,450
This should be white.

159
00:12:52,520 --> 00:12:53,540
It should be white.

160
00:12:53,540 --> 00:12:54,260
You know what.

161
00:12:54,350 --> 00:12:55,760
Whatever.

162
00:12:55,790 --> 00:12:57,140
Whatever you're trying to do.

163
00:12:57,630 --> 00:13:02,510
And now what we can do is grab this and create another symbol.

164
00:13:02,540 --> 00:13:09,230
And this could be our subtitle read.

165
00:13:09,280 --> 00:13:16,730
So now if we wanted to go in here and symbol navigation bar and there is our subtitle read one as opposed

166
00:13:16,730 --> 00:13:20,710
to the regular subtitle that we had selected previously.

167
00:13:20,840 --> 00:13:26,890
So obviously symbols are extremely powerful.

168
00:13:26,900 --> 00:13:29,600
Use them abuse them.

169
00:13:29,810 --> 00:13:34,300
They they go a long way and they'll really streamline your workflow.

170
00:13:34,320 --> 00:13:36,230
It's absolutely amazing.

171
00:13:36,620 --> 00:13:47,300
I've even done things such as create simple create symbols for entire art parts militias say that I

172
00:13:47,300 --> 00:13:50,960
don't know I copied that are Porth for example.

173
00:13:50,960 --> 00:13:52,580
So let's just say I have some assets here.

174
00:13:52,580 --> 00:13:52,990
Right.

175
00:13:53,010 --> 00:13:59,940
And we'll just go ahead and type Let's make a really quick button.

176
00:13:59,940 --> 00:14:02,640
You don't need to make make any of this.

177
00:14:02,640 --> 00:14:09,010
I'm just kind of doing this to show you guys tap this button.

178
00:14:09,630 --> 00:14:10,140
All right.

179
00:14:10,170 --> 00:14:12,960
And let's just make sure this looks pretty.

180
00:14:12,960 --> 00:14:21,990
For this example and I'm going to leave that white and this can be our red color.

181
00:14:21,990 --> 00:14:22,290
Right.

182
00:14:22,290 --> 00:14:24,760
So let's just say here is our app.

183
00:14:24,780 --> 00:14:25,730
It's looking good.

184
00:14:25,800 --> 00:14:27,840
It's looking great.

185
00:14:28,560 --> 00:14:35,640
But once this button is tapped we're going to want to have a pop up show up saying something right.

186
00:14:35,640 --> 00:14:42,770
So instead of let's go ahead insert another art board.

187
00:14:43,200 --> 00:14:44,460
I found seven.

188
00:14:44,460 --> 00:14:54,200
So now let's just say we want to design the screen that shows once the pop over gets gets called right.

189
00:14:54,190 --> 00:15:00,370
So what we can do is click our our board.

190
00:15:00,610 --> 00:15:09,150
I found several lists just go ahead and name this with button and create a symbol.

191
00:15:09,790 --> 00:15:13,510
And we're creating a symbol from the actual art form which is crazy.

192
00:15:13,540 --> 00:15:14,760
Go ahead and hit OK.

193
00:15:16,230 --> 00:15:28,790
And now we can do is slap our art board our symbol right on our our board copy our other I-Report.

194
00:15:28,790 --> 00:15:36,030
So let's just align this make sure it's smack dab in the middle of the screen and I'm going to insert

195
00:15:36,090 --> 00:15:38,860
a rectangle over the entire board.

196
00:15:42,330 --> 00:15:50,570
I mean to get rid of the borders and I'm going to make this pitch black 000 00 and I'm going to decrease

197
00:15:50,570 --> 00:15:55,500
the opacity to maybe 25 percent.

198
00:15:55,500 --> 00:15:59,450
And let's make a little pop over that says you know

199
00:16:03,600 --> 00:16:05,220
great job or something.

200
00:16:05,940 --> 00:16:16,510
I'm going to go ahead and center it in the airport itself and let's go ahead and give it a shadow go.

201
00:16:17,430 --> 00:16:18,300
And we'll say

202
00:16:21,920 --> 00:16:25,720
how awesome is this.

203
00:16:25,740 --> 00:16:27,940
Let's see if I spelled that right.

204
00:16:31,460 --> 00:16:37,680
So all we can do now may just

205
00:16:41,190 --> 00:16:45,500
align a couple of things here.

206
00:16:45,580 --> 00:16:46,700
All right.

207
00:16:47,230 --> 00:16:56,620
So instead of us having to change everything in the background since this is an art board I'm sorry

208
00:16:56,650 --> 00:17:07,340
since is a symbol now we could do is if we wanted to add another layered shape around here it's going

209
00:17:07,340 --> 00:17:10,820
to change in and this one too.

210
00:17:10,820 --> 00:17:18,020
So all you need to do instead of having to copy paste this whatever changes that we made and throw them

211
00:17:18,020 --> 00:17:25,580
behind our example pop over we can just change it once and it'll change for every single screen that

212
00:17:25,580 --> 00:17:27,370
we have that symbol on.

213
00:17:27,530 --> 00:17:34,550
Same with regular symbols so I hope this shows you guys the power of symbols use them abuse them.

214
00:17:34,580 --> 00:17:41,020
They are extremely useful and do not repeat yourself whether it's in design or code.