1
00:00:00,480 --> 00:00:01,580
Hello and welcome back.

2
00:00:01,890 --> 00:00:06,540
So we're talking about component's again and we're talking about input's now, we covered this a bit.

3
00:00:06,800 --> 00:00:12,420
We're talking about just forms in general when I'm thinking about creating just like components around

4
00:00:12,420 --> 00:00:13,020
input's.

5
00:00:13,230 --> 00:00:15,090
There's so many different factors.

6
00:00:15,330 --> 00:00:21,000
What I have here is I have my general input, which is like the base style here.

7
00:00:21,520 --> 00:00:22,400
Let's go into it.

8
00:00:22,860 --> 00:00:31,350
We have my right icon and within there I have my icon that I can swap out with anything.

9
00:00:31,350 --> 00:00:40,890
I can hide this section if I need to in my content area over here and I have my text and icon little

10
00:00:40,890 --> 00:00:44,670
component section and my text is over here.

11
00:00:45,090 --> 00:00:49,380
And just like that, like if I decide to hide this, my text will just automatically be left alone.

12
00:00:49,860 --> 00:00:53,250
So I'll show you what that looks like after once we create more instances of things.

13
00:00:53,850 --> 00:00:56,970
And this is how I've set up my general input, very simple.

14
00:00:57,450 --> 00:00:59,550
And everything else is connected to that.

15
00:01:00,130 --> 00:01:02,940
I've also created a nice label.

16
00:01:04,710 --> 00:01:06,840
Let's jump right into what a label looks like.

17
00:01:06,840 --> 00:01:08,880
I have my left content on my right content.

18
00:01:09,660 --> 00:01:11,400
You'll notice these little icons.

19
00:01:11,400 --> 00:01:18,870
And that is just to indicate I have an orderly set up and that helps me create just like responsive,

20
00:01:19,170 --> 00:01:25,140
not entirely responsive, but responsive within this sense that if I were to delete something the entire

21
00:01:25,140 --> 00:01:31,380
with wouldn't stay just like the width of optional, it would shrink down to the label with.

22
00:01:32,070 --> 00:01:37,050
So I have my left content, which is made up of my label copy and my optional indicator.

23
00:01:38,100 --> 00:01:44,430
And then on my right I have like a little description and I have an icon if I need it.

24
00:01:44,430 --> 00:01:48,540
And same thing is set up in Autolib, which will help me a lot.

25
00:01:49,560 --> 00:01:51,510
So that is how I set up labels.

26
00:01:51,690 --> 00:01:59,670
I have a word counter if we need that in the future, which is just a simple like text that I've used.

27
00:01:59,820 --> 00:02:01,290
I've used my style here.

28
00:02:02,310 --> 00:02:06,180
If we wanted to, we could maybe bring that up into like a topical style.

29
00:02:07,110 --> 00:02:11,250
But I've left it at ten and I have a field message.

30
00:02:11,250 --> 00:02:15,870
So if there is an error, if there's a success, same thing.

31
00:02:15,870 --> 00:02:22,450
I have my icon, which is always going to be accompanied by text and I've said it to a certain with

32
00:02:22,450 --> 00:02:29,940
that I know on mobile that I'm designing for now, there are going to be instances where you can't always

33
00:02:29,940 --> 00:02:30,570
do this.

34
00:02:31,140 --> 00:02:34,980
We are afforded that luxury because we are just working with mobile.

35
00:02:35,430 --> 00:02:38,990
But remember, all audio just isn't there yet.

36
00:02:39,240 --> 00:02:46,020
And I would be using that a whole lot more for things that I can expand in terms of the width and height

37
00:02:46,290 --> 00:02:49,890
and have the elements still stay within that autolib properly.

38
00:02:50,290 --> 00:02:52,920
Right now, they just don't do that entirely.

39
00:02:52,920 --> 00:02:54,180
They don't work that way.

40
00:02:54,540 --> 00:02:58,110
But this is really great for what we need it for now.

41
00:02:58,320 --> 00:03:00,750
Now let's get into our variations of our base.

42
00:03:01,260 --> 00:03:03,090
So I've done a couple of different things here.

43
00:03:03,510 --> 00:03:05,610
The first section I've just done input's.

44
00:03:06,180 --> 00:03:09,750
There will be times where you just need an input and no label.

45
00:03:10,000 --> 00:03:12,090
Sometimes you may just need input with a placeholder.

