One all right everybody welcome back.
What we're going to talk about now is symbols of what they are and why they're so cool.
So what is a symbol.
A symbol is something that you can create and sketch that you can easily reuse or repeat just like in
programming with the DRY principle.
You know we don't want to repeat ourselves right.
So in the first set that we built we did a lot of copy pasting with our navigation bar and other things
but luckily with symbols we only need to create things once maybe once or twice and we can reuse them
through our entire project.
So go ahead and click insert.
And we're going to just thrown an art board.
IPhone 7 is fine.
And let's go ahead to make a navigation bar.
So we're going to insert a rectangle and we're going drag it over toward Snap's to the edges and let's
bring it down 65 65 points.
Right.
If you if you don't get around 65 you can adjust it over here in this in this pain.
So it should be 375 by 65.
Let's go ahead and get rid of the border and let's give ourselves a nice cool color now or something.
It looks nice.
That's pretty cool.
Kind of like that color.
Find a cool color doesn't need to be anything crazy.
Yeah.
And give it a shot if you want.
All I want is a shadow for this one.
And let's go insert some text.
So go ahead and type title right.
And drag it over to the center we will for for this purpose.
We'll go ahead and leave it.
See how it snapped the top was a line to the center the vertical center will go to do that.
Just cuz we'll pretend that there is a status bar up here so we want to keep enough room for everything.
And let's go ahead and.
Oh.
Before we insert anything else I want to make this center alignment right as we type things will go
outwards.
Also inserts in text and over here.
We'll type in right for the right side and let's make sure it is right aligned.
And let's quickly toggle on our grid with control g to at least have some sort of dimensions to work
with this looks like it's roughly 20 20 points away doesn't need to be exactly perfect.
This is just an example.
And finally let's insert our left after We'll make this left a line.
And again let's try this over and make it roughly 20 away from from the left edge.
Now we didn't really get this quite perfect so let's just go ahead and highlight all three of these
with shift shifting counting all three.
And I am just going to click this little bit aligned vertically.
I was going to snap everything
together vertically and now I'm going to command g to group these into a group and let's call it navigation
details.
Now I'm just going to drag and make sure that this is aligned through the center with perfect and I'm
going to grab this rectangle a hold shift and click the rectangle in the group this and we'll just call
this navigation bar.
Great.
So we have our navigation bar looking good left title and right now what I'm going to do with the navigation
bar highlighted as I'm going to go up here to this button right here that says Create symbol.
And once you click it and watch it happen so click it.
Go ahead and leave navigation bar as the title and hit.
OK.
All right.
So two things have happened.
And the first one is that a.
Another page is created called symbols and if we go to it we'll see that our navigation bar is now in
the symbols page.
So what does this mean.
So let's go back to page 1.
And now the navigation bar that we created has a create symbol or the creates the symbol symbol next
to it denoting that it is a symbol.
Now normally if this was a regular group that we had just created we'd be able to double click and access
our title.
Right.
But now if we double click it we are in the symbols page and we can edit our symbol right from here.
So let's just say we wanted to change the color right so we can go ahead and click into a rectangle.
Change the color to an orange.
Maybe I wanted one of this instead.
Or how to Kolata nice color.
Right.
And so if we go ahead and click return to instance we're going back to our page 1 and now our symbol
has changed.
Right.
So why is this important.
It seems like we kind of create an extra step because now we have to go into the instance and then change
things and then go back out.
Well there's two.
Two really really huge reasons why this is important.
So the first one is and you might be thinking why didn't we put actual titles and assets into our navigation
bar why don't we just name it what it was well over here on the overrides.
You can actually change things on the fly.
So let's just say this is our screen.
Go ahead and just type home and now it appears and let's say on the right there is done on the left
there is compose.
So what I like to do is keep the names of things inside of the symbol something readable so I know that
the title is home right.
If we just went and typed in home and created a symbol it would show up at home here.
So we have title left and right and we can easily just change that.
So let's see maybe this turns into it.
I don't know but that is one huge huge benefit of of symbols.
The second and probably the most obvious is if we have another our board let's go ahead and hands make
another art board instead of copy pasting this and having to edit the assets within them individually.
What we could do instead is just go up here to answer go ahead and click symbol and there is our navigation
bar that we just created.
So we can go in and just kind of roughly align it and left click to place it and boom there is our symbol
we don't need to recreate anything.
Don't need to remember any Hex's or the titles of anything.
And let's just go ahead and snap this over.
We're going to align it vertically and then align it to the top so that the position is correct.
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
maybe.
And this is composed now.
I don't know but hopefully you're able to see the powerful tool that is symbols.
Symbols are huge.
And we could even probably go back to the first half that we created and create symbols.
A lot of symbols to help streamline our workflow.
But I wanted to show you what it was like to do things manually.
And then the power that you have with symbols.
So Leslie let's go ahead and open up a new file.
File from template or new file new from template and click iOS UI design.
And what's really cool about scatch is they anticipate what people are going to be using their program
for.
Especially with mobile design so they have created a bunch of symbols right out the gate that you can
use.
So I use this as a as a template when I start my product I like to start it.
If I'm building an app for iOS I like to start with with this template as you can see you can do Android
icon Mac app material design.
Awesome really really cool templates but let's go ahead and create new page.
Show you what I mean.
So let's go up here insert when you are bored iPhone 7 is fine.
And now we go to symbol all of the symbols that were that came with the template are here at our disposal
which is awesome.
So we could even we can throw a tab bar in here.
Right.
And let's just snap this to the center to the bottom so we know it's in perfect alignment.
This could be a I don't know home and as you can see on the overrides we can we can change these and
as they change they'll change in real time.
So inbox now this inbox message or messages same thing.
Oh it's still search.
Profile and more.
All right so there are so many different ways we could use this medium and choose images so these aren't
little squares ugly squares they are you know icons custom icons that we have.
And feel free to play around with this you know we have let's see the navigation bar you could throw
in a navigation bar in here.
Let's go ahead and make sure this is all perfectly aligned.
I use this a lot to add in.
Where is it the status bars.
Just.
I can get a full feel about how things are going to look.
So the last thing I want to show you is how to detach these.
So right now if we change something like let's just say this was a certain color you know and we want
to change the color and we want to use this as a template.
Be completely separate from our symbols.
What we can do is with the symbol selected go ahead and click click over here and scroll all the way
up.
And at this very very this first first line item is detach from symbol.
So once we hit detach now it is just a regular group and we can edit things how we want so let's just
say you know this particular one.
I just want to change maybe you know no shadows with a cool red color.
Let's change the
over here.
This should be white.
It should be white.
You know what.
Whatever.
Whatever you're trying to do.
And now what we can do is grab this and create another symbol.
And this could be our subtitle read.
So now if we wanted to go in here and symbol navigation bar and there is our subtitle read one as opposed
to the regular subtitle that we had selected previously.
So obviously symbols are extremely powerful.
Use them abuse them.
They they go a long way and they'll really streamline your workflow.
It's absolutely amazing.
I've even done things such as create simple create symbols for entire art parts militias say that I
don't know I copied that are Porth for example.
So let's just say I have some assets here.
Right.
And we'll just go ahead and type Let's make a really quick button.
You don't need to make make any of this.
I'm just kind of doing this to show you guys tap this button.
All right.
And let's just make sure this looks pretty.
For this example and I'm going to leave that white and this can be our red color.
Right.
So let's just say here is our app.
It's looking good.
It's looking great.
But once this button is tapped we're going to want to have a pop up show up saying something right.
So instead of let's go ahead insert another art board.
I found seven.
So now let's just say we want to design the screen that shows once the pop over gets gets called right.
So what we can do is click our our board.
I found several lists just go ahead and name this with button and create a symbol.
And we're creating a symbol from the actual art form which is crazy.
Go ahead and hit OK.
And now we can do is slap our art board our symbol right on our our board copy our other I-Report.
So let's just align this make sure it's smack dab in the middle of the screen and I'm going to insert
a rectangle over the entire board.
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
the opacity to maybe 25 percent.
And let's make a little pop over that says you know
great job or something.
I'm going to go ahead and center it in the airport itself and let's go ahead and give it a shadow go.
And we'll say
how awesome is this.
Let's see if I spelled that right.
So all we can do now may just
align a couple of things here.
All right.
So instead of us having to change everything in the background since this is an art board I'm sorry
since is a symbol now we could do is if we wanted to add another layered shape around here it's going
to change in and this one too.
So all you need to do instead of having to copy paste this whatever changes that we made and throw them
behind our example pop over we can just change it once and it'll change for every single screen that
we have that symbol on.
Same with regular symbols so I hope this shows you guys the power of symbols use them abuse them.
They are extremely useful and do not repeat yourself whether it's in design or code.