Icons are a really important part of any design system, we use them for a variety of things like forms,
navigation buttons, they're used almost everywhere.
Now there are a couple of sigma plug ins that you can use.
And the main one I like to use is I kind of I also like to use material design plug in, which is really
great.
I've used it through some lessons and let's use it today to kind of put something together.
So let me show you how it works.
So let's open our plug ins.
Let's go into something like I Confi and this is our plug in here.
And now you'll notice that there's different things we can do, we can actually search by sets, so
we have like Google material icons, we have unicorns, we have all these different types of icons that
we could use, which is really great.
You can search something up over here.
So if, like, I search for something like home and press enter, I can filter by an icon site or I
can see all of them and go through different of like a variety of icons here.
I typically use this just to grab icons very quickly, so if I need to, like, fill in a wireframe
with some iconography or I'm just kind of testing some concepts, this is what I'll do.
I'll just kind of grab this like that.
And here I can kind of just.
So anything I'd like to say, I would import the icon.
And there we go again, update to the framed copy, I can work with the vector, I can name it whatever
I want.
Let's go through a little demo on how to kind of fill in the navigation, how to do that pretty easily
with something like I confi, I'm going to actually just create a new frame, click F actually, let's
create a mobile frame.
So we're going to click off and we're going to just pick the iPhone again.
And what we'll do is we will create another frame and we'll just sticky that to the bottom so we don't
need to really worry too much about our size right now, at least.
I just want to focus on getting some icons in here.
And we can actually create a grid in here.
So we'll do that, will create a grid and sort of there.
Well, we're actually going to set up some columns.
So we're going to pick four icons.
So we'll set for Cong's for those icons to sit within and we'll create a gutter of 16 pixels using 16
on mobile and four marginalises 16 and 24.
So we'll just do that.
And there we go.
We can also make this nav really nice.
If we want.
We can create a nice drop shadow behind it, set that bar to something like 30.
Negative 10.
And let's fill this.
That's a little too harsh for a dropshot.
But there's a little more subtle so we can talk about our grades with control g just like that.
So I'm just talking on and off now.
What I'm going to do next is I'm going to start thinking about what type of icons I want here.
So if I'm thinking about a client habitual, I'm thinking about maybe I need like a home screen.
So.
Well, first of all, what I really want to do is I want to make sure that I'm picking from a certain
icon concept.
So let's go all the way back to the beginning.
And we can actually just select material design icons.
And if I search up just based off of that hairlessness like that.
I search for home and there you go.
You can tell everything is part of the same family here.
They even have rounded options as well.
Let's just grab this icon.
We can drag it into there.
So we've got twenty four by twenty four pixel frame.
We got the whole icon that sits within let's think of another option we could have we could have a heart.
So for like a wishlist section, so there we go, we have our heart, let's not move that outside of
the frame, let's keep that frame.
It's going to help us.
Maybe another option is something like orders, but they don't have orders.
We can kind of do something like this, like a list.
I like that I work for now.
And the last one we can do is settings.
So maybe a gear, yeah, that's going to work.
OK, let's close this now.
We have our icons.
That's awesome, and we're going to drive them within that navigation frame, so let's rename this to
navigation.
Remember to always kind of name your frames, keep track of things, can get really messy, really easy.
So we're going to do is I'm going to places in the middle.
Place this one in the middle, you see how they're kind of snapping together equal in terms of their
horizontal and vertical positioning.
We can kind of go in there and just fix that a bit.
What I'm going to do is I'm going to actually have some text as well.
So that could also help in navigation.
Just pairing an icon with some text that's a little too big.
Something like 12 or even 10 doesn't need to be too big.
Great.
I like that.
We're just going to copy that over.
Remember to set your constraints.
Two left and right, so if we do happen to resize, this will stick with your actual columns.
So let's do that over here as well.
We'll call this one wish-List.
We got some variation over here in the column, something we'll call this one orders.
And this one, we are going to call settings.
Now, what we're going to do is we're going to make sure that these are just a little bit above.
The text, and if we actually select them all and we want to align them on the same horizontal grid
or horizontal line will just go up here.
And that's perfect.
So, listen, it is to make sure they are actually centered.
Boom center to the text.
We can actually turn off that grid now, I think, and there we go, we have our own little navigation
and we can.
The overall capacity through pass through over here on this layer so we can turn them down to like something
like 20 and so we can see that our home is active.
Now, what we want to do here is we want to set this to center and center.
These icons will all be said to center and center.
So if we do somehow want to make this like responsive and we want to scale and not have to worry about
these icons, we'll have to.
So let's zoom in here and show you what I mean.
Oops, the overall frame I forgot about, that's most important.
And you can see that they're not scaling, but they are staying centered to their own column.
So if we turn that those columns on, you can see that they're going to stay within them.
We won't necessarily do this on mobile a bunch at least.
But this is just a helpful tip for when you're actually working with your layers.
If you don't want to use a plug in like that, you can actually go to the material design website and
use their actual website to download those plug ins.
Like users have much more control you'll be able to select based off if you want it to be outlined.
If you want it to be rounded, you can do all that.
If you do really like Google material icons and you want to go through like confi, there's actually
a plug in for that.
This right here, material design icons.
And here you have all the icons in every which style and you can use these to really help you pick just
based off of material design icons.
And it's the same kind of concept.
So you just select your icon and I'll drop it immediately into your Fatema file.
And that's it for putting together a quick navigation with some plug ins.