1
00:00:00,170 --> 00:00:01,270
Everyone, and welcome back.

2
00:00:01,500 --> 00:00:07,610
So I want to show you how to create another type of recipe, which is like maybe around research and

3
00:00:07,980 --> 00:00:11,730
there are different types of recipes that have to do with search, because if we think about all the

4
00:00:11,730 --> 00:00:18,060
different instances of search, that includes stuff like lists, results, type of heads, and that's

5
00:00:18,060 --> 00:00:19,060
how we're going to start right now.

6
00:00:19,470 --> 00:00:23,860
So you can actually go ahead and create components for text.

7
00:00:23,880 --> 00:00:25,820
I'm a big fan of doing that.

8
00:00:25,830 --> 00:00:32,250
It gets a little hard to manage, but like, I'll show you what you can do here and how you can even

9
00:00:32,250 --> 00:00:34,530
turn it into components totally up to you.

10
00:00:34,740 --> 00:00:36,690
And it really depends on your application.

11
00:00:36,700 --> 00:00:40,950
So I'm going to grab that iPhone again.

12
00:00:40,950 --> 00:00:47,910
I'm going to actually apply a grid just to something simple just so I can set my frame around it.

13
00:00:47,910 --> 00:00:50,820
And I know that this is going to be like the.

14
00:00:51,850 --> 00:01:00,130
With all of these grades over here and I'm just going to name that type of head.

15
00:01:02,280 --> 00:01:09,600
Least now we need to actually create a list item, so let me just fill this with a stroke so we know

16
00:01:09,600 --> 00:01:10,700
that that's our frame for now.

17
00:01:10,920 --> 00:01:13,100
So let's move this other way.

18
00:01:13,770 --> 00:01:17,880
Our list item, when we think about type ahead, there's going to be like rules.

19
00:01:17,880 --> 00:01:20,610
So I'm going to actually create a line.

20
00:01:22,170 --> 00:01:24,000
So let's create a rule.

21
00:01:25,740 --> 00:01:29,470
And that rule is probably going to have like a UI color.

22
00:01:29,790 --> 00:01:34,260
Well, that's a little too dark, maybe like 20, really subtle.

23
00:01:36,220 --> 00:01:37,480
Maybe 40 is fine.

24
00:01:38,140 --> 00:01:40,480
OK, so we have that.

25
00:01:41,770 --> 00:01:43,240
And now we need some text.

26
00:01:45,480 --> 00:01:50,970
So let's think about which text we are going to use.

27
00:01:52,800 --> 00:01:58,560
So say I start typing something text.

28
00:01:59,570 --> 00:02:03,740
Type prefill best.

29
00:02:06,200 --> 00:02:13,400
So there is my text and it's not going to be 20 pixels, I'm probably going to bring it down to 16.

30
00:02:16,300 --> 00:02:24,430
That's good and, you know, some portion of it is going to actually not be prefill, so you're going

31
00:02:24,430 --> 00:02:26,860
to have to do this, like, manually for yourself.

32
00:02:28,830 --> 00:02:33,370
So when we see prefilled tax, that's how it usually is.

33
00:02:34,020 --> 00:02:35,610
OK, so we have our tax set.

34
00:02:37,400 --> 00:02:41,720
We also have maybe like an icon to describe an icon.

35
00:02:43,480 --> 00:02:45,470
So you can very much make a list component.

36
00:02:46,990 --> 00:02:47,740
I haven't.

37
00:02:49,120 --> 00:02:52,250
OK, well, I kind of were going to use we're going to use an outline.

38
00:02:52,270 --> 00:02:53,500
Twenty four pixels.

39
00:02:53,500 --> 00:02:54,820
Chevron, right.

40
00:02:55,760 --> 00:02:58,980
And like, very easy, I'm just going to bring that in.

41
00:02:59,960 --> 00:03:06,590
Just leave that there for now and think about all the different parts of a prefill.

42
00:03:06,890 --> 00:03:13,730
We have our text, like if you're looking for something, it will automatically prefill with bold.

43
00:03:13,730 --> 00:03:18,980
And whatever you've typed in with a T X over here is going to be just regular.

44
00:03:19,550 --> 00:03:21,380
When I'm also going to do is I think like.

45
00:03:25,650 --> 00:03:27,480
We may have like a category indicator.

46
00:03:29,340 --> 00:03:31,800
And that we can make a much smaller.

47
00:03:37,660 --> 00:03:40,150
You know, maybe Bolt is way too much for a heading.

48
00:03:40,190 --> 00:03:44,400
Maybe this is more like our Ultranet small body coffee comes into play.

49
00:03:46,150 --> 00:03:51,040
And so what I'm going to do here is I'm actually going to create a frame and I'm just going to call

50
00:03:51,040 --> 00:03:51,740
this text.

51
00:03:51,740 --> 00:03:53,050
I'm going to rename it to text.

52
00:03:53,620 --> 00:03:55,690
And we can use Abdulelah if we want.

