Hey, everyone, and welcome back.
So I wanted to show you how I started to actually build out the profile page, because I think that's
a very interesting section as well.
So when a user actually hits the home button, let's actually go to a home right now.
If they've hit this kind of profile picture, what will happen is they will go straight to the profile
page now on this profile page.
There are several different options we have.
If there was a log in, if they weren't logged in, then they would actually go to sign up or log in,
depending on their scenario.
But if they actually were logged in, they would come to this page.
And what happens here is I've set up like a header that has like this kind of like overlay effect,
kind of just give you a little more depth to the application.
Now, over here we have like a CTA.
Now, this header isn't one of the ones that we currently use within our components and we can actually
bring one in if we wanted to.
So let's actually do that.
What we're going to do is we're just going to create a duplicate over here.
And I want to show you.
So I found out that while I was continuing to experiment and build out this application, I found out,
hey, like this is an interesting component I never necessarily thought about, but I think we can actually
recreate this.
OK, so I'm going to do is I'm going to remove that and I'm going to place this in here.
So we have our component.
Let's get that there go.
OK, so what we're gonna do here is we're going to actually fill some of this information in again,
and I've been thinking a lot about what the style of back button is as well.
Let's change that instances.
You can tell this is how I'm starting to use our design system.
This where it's you can tell it's really powerful.
I don't have to go in search for new icons.
I know which ones I'm planning to use most of the time.
I want to go back to my layer's panel so I can see what I'm selecting to have a background way here,
and I was using yellow.
And there we go, so now we have like a different yellow background, you saw that I kind of had that
effect going.
So we can still recreate that if we wanted to, so we can create a frame that encompasses all of this,
if I hold command and I stretch that frame, it's not going to stretch everything else.
So if you can see I'm not holding command and I'm stretching that frame.
I'm going to do it.
I'm just going to bring it above where I'm actually going to.
Change that to 15, I'm going to change this to 15 and I'm going to make sure this background is white,
so like we still get the same type of effect that we had before.
Now, we may need to do a couple of different things.
That's going to be fine for now, what we can do is we can also set the background color of this actual
frame to yellow.
It's not going to make a difference because we have.
All these different options here and this is kind of artisan's our background color right now, so I'm
going to just hide this border and there you go.
Like we have like another variation of the header.
I like this kind of yellow that we've been using.
So what I've decided thus far for the profile page is to have a profile picture.
They can edit my profile, which would probably bring up a model like yet again, like we didn't necessarily
think about all these different things and where they'll be placed.
And once we start kind of piecing these things together, even at the high fidelity stage, we're noticing
that we even forgot some stuff while we're sketching.
So I have like edit my profile over here.
I thought about interest.
What happens if I have no interest selected?
Like I could hypothetically create an account and not have selected anything.
So over here, as you can tell, I have like the same type of CTA that we've seen before.
I'm going to go into my content.
I notice that, hey, maybe we should create like a button with a little plus sign there.
That makes much more sense.
So my interest would kind of push them to do that.
Even edit so I kind of have the secondary keeping just in line with the consistency, I have things
like my payment information, my address, there's probably more cards that we could add here.
And for the user to get back, they would just select that back button.
Now, there's another section right here that is showcasing what happens if the users actually logged
in and they have other interests set.
So I haven't created a frame to hold these yet, but this is like something where we may be using this
particular card over and over again and in this same manner.
So we may make like a frame.
Where we can do here is we can create a column.
So I can just just go and encompass it within a frame and call it left column.
We can set that to Attilio and it's going to be like 16 and it's going to grow and shrink based off
of the sizes of the elements within.
And I take this and I'm going to call this right column.
So now we have two frames.
I'm going to also create an auto layout for that.
And then we can actually take these together and encompass them in the frame and just call them color
cards to column.
So now we've created another recipe over here that we can probably reuse, as you could see.
Now, this will change based off of if we add new elements or not.
So let's actually take that over here.
And what we're going to do is we're actually going to create an auto layout for that, so let's push
that to the top.
Oops.
So we have a right column pushed to the top, so if we add like, say, another text, imagine putting
component that we have here will start pushing all the other components down.
Same with if I add another one over here.
So let's see what we can do here for this.
OK, I'm going to remove that and I'm just going to say something like Vital, we noticed that, you
know, we need to just bring that lower.
We can change it to whatever color we want.
How would you like me?
Like an orange or something like that if we were to do the same over here?
Let's go to the image selector that we have.
Ariake glasses.
So you can kind of go back to the components and add new images if you want, so I have a MacBook and
I'm going to do this and this can raise productivity.
So right now, Vigna is not in a place to handle like Ottilia.
It's really well, like the frame sometimes won't grow properly.
Same with just regular frames and components, but it will eventually get there.
When I'm going to do actually is I am going to like maybe I will create like green if you see like I
can like switch these around.
I can see if I use my Aoki's on the parent container, I can just switch these around.
And that's the great thing about Otwell.
You'll notice that while that spacing looks really messed up, so I'm just gonna have to manually do
that.
It honestly beats like recreating the wheel over and over again.
And there you go.
Look, we kind of have our own, like, Pinterest style stocking of cards.
So that's what I've done here.
I've started creating this.
And this is like obviously this can be a recipe that we now use over and over again.
I have like another recipe that I had created before, which is like, you know, having these little
icon text containers.
So what I can do is I can encompasses in a frame and create another kind of auto layout or something
like that.
But that is my approach so far for profile.
And that's how you can use components if you need them here.
You can also actually like if you wanted to say.
Let's make a duplicate of this, and you want to select this component, so I've selected that, I can
go to my instance and I can see all the different related components to these color cards.
So there's text image, but in just text and image.
So if I wanted just the text in the image, I can get that really easily.
Everything size down really nicely.
Same with this.
If I wanted to say just what do we got here?
Text and Budden.
I can get that really easily.
I don't want this one because, you know, maybe these are growing related cards.
So I have text cards grow, I have color cards fixed.
I have a text embedded fixed version.
We can create so that is how you can use instances to just really bring in more variety in your designs,
but also just to get the correct components that you need really quickly without having to copy and
paste and stuff like that.
So that is how we've built out the profile page thus far.