1
00:00:00,150 --> 00:00:01,470
Hey, everyone, and welcome back.

2
00:00:01,770 --> 00:00:08,670
So I want to talk about components now, components are very important to every design system and one

3
00:00:08,670 --> 00:00:12,490
of the most important component that we create our buttons.

4
00:00:13,050 --> 00:00:15,480
Now, as you can tell over here.

5
00:00:17,260 --> 00:00:24,550
I have two different types of buttons, I typically have my button that is a Guro base button and a

6
00:00:24,550 --> 00:00:26,590
button that is a fixed based button.

7
00:00:27,560 --> 00:00:29,310
Now, what does that mean now?

8
00:00:29,510 --> 00:00:33,050
A button that grows is a button that grows with the content within.

9
00:00:33,500 --> 00:00:35,010
I'll show you what that looks like.

10
00:00:35,660 --> 00:00:39,340
I'm going to create just an instance of that component.

11
00:00:39,350 --> 00:00:50,030
And if I start typing in here, hello, this button Rose, you'll see that the button grows with the

12
00:00:50,030 --> 00:00:54,890
content if I remove these icons.

13
00:00:57,490 --> 00:01:06,970
Now the button shrinks, so that is a growing button, a fixed button is exactly the opposite.

14
00:01:08,920 --> 00:01:13,470
So let's take that component and bring it up over here.

15
00:01:15,610 --> 00:01:22,120
Now, if I were to say this button is fixed, you'll see that.

16
00:01:23,150 --> 00:01:30,140
It is indeed fixed, but I can stretch out this component and I can make it full with there are a couple

17
00:01:30,140 --> 00:01:35,660
of times where we will do this within our application, where we will have buttons that span 100 percent

18
00:01:35,660 --> 00:01:36,840
with from left to right.

19
00:01:38,120 --> 00:01:39,830
This is where you would use something like that.

20
00:01:41,170 --> 00:01:45,560
Now, you may be asking me, Daniel, what is Bass, what is that?

21
00:01:45,970 --> 00:01:47,650
Now I've created this thing called Bass.

22
00:01:48,970 --> 00:01:53,320
Because when you create your initial component, it's not going to be like.

23
00:01:54,370 --> 00:01:59,800
Like this, it won't be like beautiful, like it won't have any styles, there won't be variants of

24
00:01:59,800 --> 00:02:05,260
it, you'll have to create a version where this is just your base version.

25
00:02:05,270 --> 00:02:09,850
Everything else is based off of this if I modify this in any way.

26
00:02:10,980 --> 00:02:12,600
Like, say, if I.

27
00:02:15,950 --> 00:02:19,220
Expanded every other variant.

28
00:02:20,290 --> 00:02:24,640
That is a gross variant on the left hand side here, you'll see.

29
00:02:26,650 --> 00:02:29,500
Will actually expand.

30
00:02:31,830 --> 00:02:33,900
Or if I change the border radius like I just did.

31
00:02:35,680 --> 00:02:41,110
So it's very important you create like a base that you can base everything off of, that's exactly what

32
00:02:41,110 --> 00:02:41,460
it is.

33
00:02:41,980 --> 00:02:45,640
If I put a period in front of it, it will hide it from my component list.

34
00:02:46,060 --> 00:02:47,670
But you do need a paid account.

35
00:02:48,250 --> 00:02:53,200
So another thing is you do need a paid account for your design system if you want to use it across other

36
00:02:53,200 --> 00:02:53,920
files.

37
00:02:54,190 --> 00:03:00,670
Trust me, it is very much worth it if you are using a paid account like with your company, that works

38
00:03:00,670 --> 00:03:01,350
fine as well.

39
00:03:01,690 --> 00:03:04,210
That's perfect to have like those libraries.

40
00:03:04,390 --> 00:03:09,970
But if you're using it just for yourself and you want to use a design system and use it for like a project

41
00:03:09,970 --> 00:03:14,200
or a bunch of different other files, you're going to need to have a paid account for that.

