1
00:00:00,240 --> 00:00:07,440
Icons are a really important part of any design system, we use them for a variety of things like forms,

2
00:00:07,650 --> 00:00:12,160
navigation buttons, they're used almost everywhere.

3
00:00:12,900 --> 00:00:15,540
Now there are a couple of sigma plug ins that you can use.

4
00:00:15,930 --> 00:00:20,910
And the main one I like to use is I kind of I also like to use material design plug in, which is really

5
00:00:20,910 --> 00:00:21,150
great.

6
00:00:21,900 --> 00:00:26,490
I've used it through some lessons and let's use it today to kind of put something together.

7
00:00:26,760 --> 00:00:27,810
So let me show you how it works.

8
00:00:28,590 --> 00:00:30,380
So let's open our plug ins.

9
00:00:30,390 --> 00:00:34,830
Let's go into something like I Confi and this is our plug in here.

10
00:00:35,940 --> 00:00:40,300
And now you'll notice that there's different things we can do, we can actually search by sets, so

11
00:00:40,300 --> 00:00:47,310
we have like Google material icons, we have unicorns, we have all these different types of icons that

12
00:00:47,310 --> 00:00:49,530
we could use, which is really great.

13
00:00:50,100 --> 00:00:51,600
You can search something up over here.

14
00:00:51,840 --> 00:00:57,630
So if, like, I search for something like home and press enter, I can filter by an icon site or I

15
00:00:57,630 --> 00:01:01,860
can see all of them and go through different of like a variety of icons here.

16
00:01:03,680 --> 00:01:08,960
I typically use this just to grab icons very quickly, so if I need to, like, fill in a wireframe

17
00:01:08,960 --> 00:01:12,950
with some iconography or I'm just kind of testing some concepts, this is what I'll do.

18
00:01:12,950 --> 00:01:15,350
I'll just kind of grab this like that.

19
00:01:18,070 --> 00:01:20,170
And here I can kind of just.

20
00:01:21,260 --> 00:01:24,830
So anything I'd like to say, I would import the icon.

21
00:01:26,090 --> 00:01:31,790
And there we go again, update to the framed copy, I can work with the vector, I can name it whatever

22
00:01:31,880 --> 00:01:32,390
I want.

23
00:01:33,880 --> 00:01:40,360
Let's go through a little demo on how to kind of fill in the navigation, how to do that pretty easily

24
00:01:40,360 --> 00:01:47,020
with something like I confi, I'm going to actually just create a new frame, click F actually, let's

25
00:01:47,020 --> 00:01:47,800
create a mobile frame.

26
00:01:47,800 --> 00:01:50,820
So we're going to click off and we're going to just pick the iPhone again.

27
00:01:52,060 --> 00:01:58,750
And what we'll do is we will create another frame and we'll just sticky that to the bottom so we don't

28
00:01:58,750 --> 00:02:01,840
need to really worry too much about our size right now, at least.

29
00:02:02,260 --> 00:02:04,950
I just want to focus on getting some icons in here.

30
00:02:06,480 --> 00:02:08,310
And we can actually create a grid in here.

31
00:02:09,950 --> 00:02:12,570
So we'll do that, will create a grid and sort of there.

32
00:02:12,770 --> 00:02:14,870
Well, we're actually going to set up some columns.

33
00:02:15,940 --> 00:02:18,850
So we're going to pick four icons.

34
00:02:20,140 --> 00:02:28,720
So we'll set for Cong's for those icons to sit within and we'll create a gutter of 16 pixels using 16

35
00:02:28,720 --> 00:02:32,110
on mobile and four marginalises 16 and 24.

36
00:02:32,830 --> 00:02:34,020
So we'll just do that.

37
00:02:35,110 --> 00:02:35,770
And there we go.

38
00:02:36,230 --> 00:02:38,680
We can also make this nav really nice.

39
00:02:38,680 --> 00:02:39,310
If we want.

40
00:02:39,310 --> 00:02:45,220
We can create a nice drop shadow behind it, set that bar to something like 30.

