1 00:00:00,330 --> 00:00:01,590 Everyone, welcome back. 2 00:00:01,740 --> 00:00:07,580 So what I want to teach you really quickly is just how to create a very quick prototype. 3 00:00:07,950 --> 00:00:10,800 So what I'm going to do is I'm going to create another square. 4 00:00:11,130 --> 00:00:12,070 Surprise, surprise. 5 00:00:12,090 --> 00:00:12,970 So we're going to create a square. 6 00:00:12,990 --> 00:00:14,250 We're going to set it to the middle here. 7 00:00:16,420 --> 00:00:20,830 And we're going to select this frame and we're going to copy and we're going to paste it so under your 8 00:00:20,830 --> 00:00:21,940 command and command. 9 00:00:22,660 --> 00:00:23,170 And there we go. 10 00:00:23,170 --> 00:00:25,360 We have two different. 11 00:00:26,310 --> 00:00:30,990 Frames here, and we're going to rename these frames, so I'm going to select this frame, I'm going 12 00:00:30,990 --> 00:00:36,990 to select my shortcut, which is command are or I can actually just double click on this layer or this 13 00:00:36,990 --> 00:00:39,870 frame and can name this frame one. 14 00:00:41,190 --> 00:00:42,510 And I'm going to name this one. 15 00:00:44,620 --> 00:00:50,860 Frame two now, next thing I'm going to do is I'm going to Click Prototyp. 16 00:00:52,530 --> 00:00:58,290 Now, we don't need to select a device, but if you're on a phone, you can do that if you like, it 17 00:00:58,290 --> 00:00:59,150 looks really nice. 18 00:01:00,270 --> 00:01:05,670 You can set the background, you can set your starting frame in this case, where I'm going to do is 19 00:01:06,000 --> 00:01:09,090 I'm going to select this frame and. 20 00:01:10,210 --> 00:01:14,980 What I can do is I can even select the objects within this frame, so if you had a button, you can 21 00:01:14,980 --> 00:01:18,310 imagine if I click this button, I want to go to this page. 22 00:01:18,620 --> 00:01:21,030 So all you're doing is clicking this and dragging it. 23 00:01:22,090 --> 00:01:24,700 So on click, you'll see the direction details. 24 00:01:24,700 --> 00:01:28,300 And we're going to get into this later in much more detail and depth. 25 00:01:28,570 --> 00:01:31,230 And we're going to talk about how to create some really nice animations. 26 00:01:31,240 --> 00:01:34,570 We're going to talk about how to prototype some really cool prototypes. 27 00:01:34,720 --> 00:01:37,620 And it's going to look pretty, pretty accurate. 28 00:01:37,630 --> 00:01:41,650 It's going to look like it's a coded design or a coded app. 29 00:01:41,890 --> 00:01:43,720 And you'll be able to impress clients. 30 00:01:43,720 --> 00:01:46,030 You'll be able to even press users when you're testing with them. 31 00:01:46,360 --> 00:01:47,620 But this is just the basics. 32 00:01:47,630 --> 00:01:52,960 So let's just show you how to just make a simple click and we can go on from there. 33 00:01:53,350 --> 00:01:57,600 So we're going to select UNCLICK and we're going to navigate to frame two. 34 00:01:57,910 --> 00:02:00,130 And this is going to be just an instant animation. 35 00:02:00,700 --> 00:02:04,150 That's all we're going to do now. 36 00:02:04,450 --> 00:02:07,240 I'm going to click this little play button up here. 37 00:02:08,410 --> 00:02:14,950 To present, that's going to open up a new tab, and this is my prototype, you'll see even when I'm 38 00:02:14,950 --> 00:02:16,870 in here, I can hover over it. 39 00:02:17,590 --> 00:02:22,780 You have prototyping options if you want to kind of fit it to your screen, if you want to show hot 40 00:02:22,780 --> 00:02:23,360 spots. 41 00:02:24,040 --> 00:02:28,070 So if I click anywhere away from here, it'll show me my hot spot. 42 00:02:28,300 --> 00:02:31,150 So if I click on this, it's going to go to my next frame. 43 00:02:33,420 --> 00:02:38,130 If I click, ah, I can restart that, so if I can't go back to the beginning. 44 00:02:39,450 --> 00:02:40,120 Pretty cool. 45 00:02:40,530 --> 00:02:42,690 Now, let's go back I'm going to close this tab. 46 00:02:44,070 --> 00:02:48,630 And I'm actually going to make sure that if I click this, I'm going to go back and I'm going to add 47 00:02:48,630 --> 00:02:55,560 something really cool, I'm going to click Smart Enemy just to give you a sneak preview of what cool 48 00:02:55,560 --> 00:02:57,020 things you're going to be doing in the future. 49 00:02:57,780 --> 00:03:01,140 So smart enemy is actually going to animate this because they're named the same. 50 00:03:01,140 --> 00:03:04,770 So rectangle one and rectangle one, it's going to think they're the exact same layer. 51 00:03:04,920 --> 00:03:08,370 And that means that when this clicks there, it's going to twist. 52 00:03:08,920 --> 00:03:09,690 So let's see. 53 00:03:09,960 --> 00:03:11,040 I click play. 54 00:03:12,660 --> 00:03:16,620 And click here and I'm on my first frame and click it. 55 00:03:18,710 --> 00:03:23,780 And you can fine tune these animations to do some really cool things like buttons, growing, cards 56 00:03:23,780 --> 00:03:25,130 growing, all that kind of stuff. 57 00:03:25,160 --> 00:03:26,630 I'm going to show you how to do that later. 58 00:03:27,350 --> 00:03:32,870 So that's how you prototype easily within fake just by connecting frames if you want to test something 59 00:03:32,870 --> 00:03:34,820 quickly and just to see what it looks like.