42
00:03:14,980 --> 00:03:17,260
And I'll show you what that looks like in a second.

43
00:03:17,530 --> 00:03:20,110
But this is what I've done.

44
00:03:20,110 --> 00:03:24,670
I've created these different regular fixed and a regular Growe button.

45
00:03:25,000 --> 00:03:30,010
Now, the reason why I've named them regular is just because I think this is regular size.

46
00:03:30,010 --> 00:03:34,570
If I wanted to create a variance which is smaller, I can create another base button or I can create

47
00:03:35,050 --> 00:03:38,350
another component based off of this instance totally up to you.

48
00:03:38,590 --> 00:03:41,680
I don't use the smaller buttons enough for me to do that.

49
00:03:41,690 --> 00:03:44,290
I may use them, I may create another version.

50
00:03:44,920 --> 00:03:52,810
So let's go into how I've gone ahead and actually taking these buttons and turn them into different

51
00:03:52,810 --> 00:03:53,410
variants.

52
00:03:53,410 --> 00:03:54,460
So I have a primary.

53
00:03:54,460 --> 00:03:56,080
I have a secondary and tertiary.

54
00:03:57,050 --> 00:04:02,360
So let's get right into it, if I have a button here, you'll see this is my primary button.

55
00:04:02,360 --> 00:04:07,790
But if I look within this structure, there's my regular grow and everything else.

56
00:04:08,810 --> 00:04:14,800
Now, all I've done here is I'll show you exactly what I've done, so I've taken this button.

57
00:04:15,080 --> 00:04:16,820
I'm going to just duplicate right here.

58
00:04:17,810 --> 00:04:20,650
And let's say I need this default.

59
00:04:22,010 --> 00:04:29,390
The only problem with real buttons is if you see this this little container here, you're just going

60
00:04:29,390 --> 00:04:30,770
to have to this frame.

61
00:04:30,770 --> 00:04:34,780
You're going to have to just bring it to the edge to properly size it.

62
00:04:37,000 --> 00:04:43,090
So if I was going to create a default button like that where I can reuse within my application, I'm

63
00:04:43,090 --> 00:04:45,490
going to do that, I'm going to change colors.

64
00:04:45,490 --> 00:04:48,490
So I'm going to use like my primary yellow.

65
00:04:49,280 --> 00:04:50,830
Remember what I said about colors?

66
00:04:51,010 --> 00:04:55,950
So if my UI is white, I want to change it like a UI, which is like a gray area.

67
00:04:56,110 --> 00:04:59,250
My text will be text gray as well.

68
00:04:59,260 --> 00:05:00,010
And there you go.

69
00:05:00,010 --> 00:05:01,270
I kind of have my button.

70
00:05:01,270 --> 00:05:03,490
I can even go into other styles.

71
00:05:03,490 --> 00:05:08,170
So I have some styles in here around different like shadows.

72
00:05:08,380 --> 00:05:10,300
So I have a default shadow.

73
00:05:11,490 --> 00:05:18,300
And there you go, I have my primary button looks exactly like that, and all I would need to do is

74
00:05:18,510 --> 00:05:22,140
I'm not going to change this this instance.

75
00:05:22,140 --> 00:05:24,140
I'm actually going to create another frame around it.

76
00:05:25,070 --> 00:05:32,720
So option command G and I have another frame, and I'm going to rename this super cool.

77
00:05:33,780 --> 00:05:43,230
But in the end, I'm going to just create that as a component option command K or you can go into your

78
00:05:43,230 --> 00:05:45,360
toolbox if I reverse that command.

79
00:05:45,690 --> 00:05:48,410
So I have my ability to just go like that.

80
00:05:48,540 --> 00:05:49,380
And that's a component.

81
00:05:49,570 --> 00:05:53,280
Now, if I go into my assets and I go into my buttons.

82
00:05:55,390 --> 00:05:57,550
I will see my supercool button up there.

83
00:05:57,790 --> 00:06:04,290
I mean, it's not in a nice folder, you'll notice just how we have our base buttons here.

