1 00:00:01,050 --> 00:00:02,490 Hey, everyone, and welcome back. 2 00:00:02,670 --> 00:00:08,100 So I wanted to show you how I started to actually build out the profile page, because I think that's 3 00:00:08,100 --> 00:00:09,710 a very interesting section as well. 4 00:00:10,560 --> 00:00:15,770 So when a user actually hits the home button, let's actually go to a home right now. 5 00:00:16,290 --> 00:00:21,930 If they've hit this kind of profile picture, what will happen is they will go straight to the profile 6 00:00:21,930 --> 00:00:25,230 page now on this profile page. 7 00:00:25,470 --> 00:00:27,510 There are several different options we have. 8 00:00:27,900 --> 00:00:33,240 If there was a log in, if they weren't logged in, then they would actually go to sign up or log in, 9 00:00:33,240 --> 00:00:34,530 depending on their scenario. 10 00:00:34,810 --> 00:00:39,690 But if they actually were logged in, they would come to this page. 11 00:00:41,040 --> 00:00:46,950 And what happens here is I've set up like a header that has like this kind of like overlay effect, 12 00:00:47,550 --> 00:00:49,960 kind of just give you a little more depth to the application. 13 00:00:51,300 --> 00:00:53,780 Now, over here we have like a CTA. 14 00:00:54,540 --> 00:01:00,450 Now, this header isn't one of the ones that we currently use within our components and we can actually 15 00:01:00,450 --> 00:01:02,000 bring one in if we wanted to. 16 00:01:02,400 --> 00:01:03,660 So let's actually do that. 17 00:01:03,960 --> 00:01:06,390 What we're going to do is we're just going to create a duplicate over here. 18 00:01:06,690 --> 00:01:07,440 And I want to show you. 19 00:01:07,450 --> 00:01:13,890 So I found out that while I was continuing to experiment and build out this application, I found out, 20 00:01:13,890 --> 00:01:19,800 hey, like this is an interesting component I never necessarily thought about, but I think we can actually 21 00:01:19,800 --> 00:01:20,850 recreate this. 22 00:01:24,010 --> 00:01:28,000 OK, so I'm going to do is I'm going to remove that and I'm going to place this in here. 23 00:01:30,080 --> 00:01:31,460 So we have our component. 24 00:01:31,550 --> 00:01:33,320 Let's get that there go. 25 00:01:34,380 --> 00:01:42,510 OK, so what we're gonna do here is we're going to actually fill some of this information in again, 26 00:01:43,740 --> 00:01:48,360 and I've been thinking a lot about what the style of back button is as well. 27 00:01:49,260 --> 00:01:50,910 Let's change that instances. 28 00:01:50,920 --> 00:01:54,060 You can tell this is how I'm starting to use our design system. 29 00:01:54,070 --> 00:01:56,390 This where it's you can tell it's really powerful. 30 00:01:57,270 --> 00:01:59,550 I don't have to go in search for new icons. 31 00:01:59,550 --> 00:02:01,910 I know which ones I'm planning to use most of the time. 32 00:02:04,090 --> 00:02:08,760 I want to go back to my layer's panel so I can see what I'm selecting to have a background way here, 33 00:02:08,770 --> 00:02:10,570 and I was using yellow. 34 00:02:13,200 --> 00:02:19,740 And there we go, so now we have like a different yellow background, you saw that I kind of had that 35 00:02:19,740 --> 00:02:20,730 effect going. 36 00:02:21,950 --> 00:02:27,860 So we can still recreate that if we wanted to, so we can create a frame that encompasses all of this, 37 00:02:27,860 --> 00:02:31,460 if I hold command and I stretch that frame, it's not going to stretch everything else. 38 00:02:32,160 --> 00:02:34,790 So if you can see I'm not holding command and I'm stretching that frame. 39 00:02:36,320 --> 00:02:36,920 I'm going to do it. 40 00:02:36,960 --> 00:02:40,910 I'm just going to bring it above where I'm actually going to. 41 00:02:43,270 --> 00:02:50,970 Change that to 15, I'm going to change this to 15 and I'm going to make sure this background is white, 42 00:02:51,160 --> 00:02:54,940 so like we still get the same type of effect that we had before. 43 00:02:55,660 --> 00:02:58,240 Now, we may need to do a couple of different things. 44 00:03:00,480 --> 00:03:05,580 That's going to be fine for now, what we can do is we can also set the background color of this actual 45 00:03:05,580 --> 00:03:06,590 frame to yellow. 46 00:03:06,600 --> 00:03:09,360 It's not going to make a difference because we have. 47 00:03:11,320 --> 00:03:17,620 All these different options here and this is kind of artisan's our background color right now, so I'm 48 00:03:17,620 --> 00:03:20,350 going to just hide this border and there you go. 49 00:03:20,350 --> 00:03:22,360 Like we have like another variation of the header. 50 00:03:22,360 --> 00:03:24,230 I like this kind of yellow that we've been using. 51 00:03:24,730 --> 00:03:29,620 So what I've decided thus far for the profile page is to have a profile picture. 52 00:03:29,620 --> 00:03:34,690 They can edit my profile, which would probably bring up a model like yet again, like we didn't necessarily 53 00:03:34,690 --> 00:03:37,540 think about all these different things and where they'll be placed. 54 00:03:37,540 --> 00:03:42,760 And once we start kind of piecing these things together, even at the high fidelity stage, we're noticing 55 00:03:42,760 --> 00:03:45,600 that we even forgot some stuff while we're sketching. 56 00:03:45,970 --> 00:03:48,490 So I have like edit my profile over here. 57 00:03:48,700 --> 00:03:49,630 I thought about interest. 58 00:03:49,630 --> 00:03:51,400 What happens if I have no interest selected? 59 00:03:51,400 --> 00:03:55,520 Like I could hypothetically create an account and not have selected anything. 60 00:03:55,930 --> 00:04:03,430 So over here, as you can tell, I have like the same type of CTA that we've seen before. 61 00:04:03,850 --> 00:04:05,190 I'm going to go into my content. 62 00:04:05,680 --> 00:04:11,710 I notice that, hey, maybe we should create like a button with a little plus sign there. 63 00:04:12,940 --> 00:04:14,290 That makes much more sense. 64 00:04:14,410 --> 00:04:17,350 So my interest would kind of push them to do that. 65 00:04:18,530 --> 00:04:24,560 Even edit so I kind of have the secondary keeping just in line with the consistency, I have things 66 00:04:24,560 --> 00:04:30,740 like my payment information, my address, there's probably more cards that we could add here. 67 00:04:32,480 --> 00:04:35,360 And for the user to get back, they would just select that back button. 68 00:04:35,810 --> 00:04:43,460 Now, there's another section right here that is showcasing what happens if the users actually logged 69 00:04:43,460 --> 00:04:45,130 in and they have other interests set. 70 00:04:46,040 --> 00:04:51,890 So I haven't created a frame to hold these yet, but this is like something where we may be using this 71 00:04:51,890 --> 00:04:56,230 particular card over and over again and in this same manner. 72 00:04:56,240 --> 00:04:57,980 So we may make like a frame. 73 00:04:58,280 --> 00:05:00,950 Where we can do here is we can create a column. 74 00:05:01,580 --> 00:05:07,940 So I can just just go and encompass it within a frame and call it left column. 75 00:05:09,260 --> 00:05:13,880 We can set that to Attilio and it's going to be like 16 and it's going to grow and shrink based off 76 00:05:13,880 --> 00:05:15,610 of the sizes of the elements within. 77 00:05:15,920 --> 00:05:21,710 And I take this and I'm going to call this right column. 78 00:05:22,460 --> 00:05:23,990 So now we have two frames. 79 00:05:23,990 --> 00:05:26,410 I'm going to also create an auto layout for that. 80 00:05:26,780 --> 00:05:32,180 And then we can actually take these together and encompass them in the frame and just call them color 81 00:05:32,180 --> 00:05:34,550 cards to column. 82 00:05:35,060 --> 00:05:40,010 So now we've created another recipe over here that we can probably reuse, as you could see. 83 00:05:42,140 --> 00:05:46,850 Now, this will change based off of if we add new elements or not. 84 00:05:46,880 --> 00:05:48,500 So let's actually take that over here. 85 00:05:49,980 --> 00:05:56,400 And what we're going to do is we're actually going to create an auto layout for that, so let's push 86 00:05:56,400 --> 00:05:57,450 that to the top. 87 00:05:59,990 --> 00:06:00,330 Oops. 88 00:06:01,130 --> 00:06:08,810 So we have a right column pushed to the top, so if we add like, say, another text, imagine putting 89 00:06:08,810 --> 00:06:14,750 component that we have here will start pushing all the other components down. 90 00:06:14,870 --> 00:06:18,610 Same with if I add another one over here. 91 00:06:19,220 --> 00:06:22,340 So let's see what we can do here for this. 92 00:06:24,060 --> 00:06:31,850 OK, I'm going to remove that and I'm just going to say something like Vital, we noticed that, you 93 00:06:31,860 --> 00:06:35,460 know, we need to just bring that lower. 94 00:06:36,210 --> 00:06:39,210 We can change it to whatever color we want. 95 00:06:39,660 --> 00:06:40,180 How would you like me? 96 00:06:40,230 --> 00:06:44,610 Like an orange or something like that if we were to do the same over here? 97 00:06:44,850 --> 00:06:47,010 Let's go to the image selector that we have. 98 00:06:50,030 --> 00:06:51,140 Ariake glasses. 99 00:06:52,410 --> 00:07:00,980 So you can kind of go back to the components and add new images if you want, so I have a MacBook and 100 00:07:00,990 --> 00:07:04,330 I'm going to do this and this can raise productivity. 101 00:07:05,100 --> 00:07:10,340 So right now, Vigna is not in a place to handle like Ottilia. 102 00:07:10,350 --> 00:07:14,100 It's really well, like the frame sometimes won't grow properly. 103 00:07:14,280 --> 00:07:17,880 Same with just regular frames and components, but it will eventually get there. 104 00:07:18,180 --> 00:07:25,920 When I'm going to do actually is I am going to like maybe I will create like green if you see like I 105 00:07:25,920 --> 00:07:27,030 can like switch these around. 106 00:07:27,030 --> 00:07:32,640 I can see if I use my Aoki's on the parent container, I can just switch these around. 107 00:07:33,120 --> 00:07:34,800 And that's the great thing about Otwell. 108 00:07:34,800 --> 00:07:39,810 You'll notice that while that spacing looks really messed up, so I'm just gonna have to manually do 109 00:07:39,810 --> 00:07:40,140 that. 110 00:07:40,720 --> 00:07:43,910 It honestly beats like recreating the wheel over and over again. 111 00:07:43,920 --> 00:07:44,340 And there you go. 112 00:07:44,340 --> 00:07:49,170 Look, we kind of have our own, like, Pinterest style stocking of cards. 113 00:07:49,470 --> 00:07:50,780 So that's what I've done here. 114 00:07:50,790 --> 00:07:52,110 I've started creating this. 115 00:07:52,110 --> 00:07:56,150 And this is like obviously this can be a recipe that we now use over and over again. 116 00:07:57,330 --> 00:08:02,700 I have like another recipe that I had created before, which is like, you know, having these little 117 00:08:02,700 --> 00:08:04,200 icon text containers. 118 00:08:04,210 --> 00:08:10,770 So what I can do is I can encompasses in a frame and create another kind of auto layout or something 119 00:08:10,770 --> 00:08:11,400 like that. 120 00:08:12,120 --> 00:08:15,780 But that is my approach so far for profile. 121 00:08:15,780 --> 00:08:18,780 And that's how you can use components if you need them here. 122 00:08:20,370 --> 00:08:23,460 You can also actually like if you wanted to say. 123 00:08:25,610 --> 00:08:31,760 Let's make a duplicate of this, and you want to select this component, so I've selected that, I can 124 00:08:31,760 --> 00:08:35,810 go to my instance and I can see all the different related components to these color cards. 125 00:08:35,810 --> 00:08:38,420 So there's text image, but in just text and image. 126 00:08:38,430 --> 00:08:42,350 So if I wanted just the text in the image, I can get that really easily. 127 00:08:43,250 --> 00:08:44,930 Everything size down really nicely. 128 00:08:46,030 --> 00:08:46,820 Same with this. 129 00:08:46,820 --> 00:08:51,380 If I wanted to say just what do we got here? 130 00:08:52,430 --> 00:08:53,930 Text and Budden. 131 00:08:56,440 --> 00:08:58,280 I can get that really easily. 132 00:09:00,370 --> 00:09:05,080 I don't want this one because, you know, maybe these are growing related cards. 133 00:09:05,320 --> 00:09:09,040 So I have text cards grow, I have color cards fixed. 134 00:09:09,040 --> 00:09:10,930 I have a text embedded fixed version. 135 00:09:12,110 --> 00:09:20,630 We can create so that is how you can use instances to just really bring in more variety in your designs, 136 00:09:20,630 --> 00:09:25,280 but also just to get the correct components that you need really quickly without having to copy and 137 00:09:25,280 --> 00:09:26,560 paste and stuff like that. 138 00:09:26,960 --> 00:09:30,640 So that is how we've built out the profile page thus far.