Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:30 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 The Basics of Prototyping in Figma

Let’s begin by learning the first steps for prototyping in Figma. It’s super simple.

1.2 The Basics of Prototyping in Figma

Let's begin by learning the first steps in Prototyping with Figma and it's super super simple. So I have a demo file and it's actually a copy of a sample file that's provided by Figma. We have a few frames right here. Frames are, basically, art boards if you've used other software, like maybe XD or Sketch, they have something called art boards. They're, basically, single entities in the infinite canvas on which you can have your own elements, text, content, whatever it is. Well, in Figma they're called frames. So the way Prototyping works really is you start by designing your product, your website, your app, whatever it is. You start by designing it here, working inside the Design tab. And when you're ready to create a prototype, you go to the Prototype tab. Now, here selecting elements has a different effect than when we are working in the Design mode. So here, for example, if I select this Login button I get information about it and, I can change those properties, I can do all sorts of things with it. But when I switch to Prototype mode I get a different kind of information about it and different options for it. So, basically, what you do is you connect various elements with art boards or with frames. And when you go into the actual presentation of the prototype clicking that particular element will take you to that art board. So to give you a very simple example, let's say that when I click this Login button, I want the prototype to take me to this homepage, right. So what I have to do is simply click on this little circle, click and drag to the art board that I wanna show. And when I get over it Figma automatically snaps that into place, right. So let's see another example, let's say that when I want to click this menu icon, it takes me to this page which has an off canvas menu, right. So I can select the menu, I can, again, click and drag and it's gonna take me here. So once you've made all your changes then you click this Present button. And that's gonna open up a new tab with the actual presentation or the actual prototype of you're file. So clicking on the Login button, yeah, takes me to my homepage. Clicking this menu icon takes me to the other frame, which presents the off canvas menu. And it's really, really simple. Once you're in here you can, basically, scroll through your presentation by using these arrows. You can restart your presentation. And you also have some features for sharing the prototype, display options, zooming options, and so on. But that's, basically, how you prototype in Figma. Now, this is, of course, a very simplistic view. As I was saying in the introduction video, Prototyping Figma recently got updated with some awesome new features. Which I'm gonna show you in the following lessons in this course. But as a starting point this is what you do, basically. Now, let's talk about the first of the new features that were introduced in Figma Prototyping and that is the vice frames. I'll cover that in the next lesson, see you there.

Back to the top