84
00:06:05,170 --> 00:06:08,920
We have our primary buttons and that's based off of the frames they're in.

85
00:06:08,960 --> 00:06:10,060
That's how I separate them.

86
00:06:10,060 --> 00:06:15,430
So that way I can easily access components not necessarily based off of their naming convention, but

87
00:06:15,430 --> 00:06:17,550
based off of the frames that they're located in.

88
00:06:17,560 --> 00:06:22,480
And that's just the best practice I find for creating components, separate them by frame so they're

89
00:06:22,480 --> 00:06:25,720
easily accessible when you need to grab them.

90
00:06:26,020 --> 00:06:32,140
So I have all my Growe versions for primary buttons, almost like fixed versions for secondary and so

91
00:06:32,140 --> 00:06:32,350
on.

92
00:06:32,590 --> 00:06:38,200
And so this is my supercool component button that I can just reuse and reuse.

93
00:06:38,200 --> 00:06:42,340
And, you know, in this instance, if I were to create.

94
00:06:44,060 --> 00:06:44,990
Let's delete one of them.

95
00:06:45,830 --> 00:06:49,490
If I were to create an active version, let's see what I've done here for Active.

96
00:06:49,670 --> 00:06:55,520
So all I've done basically is I've made the pass through 80 percent.

97
00:06:56,210 --> 00:07:00,620
So that way it looks like it's you know, when you're clicking it just like a nice hover state in a

98
00:07:00,620 --> 00:07:00,920
way.

99
00:07:01,220 --> 00:07:04,310
But there it's very much different from that first date.

100
00:07:04,700 --> 00:07:08,450
So I'll just go ahead and I will set up to 80 percent.

101
00:07:11,270 --> 00:07:12,670
There is a variance there.

102
00:07:13,800 --> 00:07:20,310
And I can even go ahead and go right in there and set that to the active shadow, which is maybe just

103
00:07:20,310 --> 00:07:21,170
a little bit later.

104
00:07:21,180 --> 00:07:22,440
So it looks like it's a press down.

105
00:07:23,040 --> 00:07:23,940
I press down about it.

106
00:07:24,390 --> 00:07:29,520
And let's go into our later section and you'll see this is very much an instance.

107
00:07:29,520 --> 00:07:31,980
You'll see that supercool button over here.

108
00:07:31,980 --> 00:07:34,190
You'll see my other supercool button.

109
00:07:34,740 --> 00:07:39,270
But over here, what I'm going to do is I'm actually going to detach this instance.

110
00:07:39,270 --> 00:07:42,310
I'm not going to detach the base, just the initial instance.

111
00:07:42,310 --> 00:07:48,840
So option Comen B and I'm going to rename it supercool, but in Active.

112
00:07:49,830 --> 00:07:50,940
Now, this is very good.

113
00:07:50,940 --> 00:07:54,270
And this is what I said about like, you know, your design system is not just for you.

114
00:07:54,540 --> 00:08:00,660
Oftentimes designers are really designing to show like active states or disabled states or maybe disabled

115
00:08:00,660 --> 00:08:00,960
states.

116
00:08:00,960 --> 00:08:04,020
It really depends how in-depth you're going with your different user flows.

117
00:08:04,020 --> 00:08:05,430
You're trying to show others.

118
00:08:06,030 --> 00:08:11,040
But when we hand off something like this to developers, we're showing them all the different types

119
00:08:11,040 --> 00:08:12,930
of variations of buttons they need to code.

120
00:08:13,410 --> 00:08:15,090
So this is my active button.

121
00:08:16,350 --> 00:08:21,420
And this will trigger when this is clicked, so if I were to create a prototype.

122
00:08:23,010 --> 00:08:24,060
This is what I would do.

123
00:08:25,650 --> 00:08:27,330
So when I click on this.

124
00:08:31,160 --> 00:08:34,610
We can do on most down.

125
00:08:36,550 --> 00:08:40,120
We're going to swap supercool, but an active.