46
00:03:12,760 --> 00:03:15,120
You see them on sign up screens and I think that's totally fine.

47
00:03:15,360 --> 00:03:19,050
I think that's one instance where you can just use a placeholder because it's just so standard.

48
00:03:19,320 --> 00:03:23,190
You have your e-mail and your password, something very simple like that.

49
00:03:23,910 --> 00:03:27,270
So I've done things like placeholder unselected.

50
00:03:27,270 --> 00:03:30,790
I have it with a placeholder disabled with an error.

51
00:03:31,320 --> 00:03:32,160
Same thing over here.

52
00:03:32,160 --> 00:03:33,990
I've just empty states.

53
00:03:34,350 --> 00:03:39,660
I have empty and selected, empty, disabled, empty, unselected with an error.

54
00:03:39,660 --> 00:03:44,010
And the error is selected, as you can tell, with inputs and forms.

55
00:03:44,010 --> 00:03:44,550
In general.

56
00:03:44,550 --> 00:03:46,170
They are so complex.

57
00:03:46,440 --> 00:03:50,820
I mean, just look at all the different variations that we have to design for.

58
00:03:51,300 --> 00:03:58,440
That's not to say that we are going to use these all these variations to show every single use case

59
00:03:58,440 --> 00:04:01,080
within a form when we're designing and presenting.

60
00:04:01,410 --> 00:04:05,070
But this is like what I'm saying around design systems are for everyone.

61
00:04:05,070 --> 00:04:09,600
We need to show developers what we're thinking in terms of the different use cases and what those use

62
00:04:09,600 --> 00:04:10,770
cases look like.

63
00:04:11,760 --> 00:04:15,930
So we have a field version and a field selected.

64
00:04:15,930 --> 00:04:20,670
We have a field disabled, air unselected field air selected.

65
00:04:20,670 --> 00:04:27,210
And in this case, you can only see a success message when it is filled and filled in selected.

66
00:04:27,660 --> 00:04:28,960
You'll notice when it's filled in, selected.

67
00:04:28,980 --> 00:04:30,660
We get a little bit of a thicker outline.

68
00:04:30,840 --> 00:04:38,910
We get our carrot that's blinking in there and now we'll see actual form fields.

69
00:04:38,940 --> 00:04:44,070
So with labels included, we have our label and what I've done here, you'll notice that it's just a

70
00:04:44,070 --> 00:04:44,580
label.

71
00:04:44,700 --> 00:04:47,430
Everything else is hidden just by default.

72
00:04:47,610 --> 00:04:49,230
I found that that was just better.

73
00:04:49,260 --> 00:04:54,090
And in the future, in most cases, this is how our label will be displayed.

74
00:04:54,090 --> 00:04:58,650
But if we have like I'll show you an example in a second.

75
00:04:58,650 --> 00:04:59,850
But basic.

76
00:05:00,230 --> 00:05:06,560
It's a duplicate of this, but with a label included with a message text at the bottom included, if

77
00:05:06,560 --> 00:05:12,830
we need a successor error messages, you'll even see I swapped out the icons for something that is much

78
00:05:12,830 --> 00:05:15,860
more fitting for an error or a success message.

79
00:05:16,280 --> 00:05:22,310
So let's get into how we can use just one of these assets, these components.

80
00:05:22,640 --> 00:05:28,250
So I'm just going to actually show you how I would use it from the asset section if I were using it

81
00:05:28,250 --> 00:05:31,340
within a project I'm going to go into here.

82
00:05:31,530 --> 00:05:33,590
I can even search for it if I want to.

83
00:05:34,050 --> 00:05:40,010
I can just search input and I could see all my types of inputs that I've created, which is a lot.

84
00:05:40,400 --> 00:05:44,030
I can also just go into the input section.

85
00:05:45,290 --> 00:05:52,010
So I'm trying to create a formula and I am going to see all these different instances.

86
00:05:53,690 --> 00:06:00,080
And maybe this is a lot and you know, you don't want to see all these and you want to break it out

87
00:06:00,080 --> 00:06:01,760
further and break it down into different frames.

88
00:06:01,760 --> 00:06:02,570
You can do that, too.

89
00:06:02,810 --> 00:06:05,240
I may actually do that at one point.

90
00:06:05,810 --> 00:06:14,150
So if I bring my form, feel this is my field unselected, I'll see that my form field filled unselected

