Hey, everyone.
Welcome back.
So we've been talking a lot about cards, and I think that's totally fine and I think we're going to
do a little bit more, actually.
Now, I've been working on the order list, so when you make an order, it has different variations
like ship.
I have one that says almost there.
I have one that says delivered.
And we also have a list like you can probably filter and that list has a title.
And different cards look different for things that are in the shipping process.
And I've actually started to build out like a little card like that.
So I have one that's over here and this is just like kind of like a live tracker.
And maybe this becomes a component.
It probably should become a component, but we're going to create it into a recipe for now and then.
That's another thing.
As I said, design systems will evolve.
You will add to them, you will remove from them things that were once useful, don't become useful
anymore in things that are needed, become components so you can use them.
So in this case, this will probably become a component.
Now, let me show you what it would look like, so if I had an order card.
OK, so I'm just going to grab just a regular order card.
So this will be that with this, like I said, we can make this into an auto layout, so let's bring
this all the way up so we can see exactly what we're working with.
So we have an order shipped card over here and we have our product.
So this is probably like 15 dollar book.
I start up so we have a ship.
And what I've done here, I've gone ahead and I started thinking about creating like, you know, like
a little track or something very nice for people to kind of see how things are panning out with their
package.
You know, there's probably a portion of this that we're missing something here.
So I'm going to do is I'm actually going to take pills small.
If we can even use the base pill in this instance, I'm going to use the baseball at least, and I'm
just going to say something like delivered by.
08, 08, 20, 20, even though we are past that date at the moment, so we are going to be delivered
by then and that base poll, we can also just.
Change that you are, we can do a couple different things.
It really depends like we can make it back round of yellow and the text can be like dark like that.
This is, I think, fine for now.
So maybe delivery by that date.
That looks good.
When I'm going to do is I'm actually going to turn this into an Autolib.
Big surprise.
Well, so let's see what happened here.
So we have a package tracker.
We'll see what happens so that.
Interesting that didn't.
So what we can do is bring a copy of that.
Select where I want it.
So that is one.
Piece of the list and over here, what I'm going to do is I'm going to create an effect and the background
product we can call this medium.
So this is the problem, we have a package tracker, and so we're using the background color, that's
the problem.
OK.
OK, and this is going to be our background color.
We're going to just use a frame.
And we are going to use 10 pixels for the radius and then we are going to apply the recipe to Vasilis
and not clip that content right now.
And there you go.
Here, a card that is probably.
To unnoticeable, so we have a card here, so this probably should become a component.
I'll leave it up to your discretion if you want to do that.
We have you I stroke just just that border there so that you can distinguish between that and the next
card.
So we have our border status so we can say a border ship.
And what I'm going to do is I'm actually going to create another frame and I'm going to call this order
list.
And you guessed it Autolib when you 16 pixels.
And we are going to go ahead and grab one of our cards here.
We're going to go and find our order card.
Where is it?
And we'll find a delivered card and we'll just place it there for now.
And this delivery card will go into our order list.
So that is fine.
So I can actually, like, remove this background.
Let's.
Make that like that, let's.
To that.
And then when I'm going to do it, I'm going to remove the background color or the background.
So we have a map tracker.
We have a map, we can just pump that up.
And yet so I am going to actually remove this stroke because I think we can just keep it flat and these
can be maybe spaced out policy, it can be spaced out probably by 20 or.
And these ones probably around eight.
So we have that connection.
So I think that's kind of fine for now.
I'm liking it.
What we're going to do is we can add another item.
So when I think of these lists, I think there's something here.
We probably put a horizontal rule, but let's move ahead.
So I'm going to go back and I'm going to, you know, make that title, so if I want to think about
more or less, we probably should be able to filter it on the studio that.
And then let's grab a filter button, so I've been using like this checkbox variant that I've made where
it's so easy to grow, that's been really good.
And we're going to scan to call this filters so we can probably filter by different things price and
maybe just timeline.
Let's.
Bring that together, we can.
We can just call this filters.
And I'm going to expand that all the way to the floor with.
I'm going way out here, OK, so I'm going to take that, that and I am going to make sure there is
a center to each other and then I am actually going to take my friend does now.
And I'm going to put the filter list in there, so I have my order list, I have my filters and I'm
going to create another frame is called the appropriate list.
And yet, Ottilia.
Twenty four pixels.
Maybe this one is 16, but.
Let's clean that up so now like you can create an easy list of different types of products.
You'll notice that we have our last three months plus our filters.
We have like a current shipped status.
I mean, you can also go ahead and change some of these things, like you can say in transit.
So you have different variations, kind of like a live tracker that we've designed here that you can
just kind of like copy.
I can just take this like this.
OK, I need to use an order list right now for when I'm designing a filter list and I'm just going to
drop that right into my designs.
Easy peasy.
So, yeah, definitely use recipes, recipes are going to speed up your workflow, recipes are going
to set a good standard for your team on what different collection of components look like, what components
are going to interact with each other, whether that be like these cards or like buttons checkboxes.
You also sometimes make you and forced you to think about what you may be missing from the components.
So we may go back and add this map tracker as a component where people can kind of, you know, use
that default map just to display a map.
And also using this kind of pinging thing, we can possibly even animate that.
So like we can make it go in and out or more specifically, just the background.
We could just make it pulse when we think about like micro interaction.
So pull those different things out of your designs that they're going to really help you figure out
what you need to build and also make your workflow much more easier.
That's why I do a lot of these things.
This design system is just going to help us, you know, add to this app.
We can turn it around, make something else from this, but it sets a good standard on what a design
system should kind of look like.
And it's going to be different for everyone.
So this is my design of the orders list.