126
00:08:41,280 --> 00:08:43,890
And that is not instant, where it's going to smart animated.

127
00:08:45,740 --> 00:08:52,040
And what I'm going to do here is we can actually start to solve that, I don't think it's going to work

128
00:08:52,040 --> 00:08:53,480
because they're not the same name.

129
00:08:57,260 --> 00:09:01,310
And we're going to do is over here on mouse up.

130
00:09:02,780 --> 00:09:03,890
I'm actually going to go back.

131
00:09:05,350 --> 00:09:06,880
And that's just going to dissolve.

132
00:09:10,850 --> 00:09:12,470
Let's see what this prototype looks like.

133
00:09:18,310 --> 00:09:19,990
You'll see when I'm clicking it.

134
00:09:23,310 --> 00:09:31,800
There is very much a change now, I can even set this to like 50 percent if you want to see more change

135
00:09:31,800 --> 00:09:34,320
in anything and not clipping the continent.

136
00:09:35,650 --> 00:09:37,840
OK, let's go back to our prototype.

137
00:09:41,220 --> 00:09:47,160
There is a change in that interaction, we're giving them a lot of feedback, so don't just create the

138
00:09:47,160 --> 00:09:48,180
default button.

139
00:09:48,480 --> 00:09:49,350
Let me delete that.

140
00:09:49,590 --> 00:09:51,000
Don't just create the default button.

141
00:09:51,000 --> 00:09:54,600
You need to create, like, the variations that go alongside that when you're working on desktop.

142
00:09:54,600 --> 00:09:56,910
That may be like other states as well.

143
00:09:57,810 --> 00:09:59,520
So I've gone ahead and done that.

144
00:09:59,520 --> 00:10:00,990
I've created disable buttons.

145
00:10:01,660 --> 00:10:06,810
I've also created like a secondary button where it's just like a white background with a shadow.

146
00:10:07,290 --> 00:10:10,940
And I've created those variations with active and disabled as well.

147
00:10:11,820 --> 00:10:12,980
Seen with the tertiary.

148
00:10:13,140 --> 00:10:15,790
I don't have a disabled button because I'll never use a disabled.

149
00:10:15,790 --> 00:10:16,890
But in this instance.

150
00:10:19,690 --> 00:10:23,270
But I've done the exact same thing for fixed as well.

151
00:10:23,380 --> 00:10:27,370
So when you're creating buttons, when you're creating components like that, you remember to think

152
00:10:27,370 --> 00:10:29,880
about all the different types of use cases for that button.

153
00:10:29,890 --> 00:10:32,590
I may even be missing something here, and I totally understand that.

154
00:10:32,590 --> 00:10:34,930
And I understand that, you know, these things may change.

155
00:10:34,930 --> 00:10:37,030
I may use different colors in the future.

156
00:10:37,030 --> 00:10:41,710
I may use different typefaces, different icons, but I've made it so.

157
00:10:43,330 --> 00:10:51,130
It's very much modular, I have this icon now, this is my instance, and I want this to be like an

158
00:10:51,130 --> 00:10:54,520
ad, but now I'm using it for the sole case of an ad button.

159
00:10:54,550 --> 00:10:55,630
I'm going to not delete it.

160
00:10:55,630 --> 00:10:57,340
It'll just hide it, which is perfect.

161
00:10:58,600 --> 00:11:03,590
And for this Budden, I'm going to swap it out for another icon.

162
00:11:04,150 --> 00:11:06,190
Do we have an ADD icon in here?

163
00:11:06,490 --> 00:11:07,010
Oh, there it is.

164
00:11:07,030 --> 00:11:07,330
Plus.

165
00:11:08,580 --> 00:11:14,370
And just like that, we've created our own component and I'm just going to shrink that down so that

166
00:11:14,370 --> 00:11:17,010
we have proper sizing and there you go.

167
00:11:17,250 --> 00:11:21,480
You have your own component that you can use at any which way you like.

168
00:11:21,720 --> 00:11:25,980
And that is how I've built out buttons for our design system.