53
00:03:57,950 --> 00:04:06,050
And here we are just going to space that out, maybe by four pixels and then we have.

54
00:04:07,770 --> 00:04:09,420
Another frame.

55
00:04:14,660 --> 00:04:17,180
So when this list, Adam.

56
00:04:19,760 --> 00:04:25,370
And what we can do here is we can just like both and automatically space them out so they're centered.

57
00:04:32,000 --> 00:04:36,380
We select both of these, we can make sure they're eight pixels apart.

58
00:04:44,240 --> 00:04:45,130
Let's do that.

59
00:04:47,560 --> 00:04:51,050
So we know that these are all eight pixels apart from each other.

60
00:04:51,970 --> 00:04:55,510
Let's go ahead and just rename this.

61
00:04:57,170 --> 00:05:04,970
Call them more like a horizontal roll at this point, we can actually start creating.

62
00:05:05,990 --> 00:05:09,380
Our list items, so I'm going to actually put this into this frame.

63
00:05:10,920 --> 00:05:13,410
And this frame is now going to be in Attilio Frame.

64
00:05:15,980 --> 00:05:19,430
And everything within this frame is going to be spaced by eight pixels.

65
00:05:22,640 --> 00:05:27,920
So if I go ahead and take my list item and duplicate it.

66
00:05:31,010 --> 00:05:32,630
Text Lupe's.

67
00:05:37,740 --> 00:05:42,840
I can easily put it below, and if I don't want to show this any longer.

68
00:05:45,160 --> 00:05:46,780
I can easily do that.

69
00:05:49,900 --> 00:05:52,300
And how that variation like that.

70
00:05:54,430 --> 00:06:03,070
And I listed Will you can just like resized to fit like that, and there you go, you can easily create

71
00:06:03,070 --> 00:06:03,940
a variant.

72
00:06:09,040 --> 00:06:16,510
So that's how you can create like a different type of recipe over here, so I've created this one.

73
00:06:19,470 --> 00:06:25,320
Well, I'm going to do is I'm going to actually select this and that, and you see eight pixels may

74
00:06:25,320 --> 00:06:32,880
seem like a little too much and see you I 40 gray is a little too dark.

75
00:06:33,270 --> 00:06:34,610
That's a little bit more subtle.

76
00:06:34,620 --> 00:06:35,880
I think that's fine for now.

77
00:06:36,570 --> 00:06:39,510
If we want to bump that up like, say, by 16 pixels.

78
00:06:42,060 --> 00:06:47,490
So I've noticed that, you know, that 40 is too dark and this is what I mean about your design system

79
00:06:47,490 --> 00:06:51,900
starting to evolve, you'll realize that, hey, I may need something in between here and maybe if I

80
00:06:51,920 --> 00:06:57,300
dock this by another 20 percent, the rule may actually be a little nicer.

81
00:06:57,330 --> 00:07:00,780
So if I see if I go 50 percent on that.

82
00:07:03,090 --> 00:07:09,650
Maybe even 40 percent like that rule is a little more bearable, but that is something we just kind

83
00:07:09,650 --> 00:07:10,750
of learn with time.

84
00:07:11,870 --> 00:07:13,710
So I'm going to actually continue.

85
00:07:13,730 --> 00:07:20,360
We can just see my vehicle and see maybe and just create like a huge list.

86
00:07:20,810 --> 00:07:21,700
And there you have it.

87
00:07:21,710 --> 00:07:23,230
That's your type ahead list.

88
00:07:25,220 --> 00:07:28,870
So we can go ahead and put that into our little section here.

89
00:07:31,050 --> 00:07:37,960
Let's put it into the recipe perfect, so that's one other type of list that we can create.

90
00:07:38,400 --> 00:07:41,550
Obviously, you can turn these into components totally up to you.

91
00:07:41,550 --> 00:07:44,130
If you feel like you're not using it enough, then you don't need to.

92
00:07:45,420 --> 00:07:51,210
Another recipe that I thought about also when it comes to search is like your results.

93
00:07:53,460 --> 00:07:57,350
So let's create a quick search result list.

94
00:07:59,100 --> 00:08:00,990
So I'm going to actually.

95
00:08:02,090 --> 00:08:07,020
To my cards and I'm going to grab like horizontal aerial search.

96
00:08:07,340 --> 00:08:10,100
OK, so we only really need one and then we can play with that.

97
00:08:11,920 --> 00:08:13,090
So let's go back to our time.

98
00:08:13,540 --> 00:08:14,470
You can turn on our.

99
00:08:16,140 --> 00:08:18,660
So I'd like to work within, like, a framework that.

100
00:08:19,950 --> 00:08:27,240
And what we're going to do here is when I think of search results, I'm going to species out by 16 pixels.

101
00:08:27,240 --> 00:08:29,150
We can even have a horizontal rule if we want.

102
00:08:30,060 --> 00:08:31,740
We can also, you know.

103
00:08:35,120 --> 00:08:36,800
And variations.

