1 00:00:00,610 --> 00:00:01,870 Hey, everyone, and welcome back. 2 00:00:02,140 --> 00:00:05,770 So what I want to talk about next is something called recipe's. 3 00:00:06,160 --> 00:00:07,960 Now I call them recipe's. 4 00:00:07,960 --> 00:00:10,870 People call them a bunch of different things. 5 00:00:11,170 --> 00:00:16,750 They could just be like a collection of components to make like different types of pieces that you can 6 00:00:16,750 --> 00:00:17,340 put together. 7 00:00:17,650 --> 00:00:24,670 What I've done here is I'm going to actually create different variations of the ways, like our vertical 8 00:00:24,670 --> 00:00:26,500 product cards with look within our app. 9 00:00:27,280 --> 00:00:31,690 So one way to do that is to, you know, take your component. 10 00:00:31,690 --> 00:00:35,020 I have just a default large product card here. 11 00:00:35,020 --> 00:00:36,940 You'll see that over here, large default. 12 00:00:37,780 --> 00:00:40,300 And I'm going to take my friend tool. 13 00:00:40,300 --> 00:00:43,510 I have it sorted already and I'm going to go to phone. 14 00:00:45,730 --> 00:00:46,370 And there you go. 15 00:00:46,420 --> 00:00:46,720 So. 16 00:00:47,840 --> 00:00:51,530 This is the size of the majority of our designs are based off of. 17 00:00:52,940 --> 00:00:58,400 I'm actually going to select one of our little grids to substandard ACORN, and what I'm going to do 18 00:00:58,400 --> 00:01:00,590 is I'm going to take that large default card. 19 00:01:01,810 --> 00:01:05,890 And as you can tell, it perfectly sets on that grid. 20 00:01:09,020 --> 00:01:14,480 And then I'm going to take another one, because the way I want to use this card is I want it to be 21 00:01:14,480 --> 00:01:16,220 a swiped container. 22 00:01:18,310 --> 00:01:19,630 So I'm going to actually. 23 00:01:21,180 --> 00:01:26,680 Take these and I'm going to press command option to put them in a frame in that frame. 24 00:01:26,700 --> 00:01:31,550 I'm just going to call this large Swype container. 25 00:01:32,190 --> 00:01:33,360 You can call whatever you want. 26 00:01:35,160 --> 00:01:37,920 Now, I'm going to set this to Autolib. 27 00:01:39,100 --> 00:01:43,540 Because it's just easier for now at least, and I'll show you why. 28 00:01:45,000 --> 00:01:49,650 So I'm spacing out by 16 pixels, I'm going to take my next. 29 00:01:51,490 --> 00:01:55,120 Product and a command C command, we you know, it's that. 30 00:01:56,480 --> 00:02:02,330 I am creating a bunch, so maybe there's like one, two, I think there's five here, you're perfect. 31 00:02:02,360 --> 00:02:04,450 OK, so I can do that. 32 00:02:04,460 --> 00:02:06,350 Now I know that they're all spaced perfectly. 33 00:02:08,570 --> 00:02:11,630 And I am going to actually remove that Autolib. 34 00:02:12,920 --> 00:02:16,730 Now they're just a regular frame, and if I hold command. 35 00:02:18,000 --> 00:02:23,400 Well, I shrink this frame, it's not going to affect anything, and when I want to do is shrink it 36 00:02:23,400 --> 00:02:27,540 to the width of the iPhone frame that I have here. 37 00:02:29,710 --> 00:02:30,470 So there you go. 38 00:02:31,330 --> 00:02:33,220 Everything is going to be clipped. 39 00:02:34,880 --> 00:02:40,740 And I'm creating just a nice, easy way for us to have like a swipe, a bowl container. 40 00:02:41,360 --> 00:02:46,100 Now, if I were to press Manjit, this is what it would look like. 41 00:02:46,130 --> 00:02:48,410 Actually, I think it's fine if I just clip it like that. 42 00:02:50,620 --> 00:02:56,290 So this is what it's going to look like, it's you don't need to make a component, this is more so 43 00:02:56,290 --> 00:03:04,030 for people within your design team to actually have like a point of reference on how certain components 44 00:03:04,030 --> 00:03:04,720 are used. 45 00:03:04,940 --> 00:03:12,790 You can just keep these in one area like I'm going to do here, and you can easily just copy and paste 46 00:03:12,790 --> 00:03:17,560 the whyever design system up and they won't appear in your assets tab because it is in a component. 47 00:03:17,590 --> 00:03:19,780 I mean, we can go ahead and create a component for this. 48 00:03:19,780 --> 00:03:22,510 But I put it this way. 49 00:03:22,510 --> 00:03:24,970 You can keep it up to where you want to do it. 50 00:03:24,970 --> 00:03:30,730 Like you can just say that I want this one to be an instance of large stock pick and sell this one. 51 00:03:30,730 --> 00:03:32,430 I want it to be large scale. 52 00:03:32,560 --> 00:03:35,290 So, I mean, it gives you a lot of flexibility in that aspect. 53 00:03:35,290 --> 00:03:37,810 And if I want to actually prototype something like this. 54 00:03:39,350 --> 00:03:42,350 Let's see if it's going to automatically bring it, yeah, there we go. 55 00:03:42,530 --> 00:03:51,920 So if I want to prototype that, I have it there and this one, I'm going to do protect and click horizontal 56 00:03:51,920 --> 00:03:54,050 scrolling on that go back. 57 00:03:54,770 --> 00:04:01,940 And now I have a beautiful swappable container and that's how I would use the large product card. 58 00:04:02,750 --> 00:04:03,650 So really nice. 59 00:04:04,160 --> 00:04:07,130 So that's one recipe that I would definitely make. 60 00:04:07,130 --> 00:04:09,740 And I'm going to do it here is I'm going to drag that. 61 00:04:11,420 --> 00:04:13,130 Actually, that's Comanche. 62 00:04:14,640 --> 00:04:18,050 I'm clicking into my recipe here, so it'll be right there. 63 00:04:20,500 --> 00:04:29,170 And over here, the recipe will I'm going to win my design, I'm going to go clip content, so it's 64 00:04:29,170 --> 00:04:35,170 going to automatically clip it for me, just like how when we create, like an iPhone frame or mobile 65 00:04:35,170 --> 00:04:39,360 frame or Android frame, it doesn't matter that we were setting that to clip as well. 66 00:04:39,370 --> 00:04:40,990 So it's going to hide it automatically. 67 00:04:41,020 --> 00:04:46,360 So let's remove this perfect now. 68 00:04:48,050 --> 00:04:56,060 We can also create another version where let's create another thing, if, you know, I'm very keen 69 00:04:56,060 --> 00:05:02,360 on actually making sure that everything in my system looks exactly the same. 70 00:05:04,560 --> 00:05:09,420 And then just adjust that spacing between those frames like that manually. 71 00:05:10,610 --> 00:05:18,090 OK, I'm going to do here is I'm actually going to go into my assets that I am going to find my card 72 00:05:18,090 --> 00:05:18,240 here. 73 00:05:18,250 --> 00:05:19,200 So vertical cards. 74 00:05:19,210 --> 00:05:21,840 I want a small default card for now. 75 00:05:22,770 --> 00:05:23,580 So there it is. 76 00:05:24,210 --> 00:05:27,930 Let's go back to our leaders top and there you go. 77 00:05:28,350 --> 00:05:35,940 OK, so when I think about categories and how cards should be filled out, like we can go ahead and 78 00:05:35,940 --> 00:05:37,080 turn on our grid again. 79 00:05:37,920 --> 00:05:45,030 But there may be other aspects of like this container that we aren't thinking about. 80 00:05:48,120 --> 00:05:54,210 We may not have been thinking about aspects here that we really needed, like maybe like a title. 81 00:05:56,300 --> 00:05:58,580 These are automatically set up to be. 82 00:06:00,400 --> 00:06:01,960 Like a 50 percent card. 83 00:06:03,660 --> 00:06:10,530 But here we go, we have our 50 percent card, and even in a recipe, like I said, a recipe isn't necessarily 84 00:06:10,530 --> 00:06:13,020 meant to be like a component on its own. 85 00:06:13,020 --> 00:06:15,900 It's meant to also use, like components and bring them all together. 86 00:06:18,500 --> 00:06:21,860 So I may have like a title, we can adjust that. 87 00:06:25,430 --> 00:06:28,460 And we can set it to like only be. 88 00:06:30,780 --> 00:06:39,510 That long, we can't have another thing that says I see more. 89 00:06:42,370 --> 00:06:48,070 Now, I'm just going right now I'm just going off the top of my head, give interaction, maybe Link. 90 00:06:51,390 --> 00:06:52,650 16 pixels. 91 00:06:54,090 --> 00:06:59,430 And then we can change the color to whatever we want, and in this instance, maybe we choose something 92 00:06:59,430 --> 00:07:00,720 like Gray. 93 00:07:01,760 --> 00:07:02,430 That's fine. 94 00:07:05,970 --> 00:07:13,820 So this is obviously not it's going to be a heading, so heading in 20 pixels, great. 95 00:07:14,160 --> 00:07:21,750 And this can be confined to that side and it's going to be affected by the right. 96 00:07:22,140 --> 00:07:23,870 This is going to be affected by the left. 97 00:07:23,880 --> 00:07:28,800 And then we can take both of these and we can, like, align them in any which way we like. 98 00:07:28,810 --> 00:07:31,380 So of just aligned and based off of their base line. 99 00:07:32,460 --> 00:07:33,350 There we go. 100 00:07:33,780 --> 00:07:34,770 And there you go. 101 00:07:34,800 --> 00:07:38,130 So we have now we're starting to see, like something come together here. 102 00:07:42,380 --> 00:07:49,730 I'm going to actually go ahead and, you know, maybe I'll swap this out for something that is like 103 00:07:49,730 --> 00:07:53,540 a small cell one can be. 104 00:07:56,800 --> 00:08:06,100 Small staff pick, that's a large topic, wrong one small staff pick, and then what I would do here 105 00:08:06,100 --> 00:08:08,080 is I would actually create another frame. 106 00:08:09,380 --> 00:08:12,620 Auctioneer M.G., I'll call this left column. 107 00:08:15,860 --> 00:08:17,660 And I'm going to actually create an auto. 108 00:08:19,520 --> 00:08:31,460 And I want that spacing always to be 16 pixels, so even if I write like 13 inch MacBook Pro, you'll 109 00:08:31,460 --> 00:08:36,780 notice that we start to see these different things actually expand. 110 00:08:36,800 --> 00:08:44,420 So if I'm going to make sure that this is in line with that and that will make that call and expand 111 00:08:44,420 --> 00:08:47,410 and I would do the exact same thing for this right column. 112 00:08:47,420 --> 00:08:49,450 So I'm going to just duplicate X. 113 00:08:49,460 --> 00:08:50,450 I've already made the frame. 114 00:08:50,460 --> 00:08:52,910 I'm just going to rename it to the right column. 115 00:08:54,620 --> 00:08:56,090 And there we go. 116 00:08:56,090 --> 00:08:59,780 Like now we can start creating like a larger list of items. 117 00:08:59,780 --> 00:09:04,460 Maybe we just keep it to four and we show them a larger list once they click to see more just to save 118 00:09:04,460 --> 00:09:05,060 real estate. 119 00:09:05,540 --> 00:09:07,970 But that is one thing we can do. 120 00:09:07,970 --> 00:09:12,830 And I'm just going to actually collect this. 121 00:09:14,770 --> 00:09:19,300 You can even make another frame and just call these products. 122 00:09:22,030 --> 00:09:31,690 And we can create another frame around this and call it text and then create a larger frame and call 123 00:09:31,690 --> 00:09:33,640 this category list. 124 00:09:36,840 --> 00:09:43,440 And there you have it, you have just a very quick way, so let's just come and see. 125 00:09:44,170 --> 00:09:49,170 Let's go in there, take that container out, and now we have another recipe. 126 00:09:49,980 --> 00:09:53,730 And I can just like either copy this, which is easily made. 127 00:09:53,730 --> 00:09:55,880 It already has all our spacing in there. 128 00:09:55,890 --> 00:09:59,820 It has different types of ways that we can make this responsive. 129 00:09:59,820 --> 00:10:00,870 If we wanted to. 130 00:10:01,560 --> 00:10:12,210 We can have a short product text and if we go in there, we can just easily manipulate the. 131 00:10:15,220 --> 00:10:16,160 And there you go. 132 00:10:16,540 --> 00:10:21,010 So that's how I would approach creating recipes just for cards here. 133 00:10:21,220 --> 00:10:23,500 So this is what I've done with our vertical cards.