Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Let’s Create a Prototype

So far, we've been looking at UX and UI design, but Figma also works very well as prototyping software. In this lesson, you’ll learn how to use Figma to create prototypes. This is super simple to do, so let me show you how.

3.2 Let’s Create a Prototype

Welcome back to the course, in this lesson you'll learn how to create prototypes in Figma, this is super easy to do. So let me show you how to do that by using the two screens that we've designed in the previous lesson, let's begin. All right, so we have our two screens here and just to make a quick, simple demonstration. I want to set up a prototype so that when I click the green sign up with email button. It's gonna take me to this second screen and when I click the arrow, that's gonna take me back to the first screen. So the way to do that is, you first switch from design mode to prototype mode. Here, you can select which device you wanna preview your prototype on. In my case, it automatically selected a device based on the size of my frames. I can choose a model, depending on the device, you can see a preview here. You can set a custom background and you can also select a starting frame. But first, let's start by creating the prototype. For that you select the element that you wanna interact with, in my case, it's the sign up with email button. And you see this little circle with the blue border, well you just click and drag to the frame that you want to go to. And now this created an interaction, you can select the trigger. So On Tap, On Drag, Mouse Enter, Mouse Leave, you can do a lot with this. I'm gonna keep it simple and I'm gonna select On Tap, Navigate To, Screen 2. I can choose how the animation is gonna be, Instant or one of these other options. Let's select Slide In, and I want this to slide in from the right like so, you can choose an easing, you can choose the animation duration. So once that's done, you can click this play button where it says present. And now that's gonna open up the actual prototype and you'll see our design is being mocked up in this device. And when we click on the button that's gonna take us to the second screen. And now if I wanna go back, I can select my arrow, click and drag the arrow back to Screen 1. Same thing here On Tap, Navigate To Screen 1, but this time I want slide in from the other direction like so. So now I can go back here and you'll see that when I tap It takes me back to the first screen and that's it. That's how easy it is to create a prototype in Figma. Of course, you have a lot of different options here, from different animations. To different triggers, to different actions, you can really do a lot with this. But for this course, I just wanted to give you the basic principle of creating a prototype. Now these prototypes are usually shared with other people, either clients or members of your own team. So, in the next lesson, I'm gonna show you how to share these prototypes and also get feedback on them. So I'll see you there.

Back to the top