Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.3 hours
140786 adam noonan thumbnail figma 02 400x277px 102417
  • Overview
  • Transcript

3.2 Prototyping in Figma

Moving on from a basic design workflow, in this lesson you’ll learn how to do prototyping in Figma.

3.2 Prototyping in Figma

Hello and welcome back to this course. In this lesson, you're going to learn about prototyping in Figma. Before we get into that though, I want to show you the rest of the pages that I've designed for our fictional app. So right here, we have the log in screen that you saw previously. The only thing that I added was this top status bar that you would find in iOS. And I grabbed that from this iOS 10 GUI system Figma file that I grabbed from the web for free. You'd be surprised of how many resources you can find for Figma, along with Sketch, or Adobe XD, or Photoshop, or whatever it is. So I just copied it from here, put it here, and called it a day. The next screen is the app screen. Very simple, this is a demo app after all. So the only reason I created all of these pages is that I get to show you how the prototyping works. Then we have a Create account screen, where I added two extra inputs, one for confirm password. Or actually, password, confirm password, and one for the name. And the name, this is an instance of the input component where I changed the text and I activated that icon. And finally we have the forgot password screen, with just email address and reset password. All right, so let's talk about prototyping. Exactly what is prototyping? Well, prototyping is, basically, creating a working copy of your app, or website, or whatever it is. So you can actually do this without writing any line of code from your design software. Well, not all of them support this feature. For example, Adobe XD supports it, but Sketch doesn't, yet. But Figma does, so it's really useful, let's say this app is a real project, right? And you wanna show it to the client, but you don't wanna write any code for it. You just want to focus on the design. And what you can do is create interactions. So, for example, clicking the sign in button, [COUGH] excuse me, will take you to the app screen. Or clicking the forgot password link will take you to the forgot password screen, right? So [COUGH] you basically create this interaction that the client can see. He gets an understanding of how the app or the website will work, what links will take to what pages, and so on. So he can basically navigate his website even before it's coded, which is very cool. Now to start prototyping, there are two steps. First, you must enter prototype mode. And what you do here, basically, is you select an element that will link to another page. For example, when I click the sign in button, I must be taken to the main app screen. So what I do Is I select the element, and you can see this little handle here. So I just click and drag to the screen or the frame that I want to show. And as you can see, this snaps automatically when I approach a frame. So I'm gonna just do that. Next, what else? I have the forgot password, right? So I'm gonna select this and when I click this, it needs to take me to the forgot password screen. Again, I click and drag, and I link this element with this frame. Then I need the Create account link to take me to the Create account screen. Then, in the Create account screen, this link back to login will take me back to my initial screen. And the same goes for this bit. Back to login takes me back to the first screen. So this is how our interactions currently look like. Now to see it in action, you simply hit the Present button. All right, in here, you're in presentation mode. You have access to all of your frames. You can cycle through them manually, like this. You can choose how you want to display the images. Mine is set to fill area by scaling up and down, but you can also display at 100%. So now if I click the sign in, it's gonna take me to the dashboard. If I click Forgot password, it's gonna take me to the Recover password page. If I click back to login, it's gonna take me back to my original page here. And if I hit this link, it's gonna take me to the Create account page. Also, clicking this will take me to my login page. So this is how prototyping works, basically. It's a really useful feature, especially in meetings with clients. But not only that, I can also use this inside your team to brainstorm, to see your final project, to see the interaction between elements, and so on. Now another part of collaborating with your team is getting design feedback. And Figma actually makes this super easy with a comment system. We'll cover that in the next lesson.

Back to the top