Hey, everyone, and welcome back.
So what I want to talk about next is something called recipe's.
Now I call them recipe's.
People call them a bunch of different things.
They could just be like a collection of components to make like different types of pieces that you can
put together.
What I've done here is I'm going to actually create different variations of the ways, like our vertical
product cards with look within our app.
So one way to do that is to, you know, take your component.
I have just a default large product card here.
You'll see that over here, large default.
And I'm going to take my friend tool.
I have it sorted already and I'm going to go to phone.
And there you go.
So.
This is the size of the majority of our designs are based off of.
I'm actually going to select one of our little grids to substandard ACORN, and what I'm going to do
is I'm going to take that large default card.
And as you can tell, it perfectly sets on that grid.
And then I'm going to take another one, because the way I want to use this card is I want it to be
a swiped container.
So I'm going to actually.
Take these and I'm going to press command option to put them in a frame in that frame.
I'm just going to call this large Swype container.
You can call whatever you want.
Now, I'm going to set this to Autolib.
Because it's just easier for now at least, and I'll show you why.
So I'm spacing out by 16 pixels, I'm going to take my next.
Product and a command C command, we you know, it's that.
I am creating a bunch, so maybe there's like one, two, I think there's five here, you're perfect.
OK, so I can do that.
Now I know that they're all spaced perfectly.
And I am going to actually remove that Autolib.
Now they're just a regular frame, and if I hold command.
Well, I shrink this frame, it's not going to affect anything, and when I want to do is shrink it
to the width of the iPhone frame that I have here.
So there you go.
Everything is going to be clipped.
And I'm creating just a nice, easy way for us to have like a swipe, a bowl container.
Now, if I were to press Manjit, this is what it would look like.
Actually, I think it's fine if I just clip it like that.
So this is what it's going to look like, it's you don't need to make a component, this is more so
for people within your design team to actually have like a point of reference on how certain components
are used.
You can just keep these in one area like I'm going to do here, and you can easily just copy and paste
the whyever design system up and they won't appear in your assets tab because it is in a component.
I mean, we can go ahead and create a component for this.
But I put it this way.
You can keep it up to where you want to do it.
Like you can just say that I want this one to be an instance of large stock pick and sell this one.
I want it to be large scale.
So, I mean, it gives you a lot of flexibility in that aspect.
And if I want to actually prototype something like this.
Let's see if it's going to automatically bring it, yeah, there we go.
So if I want to prototype that, I have it there and this one, I'm going to do protect and click horizontal
scrolling on that go back.
And now I have a beautiful swappable container and that's how I would use the large product card.
So really nice.
So that's one recipe that I would definitely make.
And I'm going to do it here is I'm going to drag that.
Actually, that's Comanche.
I'm clicking into my recipe here, so it'll be right there.
And over here, the recipe will I'm going to win my design, I'm going to go clip content, so it's
going to automatically clip it for me, just like how when we create, like an iPhone frame or mobile
frame or Android frame, it doesn't matter that we were setting that to clip as well.
So it's going to hide it automatically.
So let's remove this perfect now.
We can also create another version where let's create another thing, if, you know, I'm very keen
on actually making sure that everything in my system looks exactly the same.
And then just adjust that spacing between those frames like that manually.
OK, I'm going to do here is I'm actually going to go into my assets that I am going to find my card
here.
So vertical cards.
I want a small default card for now.
So there it is.
Let's go back to our leaders top and there you go.
OK, so when I think about categories and how cards should be filled out, like we can go ahead and
turn on our grid again.
But there may be other aspects of like this container that we aren't thinking about.
We may not have been thinking about aspects here that we really needed, like maybe like a title.
These are automatically set up to be.
Like a 50 percent card.
But here we go, we have our 50 percent card, and even in a recipe, like I said, a recipe isn't necessarily
meant to be like a component on its own.
It's meant to also use, like components and bring them all together.
So I may have like a title, we can adjust that.
And we can set it to like only be.
That long, we can't have another thing that says I see more.
Now, I'm just going right now I'm just going off the top of my head, give interaction, maybe Link.
16 pixels.
And then we can change the color to whatever we want, and in this instance, maybe we choose something
like Gray.
That's fine.
So this is obviously not it's going to be a heading, so heading in 20 pixels, great.
And this can be confined to that side and it's going to be affected by the right.
This is going to be affected by the left.
And then we can take both of these and we can, like, align them in any which way we like.
So of just aligned and based off of their base line.
There we go.
And there you go.
So we have now we're starting to see, like something come together here.
I'm going to actually go ahead and, you know, maybe I'll swap this out for something that is like
a small cell one can be.
Small staff pick, that's a large topic, wrong one small staff pick, and then what I would do here
is I would actually create another frame.
Auctioneer M.G., I'll call this left column.
And I'm going to actually create an auto.
And I want that spacing always to be 16 pixels, so even if I write like 13 inch MacBook Pro, you'll
notice that we start to see these different things actually expand.
So if I'm going to make sure that this is in line with that and that will make that call and expand
and I would do the exact same thing for this right column.
So I'm going to just duplicate X.
I've already made the frame.
I'm just going to rename it to the right column.
And there we go.
Like now we can start creating like a larger list of items.
Maybe we just keep it to four and we show them a larger list once they click to see more just to save
real estate.
But that is one thing we can do.
And I'm just going to actually collect this.
You can even make another frame and just call these products.
And we can create another frame around this and call it text and then create a larger frame and call
this category list.
And there you have it, you have just a very quick way, so let's just come and see.
Let's go in there, take that container out, and now we have another recipe.
And I can just like either copy this, which is easily made.
It already has all our spacing in there.
It has different types of ways that we can make this responsive.
If we wanted to.
We can have a short product text and if we go in there, we can just easily manipulate the.
And there you go.
So that's how I would approach creating recipes just for cards here.
So this is what I've done with our vertical cards.