Prototyping in Figma

 

Welcome to another figma tutorial in this article, we'll be covering the basics of prototyping within figma interactive prototypes allow you to demonstrate, how a design will behave.

This is useful for design critiques or for helping others visualize, how a design might look and feel once the final product is built in order to assemble a prototype.

You can make your designs, but first we need to have our design produced. By clicking from the design tab to the prototype tab at the top of the properties panel, we may enter a prototype mode and create our prototypes there.

This is where you will construct and edit a prototype of your design, the first step in creating a prototype is determining where to start in this example we would like users to tap on the thumbnail image for the Great Smoky Mountains National Park in the first frame we'll start by selecting that image with the image selected we see a blue circular node appear on the right side of the element. 

This indicates where a prototype connection can begin by clicking on this node and dragging our mouse a connection arrow appears we can drag this connection to any top-level frame on our page, except the elements parent frame when we release the mouse click figma will create a connection between our thumbnail element and the destination frame.

You can also remove connections by simply clicking on prototyping the connection arrow dragging it to an empty area on the canvas and releasing it.

Let's go ahead and undo that since we want that connection for this example once we make our first connection a small blue box with a white arrow will appear on the top left side of our first connected frame this indicates the starting position of our prototype.

If you want to change the starting frame simply click and drag the arrow to a new frame we're going to leave this on the original frame since we would like that to be the starting position. Now that we've created a connection let's open the presentation view by clicking the play icon in the upper right corner of the toolbar to see it in action.

This will open our prototype in a new browser tab in our prototype you'll notice that if we click outside of the thumbnail image which we connected earlier a blue box will flash over the image, this is a visual indicator of a hotspot when you click on an area that was not linked to another frame.
 
Figma will show you which hot spots are available hot spots are useful for. When you want multiple elements within a single frame to connect to different top-level frames, let's click on our thumbnail image hotspot to see how this works as you can see this hotspot takes you to our frame with the zoomed image that we linked earlier here.

However this frame isn't connected to anything else so we can't go any further than this let's return to prototype mode and continue building our connections as you can see, we have a small down arrow at the top of our frame tapping. This should dismiss the enlarged image and return us back to our original starting frame to do this.

We'll select the arrow click and then drag a connection back to our starting frame. Don't worry about the label in the connection arrow right now we will cover this in another article about prototype transitions. Let's return to the presentation view to see our change without even refreshing the tab.

We can see our edits reflected if we click the arrow to dismiss the photo we return to our starting frame you've now learned the basics of prototyping and Figma in our next article we'll finish building our prototype connections and demonstrate how you can use prototyping transitions to make your prototype even more immersive.

Let's review what we learned today inter prototype mode from the tab above the properties panel drag connections from an elements node to top level frames the start arrow and the blue box is where your prototype will begin click the play icon to open presentation view and a new tab