How to prototype in Figma

Hi everyone, in this video we're going to prototype, we're going to put it in a phone, and when we click stuff it moves through to the next frame. I'm also going to get a little bit lost, a little bit into this video, something goes wrong, we're going to fix it together so we all learn, let's get started, it's exciting time. 

How do we prototype it? We'll do some basic stuff first, what we need to do first of all is go from Design, which we've been at for a long time now, go to 'Prototype', and what we're going to do is have the 'Home page' selected. We'll start with this one, and what you'll notice is this little dot. This little dot is important, we're going to click, hold, and drag, drag, drag a little arrow, and go, and stick them on there, give it a play. You can just kind of click it and then let go. 

Now that's it, it's going to do some basic stuff to start with, we'll do the other pages. It's the same with this one, click on the name at the top, and say, you, got the name at the top of this one, and there you go. All right, let's prototype it, prototyping it, it's called Present, you see it here, the little Play button, click on that and it will open up. You'll notice another tab, there's our original, we've gone off to this other tab, and what happens is, it'll present from whatever page you are on, so that's not what I want, I want to go back here, and if I go to this Home page here, just click on the word 'Home Page' and then 'Present', it'll basically jump back to that same tab, but at least we're at the Home page now, look at that. 

That's our sweet Home page, so what we're going to do is, just click anywhere, so click once, oh it moved along, click again, 'Checkout' page, what is that? Confirmation page has had a bad day. What is on there that is doing that, shouldn't do that. Let's close it down, start again, what is on there, nothing. Something's weird happening, I'll leave in the course, in case it happens to you, Home page, Present, yours is probably going to have this little load screen as well, there we go. You, you, you, giant something in the way, I'll figure that out later on, but it's kind of working. We're getting all the time, black box, you wait there, and I'll figure it out so you all know, wait there. 

All right, I'm back, I have no idea, is the answer, did you-- already saw it in fast mode. Basically what I normally do in a situation like that, is I will start, I'll start going through and deleting stuff, I figured with some svg doing some weird stuff, so I deleted that, and I tested it and it still was broken, let's double check, it's still broken, no, it's fixed, weird, I don't know then. So all I did was delete it and then undo it, and it came back to life. 

So just in case something else happens, and it's not as easily fixed, like that took me ages, it took me about five, ten minutes, to kind of figure out what was going on, what I normally do is, actually I go through and I just delete stuff, and then test it, delete stuff and test it, delete stuff and test it to see, eventually something that I've deleted, kind of shows that it was causing the problems. That's normally how I do it, and then I gave up on that, so I just made another version of it, and that worked, and in this case I just deleted it and undid it, and it came back, probably closing the program, opening it back up, restarting machine, anyway. 

All right, that was a little bit off a tangent, but these things happen. So it kind of worked, let's go to our Present now, forget this is-- back in the zone, Dan, back in the zone. So we're going to preview it, and we've done some basic prototyping, where you click anywhere, and it moves along, guess, the end, and it's kind of stuck, so what you can do, if you kind of wiggle around, you'll notice that, after a while some other little options appear, restart, which is R, it's a really common one, get back to the beginning, so you can kind of work through your prototype again. You can manually get through it, can you see down here, page 1, 2, 3, 4. 

Other things that might be useful is, under these options here you might just, you might want to go like 100%, or full screen, to get rid of all the kind of Chrome around the outside. What else we want to do? That's kind of it. One thing you need to know is that, you don't need to close this every time, I feel like, when you finish, you close this down, and then come back over here, but you don't have to, leave it open, just always go back to it, because what happens is it updates, see this, if I go in here, and I decide to change the color of this-- oh, good point, this happens quite a bit, when you're new you're like, "Where did it all go?", because you're on Prototype, remember to go back to the Design, there's three at the top here, we'll look at Inspect later in the course, but whenever you're missing your colors or fonts, it's because you're stuck on Prototype, not Design. 

So I'm going to go in here, and I'm going to say, you are now going to be another color. Now I'm going to jump out to this tab that's still open, and you'll notice, if I go back to my pages, it updates. If you're using the browser version, it's handy to get this tab, pull it out and put it on another desktop. On the desktop version, it's kind of stuck in here at the moment, I can't kind of pull it apart, so just toggle back between the two. 

If you do want to toggle back between the two, the shortcut is, there's no shortcut, that is a bit of a pain, there might be in the future, check-- you want to Google the thing that says "Figma present," what's it called, yeah, "present shortcut," it doesn't exist at the moment. What we do is we use the 'Command' on a Mac, 'Ctrl' on a PC, and 'Command 1' is back to your little Home screen. We've been clicking on that, Command 2 is whatever the second tab is, that's considered the first one, two, three. So in my case I'm going to be going back between Command 2 and Command 3, Command 2, Command 3, Command 2, make a change, Command 3, and it updates instant, so you can keep that open. 

Another thing to note is, you can't prototype across pages, so I go to my 'Home' page, I go to 'Prototype', and I'm like, I want to go to page something over here, that's not possible, so it's only between frames on a page. What you'll notice in mine as well, is that I have this nice Chrome around the outside of an iPhone 8, that might look ancient when you're watching this, but you can change that, and let's, let me show you how. 

So let's be on 'Prototype', let's go to 'Show Prototype Settings', or have nothing selected, you end up at the same place. So having something selected, 'Prototype', click this button, or just click in no man's land, and you can say, "All right, I don't want an iPhone 6, I want," I don't know what Google Pixel, like I own a 4 at the moment, why come here for 4? You have to look at a really old 2, and you can pick through the different colors, not that they change much on an iPhone, but obviously, on iPhone 8, instead of the gold one, you can pick the space gray one or the silver one. It's basically the backs of the phone, so not a whole lot changes. 

You can change the background color, you can go from portrait to landscape, and when I go into Preview now, let's have a look, hey, doesn't quite work on landscape, but you get the idea. If you can't see any of these, it's because when you started, remember, way back in the beginning, when we went, "All right, make our first frame," and we picked one of these defaults, they're attached to this. So even if you've just typed out, you've started with a desktop version, and you've typed it out and made it a phone size, it doesn't connect up anymore. 

So you might have to make phone sizes, and copy and paste them on, if you want that Chrome there, it's, it doesn't help the testing very much, other than it looks cool. You'll also notice that our desktop version's, so let's have a look, 'Desktop', click on this one, even though there's nothing on this, so click on 'Home page', on the frame, to annoy, click on the 'Home Page', you'll notice, in Prototype, Prototype Settings, there's nothing in here, so I can go and say, that I want it to be a desktop, like a laptop, and it's not there. So there's only a few things, you can actually wrap that Chrome around at the moment. 

All right, one last thing before we go, is if you have been following me, what I want you to do is go back to Mobile, and I want you to break all of these prototypes here, because I don't want to just click anywhere, I want it to go to Product Details, only when I click the Learn More button, and I want to go straight from Buy Now, all the way to the Checkout page, when that button's clicked. At the moment it's using the entire frame. 

So to get rid of it you can do two things, what I tend to do is just click on the little arrow, hit 'Del', or you can click on your frame here, and say, under 'Prototype', can you see, it says, we've applied this interaction called Tap Checkout, you just hit minus, ' - ', it's the same thing, whether you want to delete it, by selecting and deleting it, or selecting the frame, then just minusing any interactions, you've got edit. 

So we're back, we've gone nowhere, we added them but we deleted them, let's jump into the next video, and we will break up the buttons, but we'll also add some animations with our transitions. All right, I'll see you there.