41
00:02:49,110 --> 00:02:50,440
Negative 10.

42
00:02:50,820 --> 00:02:52,440
And let's fill this.

43
00:02:54,120 --> 00:02:55,670
That's a little too harsh for a dropshot.

44
00:02:55,740 --> 00:03:03,030
But there's a little more subtle so we can talk about our grades with control g just like that.

45
00:03:03,340 --> 00:03:06,330
So I'm just talking on and off now.

46
00:03:06,360 --> 00:03:10,940
What I'm going to do next is I'm going to start thinking about what type of icons I want here.

47
00:03:10,950 --> 00:03:15,420
So if I'm thinking about a client habitual, I'm thinking about maybe I need like a home screen.

48
00:03:15,420 --> 00:03:15,780
So.

49
00:03:16,680 --> 00:03:20,430
Well, first of all, what I really want to do is I want to make sure that I'm picking from a certain

50
00:03:20,430 --> 00:03:21,210
icon concept.

51
00:03:22,570 --> 00:03:26,160
So let's go all the way back to the beginning.

52
00:03:28,890 --> 00:03:32,490
And we can actually just select material design icons.

53
00:03:36,360 --> 00:03:42,420
And if I search up just based off of that hairlessness like that.

54
00:03:44,800 --> 00:03:47,650
I search for home and there you go.

55
00:03:47,860 --> 00:03:49,870
You can tell everything is part of the same family here.

56
00:03:49,900 --> 00:03:51,520
They even have rounded options as well.

57
00:03:51,980 --> 00:03:53,770
Let's just grab this icon.

58
00:03:53,770 --> 00:03:55,770
We can drag it into there.

59
00:03:56,050 --> 00:03:58,780
So we've got twenty four by twenty four pixel frame.

60
00:04:00,250 --> 00:04:07,090
We got the whole icon that sits within let's think of another option we could have we could have a heart.

61
00:04:10,320 --> 00:04:17,760
So for like a wishlist section, so there we go, we have our heart, let's not move that outside of

62
00:04:17,760 --> 00:04:18,810
the frame, let's keep that frame.

63
00:04:18,810 --> 00:04:19,530
It's going to help us.

64
00:04:22,120 --> 00:04:26,240
Maybe another option is something like orders, but they don't have orders.

65
00:04:26,260 --> 00:04:28,690
We can kind of do something like this, like a list.

66
00:04:32,440 --> 00:04:34,480
I like that I work for now.

67
00:04:38,270 --> 00:04:41,930
And the last one we can do is settings.

68
00:04:44,390 --> 00:04:48,230
So maybe a gear, yeah, that's going to work.

69
00:04:48,950 --> 00:04:51,140
OK, let's close this now.

70
00:04:51,140 --> 00:04:52,040
We have our icons.

71
00:04:53,490 --> 00:04:59,670
That's awesome, and we're going to drive them within that navigation frame, so let's rename this to

72
00:04:59,700 --> 00:05:00,350
navigation.

73
00:05:01,530 --> 00:05:07,950
Remember to always kind of name your frames, keep track of things, can get really messy, really easy.

74
00:05:09,310 --> 00:05:11,560
So we're going to do is I'm going to places in the middle.

75
00:05:13,080 --> 00:05:19,040
Place this one in the middle, you see how they're kind of snapping together equal in terms of their

76
00:05:19,040 --> 00:05:21,860
horizontal and vertical positioning.

77
00:05:22,670 --> 00:05:25,370
We can kind of go in there and just fix that a bit.

78
00:05:26,750 --> 00:05:29,210
What I'm going to do is I'm going to actually have some text as well.

79
00:05:29,210 --> 00:05:31,970
So that could also help in navigation.

80
00:05:31,970 --> 00:05:36,320
Just pairing an icon with some text that's a little too big.

81
00:05:36,770 --> 00:05:40,790
Something like 12 or even 10 doesn't need to be too big.