91
00:06:15,500 --> 00:06:17,000
and I don't need to do anything here.

92
00:06:17,000 --> 00:06:19,580
Where I'm going to do is I'm not even going to rename it or anything.

93
00:06:19,580 --> 00:06:25,310
I'm not going to create a new component like when you are using it within your designs, we're using

94
00:06:25,310 --> 00:06:25,490
them.

95
00:06:25,490 --> 00:06:27,560
We don't have to recreate components.

96
00:06:27,570 --> 00:06:29,300
Every time you use them or you change them.

97
00:06:29,660 --> 00:06:35,480
They're there for you to just kind of tweak if you need, you can use them as is.

98
00:06:36,320 --> 00:06:38,060
So if I were to call this one.

99
00:06:40,460 --> 00:06:41,120
Birth date.

100
00:06:41,950 --> 00:06:49,590
So my birth date and here I can start, you know, turning things off that I don't need.

101
00:06:50,280 --> 00:06:52,800
So I'm just going to do that.

102
00:06:54,740 --> 00:07:01,330
I'm just going to do that, and there you go, when I can also do is I can turn on my right content.

103
00:07:02,540 --> 00:07:04,490
I can take that icon off.

104
00:07:06,550 --> 00:07:07,330
And

105
00:07:11,020 --> 00:07:21,130
and I can change that variation to like text gray like that, I can even make this one a little bit

106
00:07:21,130 --> 00:07:21,670
lighter.

107
00:07:22,990 --> 00:07:25,230
I think this one's already set to text great 80.

108
00:07:25,480 --> 00:07:26,710
So there you go.

109
00:07:26,710 --> 00:07:30,070
Like, you can just continue to create like a form like that if you need to.

110
00:07:31,210 --> 00:07:33,550
You also notice, like, the same thing applies.

111
00:07:33,550 --> 00:07:39,880
If I were to go here and, you know, tighten up that radius a bit, maybe make it only five pixels,

112
00:07:40,780 --> 00:07:44,980
that's going to just be changed everywhere else.

113
00:07:45,400 --> 00:07:51,490
It's reflected in all my designs, even my instances of the components that host that original input.

114
00:07:52,330 --> 00:07:58,360
So if we look over here, I have that base input right there and it's going to be reflected there.

115
00:07:58,900 --> 00:08:01,090
So that is how I would use them.

116
00:08:01,090 --> 00:08:08,440
If I like, say, I had credit card information like a CBB, we have a way to toggle an icon.

117
00:08:08,680 --> 00:08:15,790
And in that icon, we can go in here and let's change that instance.

118
00:08:16,120 --> 00:08:18,710
We could have different types of icons.

119
00:08:18,880 --> 00:08:22,780
I think this one actually suits what you would use for your CV.

120
00:08:25,170 --> 00:08:31,590
So say, if I was like my code and we can, like, shrink down that text, what you could do is you

121
00:08:31,590 --> 00:08:37,740
have to make sure that your field unselected is able to actually shrink properly.

122
00:08:38,250 --> 00:08:46,230
So that is how you would create different types of inputs very easily with all the different variation

123
00:08:46,230 --> 00:08:46,680
you need.

124
00:08:48,120 --> 00:08:50,540
That includes things like different types of icons.

125
00:08:50,550 --> 00:08:56,160
So if I wanted to go ahead and create like a search bar right here.

126
00:08:59,480 --> 00:09:06,830
I have my search and I can use any which way I want, so that's an empty search and that is how I would

127
00:09:06,830 --> 00:09:07,160
use it.

128
00:09:07,380 --> 00:09:12,860
So you use all these different assets in a way that is going to help you.

129
00:09:13,370 --> 00:09:18,140
But remember to create these different variations for your development team, for your whole team,

130
00:09:18,140 --> 00:09:20,080
to understand all those different use cases.

131
00:09:20,330 --> 00:09:21,780
Why would we see an error?

132
00:09:21,800 --> 00:09:23,780
Why would we see like a selected say?

133
00:09:23,780 --> 00:09:25,340
Why is there a disabled state?

134
00:09:25,540 --> 00:09:26,900
You need to ask those questions.

135
00:09:27,140 --> 00:09:30,500
Remember to go through your user flows and think about all those different cases.

136
00:09:30,860 --> 00:09:34,040
And that is how we create components for inputs.