1 00:00:01,260 --> 00:00:03,510 Hello and welcome back. 2 00:00:03,960 --> 00:00:08,010 Now we're going to jump right into creating music flows in just a second. 3 00:00:08,160 --> 00:00:12,030 What I want to do is I want to make our workflow just a bit better. 4 00:00:12,060 --> 00:00:13,500 We have these pieces here. 5 00:00:14,620 --> 00:00:20,680 Let's go over to our lawyers panel, if you notice that they're just basically their own kind of rectangles 6 00:00:20,680 --> 00:00:25,060 and stuff like that, and that kind of isn't that good for reusability. 7 00:00:26,340 --> 00:00:30,750 We're actually going to pull some of these out and we're just going to create like a little component's 8 00:00:30,750 --> 00:00:34,610 page, that's what we're going to name it components. 9 00:00:35,520 --> 00:00:39,560 And I'm going to show you how to create some reusable components pretty quickly. 10 00:00:41,630 --> 00:00:44,170 OK, so let's pull some of these out. 11 00:00:48,150 --> 00:00:50,940 You can delete that, we can delete that. 12 00:00:52,500 --> 00:00:58,380 I'm not sure about all the different types of components I'm going to need, but this is a good starting 13 00:00:58,380 --> 00:00:58,730 point. 14 00:00:59,780 --> 00:01:01,910 I think that's fine. 15 00:01:01,950 --> 00:01:04,430 Actually, that's pretty repetitive. 16 00:01:04,940 --> 00:01:06,590 Maybe we'll create some. 17 00:01:08,580 --> 00:01:10,290 Header copy. 18 00:01:10,320 --> 00:01:17,970 Maybe this is some other copy, so we're kind of just creating some concepts based off of our user flows, 19 00:01:17,970 --> 00:01:21,870 our interfaces don't necessarily need to be super detailed right now. 20 00:01:22,740 --> 00:01:25,200 We can refine those over time. 21 00:01:26,740 --> 00:01:32,930 And we're going to definitely refine those when we start our wire frames now how to create a component. 22 00:01:33,460 --> 00:01:37,150 So this is going to be our screen background. 23 00:01:38,230 --> 00:01:42,190 And what we're going to do is we're going to right click or you can actually go up to here the short 24 00:01:42,190 --> 00:01:44,680 form phrase option commands. 25 00:01:44,870 --> 00:01:50,550 OK, so if we just command Z options, that cave creates that as a component. 26 00:01:50,740 --> 00:01:54,940 And what we can do here is we can create a new one. 27 00:01:54,940 --> 00:01:59,500 I've option shift clicked and that is now an instance. 28 00:01:59,500 --> 00:02:01,240 You'll notice it in the panel down here. 29 00:02:02,250 --> 00:02:08,160 So this is now an instance and you can create new components from this instance, but one interesting 30 00:02:08,160 --> 00:02:15,320 thing is if I click that and I start modifying that, it modifies the actual instance as well. 31 00:02:15,330 --> 00:02:20,130 So the instance will inherit pretty much everything from the master component. 32 00:02:20,280 --> 00:02:23,760 It's a great way to create a lot of clarity within your product. 33 00:02:23,790 --> 00:02:29,610 It's a great way to actually just have some consistency even when you're thinking about user flows or 34 00:02:29,610 --> 00:02:30,600 something as simple as that. 35 00:02:30,750 --> 00:02:31,800 So that's why I'd like to do. 36 00:02:33,570 --> 00:02:35,640 Let's group rename these as. 37 00:02:36,840 --> 00:02:41,310 Also, command are and we're selecting all of them, and we'll just call these text. 38 00:02:42,980 --> 00:02:53,540 And will group them in a frame and that frame is essentially what we'll call that text and option command, 39 00:02:53,540 --> 00:02:55,630 could you create a component? 40 00:02:55,640 --> 00:02:56,140 And there you go. 41 00:02:56,150 --> 00:02:57,290 We have a text component. 42 00:03:00,060 --> 00:03:03,540 And all of a sudden now we can start putting things together. 43 00:03:05,490 --> 00:03:08,520 So we have a tax component this year for the arrow over here. 44 00:03:10,670 --> 00:03:14,710 OK, for the arrow, we'll call this one large product. 45 00:03:16,060 --> 00:03:20,670 So large products option command king. 46 00:03:22,960 --> 00:03:25,180 We'll keep these very. 47 00:03:26,230 --> 00:03:31,420 Close together because, you know, they help us with our flow, so we have that. 48 00:03:32,620 --> 00:03:36,860 We'll call this headline option, OK? 49 00:03:37,820 --> 00:03:45,940 And really, there is no perfect way of doing this, if you want to follow along, I advise you to just 50 00:03:45,940 --> 00:03:51,010 use our resource that we have there and you can definitely start creating components as well. 51 00:03:52,160 --> 00:03:53,500 So we have large product. 52 00:03:53,500 --> 00:03:54,280 We have. 53 00:03:55,550 --> 00:04:05,030 Text, maybe this is field, so field option Kapanke, there we go, we got a field and we can even 54 00:04:05,030 --> 00:04:06,230 make the smaller. 55 00:04:09,700 --> 00:04:12,220 It sets a scale currently, but if I. 56 00:04:13,300 --> 00:04:15,550 Adjust the constraints to top and bottom. 57 00:04:17,880 --> 00:04:20,910 Now it's going to actually work with the frame. 58 00:04:22,200 --> 00:04:23,480 OK, that's great. 59 00:04:25,070 --> 00:04:30,470 These are small products, so I'm going to batch reading them so I have them all selected. 60 00:04:31,630 --> 00:04:36,520 Commander and small products, small products. 61 00:04:38,120 --> 00:04:43,610 And option Kapanke, with some selected, will create a frame and a component, and that component will 62 00:04:43,610 --> 00:04:46,580 name its small products. 63 00:04:48,640 --> 00:04:49,060 Great. 64 00:04:49,390 --> 00:04:50,820 Um hmm. 65 00:04:50,920 --> 00:04:54,340 Should we call this so we can just call this confirmation? 66 00:04:56,930 --> 00:05:05,580 And this one scoop the field together, oops, let's put the button in there. 67 00:05:06,140 --> 00:05:06,840 Perfect. 68 00:05:07,100 --> 00:05:12,560 So this one is going to be our button option quick and perfect. 69 00:05:12,570 --> 00:05:14,690 So now we kind of have our own UI here. 70 00:05:16,270 --> 00:05:21,850 Let's see what else we can do, we can make everything pretty equal, this one, if we want to have 71 00:05:21,850 --> 00:05:25,530 it like as a carousel, we'll just keep it like that for now. 72 00:05:26,200 --> 00:05:32,770 Everything else looks so good, we're ready basically to start creating our own components. 73 00:05:34,320 --> 00:05:38,100 And we're ready to start creating our user flows. 74 00:05:40,800 --> 00:05:47,100 So what we're going to do here, just give you just a sample on how this works. 75 00:05:50,920 --> 00:05:52,600 Option and dragging. 76 00:05:55,660 --> 00:06:03,480 So if I have that there, I have a headline, I have another one here. 77 00:06:05,710 --> 00:06:07,870 I can alter this component if I want. 78 00:06:09,260 --> 00:06:10,420 That's totally fine. 79 00:06:13,960 --> 00:06:17,230 That's good, we can take this component. 80 00:06:19,230 --> 00:06:21,330 And and I have a buddy. 81 00:06:23,930 --> 00:06:30,140 And they go, we've created like a really simple concept page here, and it's kind of like our messy 82 00:06:30,140 --> 00:06:35,330 sketches that we had before and now we can start creating more components or we can start creating more 83 00:06:35,330 --> 00:06:36,170 screens from this. 84 00:06:36,500 --> 00:06:38,870 Next, we're going to jump into actually creating a user for.