104
00:08:38,570 --> 00:08:46,870
Let's call these results, and these are going to be in an auto layo, 16 pixels apart, vertical perfect.

105
00:08:47,480 --> 00:08:51,410
And so like when I delete one, the whole frame changes.

106
00:08:53,900 --> 00:09:02,180
OK, that is good for now, what I'm going to do here is like another title I'm going to put like maybe

107
00:09:02,180 --> 00:09:04,130
like one hundred results

108
00:09:06,860 --> 00:09:07,920
or music.

109
00:09:08,600 --> 00:09:11,600
Now, what I can do is I can create another Ottilia.

110
00:09:12,230 --> 00:09:13,840
Let me show you what that looks like.

111
00:09:14,030 --> 00:09:18,640
So I'm going to actually just push that over here.

112
00:09:20,790 --> 00:09:30,300
Let's bring this down a bit, so 16 pixels and I'm going to come and see and then.

113
00:09:32,790 --> 00:09:36,050
So this is going to probably be in the darker text color.

114
00:09:36,060 --> 00:09:42,950
So a gray area and this is probably going to be in a 16 pixel regular.

115
00:09:43,500 --> 00:09:45,380
So we're creating a little more hierarchy here.

116
00:09:50,050 --> 00:09:56,430
And we're going to create a frame around this and we're going to call this text and within that framework,

117
00:09:56,430 --> 00:09:58,750
just going to do an Ottilia again.

118
00:09:59,900 --> 00:10:06,590
And in this one can be like a zero or whatever it could be like for that looks like good enough spacing.

119
00:10:09,650 --> 00:10:15,640
And then, like, once you change something like this, it changes everything and same thing for that.

120
00:10:16,040 --> 00:10:23,840
So keeping things very kind of like responsive to this mobile screen, we have a text portion was make

121
00:10:23,840 --> 00:10:26,270
sure that we were like maybe spaced out by that increment.

122
00:10:26,910 --> 00:10:28,000
We got twenty four.

123
00:10:28,880 --> 00:10:30,680
That's perfectly fine for now.

124
00:10:31,010 --> 00:10:34,010
And then maybe there is like button in here.

125
00:10:35,700 --> 00:10:36,450
Actually, maybe not.

126
00:10:36,480 --> 00:10:44,710
But let's go check our pill buttons here so we have a pill growe that's good.

127
00:10:45,070 --> 00:10:49,800
OK, so I'm going to actually place that right there and I'm going to call this filters.

128
00:10:49,800 --> 00:10:54,810
So maybe we handle filters and a button like this and we're going to remove.

129
00:10:56,340 --> 00:10:56,910
Remove.

130
00:10:59,330 --> 00:11:00,810
I resize that.

131
00:11:05,290 --> 00:11:12,220
And let's take a look at our grid, so we're going to resize that and we're going to select both.

132
00:11:13,890 --> 00:11:16,380
And I'm going to send them.

133
00:11:18,500 --> 00:11:24,710
And I'm just going to call this I'm going to make another friend of Manjit and I'm going to call this

134
00:11:25,220 --> 00:11:26,010
what should we call it?

135
00:11:26,630 --> 00:11:31,100
We should probably call it something like the results info.

136
00:11:33,850 --> 00:11:37,450
Then we can take this and call this search results.

137
00:11:40,990 --> 00:11:47,590
And there you have it, you have an easy search result section where we can constantly add new items

138
00:11:48,430 --> 00:11:51,610
and this becomes like easy way to just build a page.

139
00:11:52,300 --> 00:11:54,070
So I'm just actually going to.

140
00:11:55,840 --> 00:12:04,090
Take this, you can make this in Australia as well, and you can space these two things by twenty four

141
00:12:04,090 --> 00:12:06,610
pixels totally up to you

142
00:12:09,340 --> 00:12:11,680
and you'll see how everything just grows.

143
00:12:11,710 --> 00:12:13,710
And that's why I really love about our layout.

144
00:12:13,720 --> 00:12:15,970
So I'm going to actually take that Mansi.

145
00:12:16,600 --> 00:12:20,700
And let's put that into the recipe.

146
00:12:22,680 --> 00:12:28,810
And that is how you can make different types of recipes, so this is more in relation to actual searching.

147
00:12:29,280 --> 00:12:34,980
But I have like a type of head list, so when I'm actually typing in to my search input and then I actually

148
00:12:34,980 --> 00:12:40,950
have a results list where I can show users how many results there are for their actual search.

149
00:12:41,220 --> 00:12:45,360
And if I want to pop like a filters overlay, I can do that with this button.

150
00:12:45,660 --> 00:12:52,440
And I have all the different types of all the different types, but I have different types of results

151
00:12:52,440 --> 00:12:55,920
that I can always pull from if I needed to.

152
00:12:56,550 --> 00:13:03,240
So this is how I would approach recipes for something like search that has different types of components

153
00:13:03,240 --> 00:13:05,280
and different types of variations.