Everyone, and welcome back.
So I want to show you how to create another type of recipe, which is like maybe around research and
there are different types of recipes that have to do with search, because if we think about all the
different instances of search, that includes stuff like lists, results, type of heads, and that's
how we're going to start right now.
So you can actually go ahead and create components for text.
I'm a big fan of doing that.
It gets a little hard to manage, but like, I'll show you what you can do here and how you can even
turn it into components totally up to you.
And it really depends on your application.
So I'm going to grab that iPhone again.
I'm going to actually apply a grid just to something simple just so I can set my frame around it.
And I know that this is going to be like the.
With all of these grades over here and I'm just going to name that type of head.
Least now we need to actually create a list item, so let me just fill this with a stroke so we know
that that's our frame for now.
So let's move this other way.
Our list item, when we think about type ahead, there's going to be like rules.
So I'm going to actually create a line.
So let's create a rule.
And that rule is probably going to have like a UI color.
Well, that's a little too dark, maybe like 20, really subtle.
Maybe 40 is fine.
OK, so we have that.
And now we need some text.
So let's think about which text we are going to use.
So say I start typing something text.
Type prefill best.
So there is my text and it's not going to be 20 pixels, I'm probably going to bring it down to 16.
That's good and, you know, some portion of it is going to actually not be prefill, so you're going
to have to do this, like, manually for yourself.
So when we see prefilled tax, that's how it usually is.
OK, so we have our tax set.
We also have maybe like an icon to describe an icon.
So you can very much make a list component.
I haven't.
OK, well, I kind of were going to use we're going to use an outline.
Twenty four pixels.
Chevron, right.
And like, very easy, I'm just going to bring that in.
Just leave that there for now and think about all the different parts of a prefill.
We have our text, like if you're looking for something, it will automatically prefill with bold.
And whatever you've typed in with a T X over here is going to be just regular.
When I'm also going to do is I think like.
We may have like a category indicator.
And that we can make a much smaller.
You know, maybe Bolt is way too much for a heading.
Maybe this is more like our Ultranet small body coffee comes into play.
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
this text.
I'm going to rename it to text.
And we can use Abdulelah if we want.
And here we are just going to space that out, maybe by four pixels and then we have.
Another frame.
So when this list, Adam.
And what we can do here is we can just like both and automatically space them out so they're centered.
We select both of these, we can make sure they're eight pixels apart.
Let's do that.
So we know that these are all eight pixels apart from each other.
Let's go ahead and just rename this.
Call them more like a horizontal roll at this point, we can actually start creating.
Our list items, so I'm going to actually put this into this frame.
And this frame is now going to be in Attilio Frame.
And everything within this frame is going to be spaced by eight pixels.
So if I go ahead and take my list item and duplicate it.
Text Lupe's.
I can easily put it below, and if I don't want to show this any longer.
I can easily do that.
And how that variation like that.
And I listed Will you can just like resized to fit like that, and there you go, you can easily create
a variant.
So that's how you can create like a different type of recipe over here, so I've created this one.
Well, I'm going to do is I'm going to actually select this and that, and you see eight pixels may
seem like a little too much and see you I 40 gray is a little too dark.
That's a little bit more subtle.
I think that's fine for now.
If we want to bump that up like, say, by 16 pixels.
So I've noticed that, you know, that 40 is too dark and this is what I mean about your design system
starting to evolve, you'll realize that, hey, I may need something in between here and maybe if I
dock this by another 20 percent, the rule may actually be a little nicer.
So if I see if I go 50 percent on that.
Maybe even 40 percent like that rule is a little more bearable, but that is something we just kind
of learn with time.
So I'm going to actually continue.
We can just see my vehicle and see maybe and just create like a huge list.
And there you have it.
That's your type ahead list.
So we can go ahead and put that into our little section here.
Let's put it into the recipe perfect, so that's one other type of list that we can create.
Obviously, you can turn these into components totally up to you.
If you feel like you're not using it enough, then you don't need to.
Another recipe that I thought about also when it comes to search is like your results.
So let's create a quick search result list.
So I'm going to actually.
To my cards and I'm going to grab like horizontal aerial search.
OK, so we only really need one and then we can play with that.
So let's go back to our time.
You can turn on our.
So I'd like to work within, like, a framework that.
And what we're going to do here is when I think of search results, I'm going to species out by 16 pixels.
We can even have a horizontal rule if we want.
We can also, you know.
And variations.
Let's call these results, and these are going to be in an auto layo, 16 pixels apart, vertical perfect.
And so like when I delete one, the whole frame changes.
OK, that is good for now, what I'm going to do here is like another title I'm going to put like maybe
like one hundred results
or music.
Now, what I can do is I can create another Ottilia.
Let me show you what that looks like.
So I'm going to actually just push that over here.
Let's bring this down a bit, so 16 pixels and I'm going to come and see and then.
So this is going to probably be in the darker text color.
So a gray area and this is probably going to be in a 16 pixel regular.
So we're creating a little more hierarchy here.
And we're going to create a frame around this and we're going to call this text and within that framework,
just going to do an Ottilia again.
And in this one can be like a zero or whatever it could be like for that looks like good enough spacing.
And then, like, once you change something like this, it changes everything and same thing for that.
So keeping things very kind of like responsive to this mobile screen, we have a text portion was make
sure that we were like maybe spaced out by that increment.
We got twenty four.
That's perfectly fine for now.
And then maybe there is like button in here.
Actually, maybe not.
But let's go check our pill buttons here so we have a pill growe that's good.
OK, so I'm going to actually place that right there and I'm going to call this filters.
So maybe we handle filters and a button like this and we're going to remove.
Remove.
I resize that.
And let's take a look at our grid, so we're going to resize that and we're going to select both.
And I'm going to send them.
And I'm just going to call this I'm going to make another friend of Manjit and I'm going to call this
what should we call it?
We should probably call it something like the results info.
Then we can take this and call this search results.
And there you have it, you have an easy search result section where we can constantly add new items
and this becomes like easy way to just build a page.
So I'm just actually going to.
Take this, you can make this in Australia as well, and you can space these two things by twenty four
pixels totally up to you
and you'll see how everything just grows.
And that's why I really love about our layout.
So I'm going to actually take that Mansi.
And let's put that into the recipe.
And that is how you can make different types of recipes, so this is more in relation to actual searching.
But I have like a type of head list, so when I'm actually typing in to my search input and then I actually
have a results list where I can show users how many results there are for their actual search.
And if I want to pop like a filters overlay, I can do that with this button.
And I have all the different types of all the different types, but I have different types of results
that I can always pull from if I needed to.
So this is how I would approach recipes for something like search that has different types of components
and different types of variations.