Start prototyping in Figma - Figma Tutorial

- [Instructor] Figma is a great tool for designing and prototyping micro interactions as it has native built-in prototyping features. And with this features you can create interactive flows and visually show how your micro interactions are triggered and how the users should interact with them. So, let's quickly open Figma and review the basics of this prototyping features. Make sure that you download the proper exercise file with this design so that we can get started quickly. In Figma, when you open your design, you will be by default located in a design section. but for us, we have to create our first prototype connection. And to do that, we'll have to activate the prototype mode by simply clicking on the prototype tab. So, as a designer, you'll have to create a starting point of your micro interaction and you can define it on your own. So, notice how this blue rectangle disappeared next to my first frame. And that means that this screen is going to be the starting point of my micro interaction. We can also change this starting point by simply dragging this rectangle to the second screen as an example. But in our project, it still makes sense to have our first screen as a starting point. Then, you can actually go and hover our layers in your frame and notice how this blue plus icon has disappeared. And we can simply click on it and drag it, and you can see the arrow disappeared, and we can make our first prototype connection. With the Interaction Details window, we can set up all the triggers, transitions, and animations. So by default, it's set to On-click, which means that if we click on our start exploring button, we will navigate to the second screen. We will review this Interaction Details window in more details in the next videos through this course. So for now, I'm just going to close it. I also want to grab this arrow and connect it back to my first screen, so that I can navigate back to the initial frame. When you click on the gray area in your Figma project, you can see all connections that you just created in your file. You are also free to grab this arrow and change this connection to another frame if you have it. But in this case, we'll only have two frames, so let's leave this connection as it was before. You can also grab, for example, this arrow and click on the Delete key and remove the connection. And then, by clicking again on the gray area you can see that we only have one connection remaining. So, I will just select again this back button and connect it back to my first frame. And yeah, this is how we just created a very simple prototyping and connection for our first simple micro interaction with Figma.