Hello and welcome back.
Now we're going to jump right into creating music flows in just a second.
What I want to do is I want to make our workflow just a bit better.
We have these pieces here.
Let's go over to our lawyers panel, if you notice that they're just basically their own kind of rectangles
and stuff like that, and that kind of isn't that good for reusability.
We're actually going to pull some of these out and we're just going to create like a little component's
page, that's what we're going to name it components.
And I'm going to show you how to create some reusable components pretty quickly.
OK, so let's pull some of these out.
You can delete that, we can delete that.
I'm not sure about all the different types of components I'm going to need, but this is a good starting
point.
I think that's fine.
Actually, that's pretty repetitive.
Maybe we'll create some.
Header copy.
Maybe this is some other copy, so we're kind of just creating some concepts based off of our user flows,
our interfaces don't necessarily need to be super detailed right now.
We can refine those over time.
And we're going to definitely refine those when we start our wire frames now how to create a component.
So this is going to be our screen background.
And what we're going to do is we're going to right click or you can actually go up to here the short
form phrase option commands.
OK, so if we just command Z options, that cave creates that as a component.
And what we can do here is we can create a new one.
I've option shift clicked and that is now an instance.
You'll notice it in the panel down here.
So this is now an instance and you can create new components from this instance, but one interesting
thing is if I click that and I start modifying that, it modifies the actual instance as well.
So the instance will inherit pretty much everything from the master component.
It's a great way to create a lot of clarity within your product.
It's a great way to actually just have some consistency even when you're thinking about user flows or
something as simple as that.
So that's why I'd like to do.
Let's group rename these as.
Also, command are and we're selecting all of them, and we'll just call these text.
And will group them in a frame and that frame is essentially what we'll call that text and option command,
could you create a component?
And there you go.
We have a text component.
And all of a sudden now we can start putting things together.
So we have a tax component this year for the arrow over here.
OK, for the arrow, we'll call this one large product.
So large products option command king.
We'll keep these very.
Close together because, you know, they help us with our flow, so we have that.
We'll call this headline option, OK?
And really, there is no perfect way of doing this, if you want to follow along, I advise you to just
use our resource that we have there and you can definitely start creating components as well.
So we have large product.
We have.
Text, maybe this is field, so field option Kapanke, there we go, we got a field and we can even
make the smaller.
It sets a scale currently, but if I.
Adjust the constraints to top and bottom.
Now it's going to actually work with the frame.
OK, that's great.
These are small products, so I'm going to batch reading them so I have them all selected.
Commander and small products, small products.
And option Kapanke, with some selected, will create a frame and a component, and that component will
name its small products.
Great.
Um hmm.
Should we call this so we can just call this confirmation?
And this one scoop the field together, oops, let's put the button in there.
Perfect.
So this one is going to be our button option quick and perfect.
So now we kind of have our own UI here.
Let's see what else we can do, we can make everything pretty equal, this one, if we want to have
it like as a carousel, we'll just keep it like that for now.
Everything else looks so good, we're ready basically to start creating our own components.
And we're ready to start creating our user flows.
So what we're going to do here, just give you just a sample on how this works.
Option and dragging.
So if I have that there, I have a headline, I have another one here.
I can alter this component if I want.
That's totally fine.
That's good, we can take this component.
And and I have a buddy.
And they go, we've created like a really simple concept page here, and it's kind of like our messy
sketches that we had before and now we can start creating more components or we can start creating more
screens from this.
Next, we're going to jump into actually creating a user for.