82
00:05:43,720 --> 00:05:44,280
Great.

83
00:05:44,470 --> 00:05:45,280
I like that.

84
00:05:47,940 --> 00:05:49,500
We're just going to copy that over.

85
00:05:50,220 --> 00:05:52,170
Remember to set your constraints.

86
00:05:54,680 --> 00:06:00,320
Two left and right, so if we do happen to resize, this will stick with your actual columns.

87
00:06:00,810 --> 00:06:02,500
So let's do that over here as well.

88
00:06:04,610 --> 00:06:05,870
We'll call this one wish-List.

89
00:06:11,570 --> 00:06:15,820
We got some variation over here in the column, something we'll call this one orders.

90
00:06:18,150 --> 00:06:22,140
And this one, we are going to call settings.

91
00:06:26,980 --> 00:06:32,200
Now, what we're going to do is we're going to make sure that these are just a little bit above.

92
00:06:34,750 --> 00:06:40,120
The text, and if we actually select them all and we want to align them on the same horizontal grid

93
00:06:40,570 --> 00:06:43,090
or horizontal line will just go up here.

94
00:06:44,320 --> 00:06:44,960
And that's perfect.

95
00:06:45,250 --> 00:06:48,280
So, listen, it is to make sure they are actually centered.

96
00:06:50,550 --> 00:06:53,100
Boom center to the text.

97
00:06:58,410 --> 00:07:05,220
We can actually turn off that grid now, I think, and there we go, we have our own little navigation

98
00:07:05,790 --> 00:07:06,750
and we can.

99
00:07:09,240 --> 00:07:14,610
The overall capacity through pass through over here on this layer so we can turn them down to like something

100
00:07:14,610 --> 00:07:18,270
like 20 and so we can see that our home is active.

101
00:07:19,350 --> 00:07:23,700
Now, what we want to do here is we want to set this to center and center.

102
00:07:27,870 --> 00:07:29,970
These icons will all be said to center and center.

103
00:07:30,000 --> 00:07:36,300
So if we do somehow want to make this like responsive and we want to scale and not have to worry about

104
00:07:36,300 --> 00:07:38,740
these icons, we'll have to.

105
00:07:39,140 --> 00:07:42,090
So let's zoom in here and show you what I mean.

106
00:07:43,100 --> 00:07:46,040
Oops, the overall frame I forgot about, that's most important.

107
00:07:51,220 --> 00:07:56,240
And you can see that they're not scaling, but they are staying centered to their own column.

108
00:07:56,270 --> 00:07:59,290
So if we turn that those columns on, you can see that they're going to stay within them.

109
00:08:00,310 --> 00:08:02,680
We won't necessarily do this on mobile a bunch at least.

110
00:08:03,160 --> 00:08:07,060
But this is just a helpful tip for when you're actually working with your layers.

111
00:08:08,050 --> 00:08:15,010
If you don't want to use a plug in like that, you can actually go to the material design website and

112
00:08:15,010 --> 00:08:18,790
use their actual website to download those plug ins.

113
00:08:18,790 --> 00:08:22,840
Like users have much more control you'll be able to select based off if you want it to be outlined.

114
00:08:22,840 --> 00:08:25,300
If you want it to be rounded, you can do all that.

115
00:08:25,810 --> 00:08:30,250
If you do really like Google material icons and you want to go through like confi, there's actually

116
00:08:30,250 --> 00:08:31,210
a plug in for that.

117
00:08:31,630 --> 00:08:33,610
This right here, material design icons.

118
00:08:33,610 --> 00:08:41,590
And here you have all the icons in every which style and you can use these to really help you pick just

119
00:08:41,590 --> 00:08:43,810
based off of material design icons.

120
00:08:44,500 --> 00:08:45,990
And it's the same kind of concept.

121
00:08:46,360 --> 00:08:51,640
So you just select your icon and I'll drop it immediately into your Fatema file.

122
00:08:52,750 --> 00:08:56,020
And that's it for putting together a quick navigation with some plug ins.