▶️ Beginner 3: Build prototypes

In the last tutorial of our Figma for beginners series, we created a single screen of our app. To save time, we've built out the other screens in our application, including a menu, profile, and an interface for searching the app. Let's create an interactive prototype to put it all together.

Prototypes are a great way for us to visualize how our final app will look. They let us define pathways, explore interactions, and test out ideas, before we invest in building the real thing. Guide to prototyping in Figma →

We can create multiple prototypes within a file and keep them organized on different pages. Let's duplicate the page of our existing designs to get started.

Create prototypes

Click on the Prototype tab in the right sidebar to switch to prototype mode. Here we create connections between frames so users can navigate the prototype, like a real application.

Prototype connections are made up of three parts. A hotspot where the connection begins, the connection itself which stores the interaction details, and the destination.

Top-level frames are frames directly on the canvas. In a prototype, this would be an individual screen in your design. For Figma to consider a frame as a top-level frame, you must not place it within other layers, such a group.

The destination has to be a top-level frame, but a hotspot can be any layer: a top-level frame, a nested frame or component, a group, or a single layer.

Create connections

We want to create an interaction from the menu icon to the menu page. Because the menu icon is nested, we need to double-click to select it.

Once the connection node appears, click the connection icon to create an arrow and drag it over the destination frame. Release to complete the connection.

Let's create an interaction from the menu back to the home page. Select the home text layer, click and drag the arrow back to the home page.

Set interaction

Currently, our connection use the default Instant interaction setting. We'll cover the specifics of these interactions a little later on. Let's see how our prototype looks so far. With the home frame selected, click the present icon to open it in presentation view.

At the bottom of the page we can see we only have two frames in our prototype, instead of all four. Once you add at least one prototype connection, Figma will only include frames with connections in presentation view.

If we click on the menu icon, Figma switches to the menu frame. If we click the home option on the menu, it switches back to the home page. Great! Now that we have the basic mechanics working, we can customize the interaction.

Back in the editor, we can view other aspects of the connection in the Interaction details menu. Here, we can select a trigger for the transition - like tap, click, or hover - as well as the action and destination.

Choose transition animations

We want users to be able to access the menu from a few places in the app, so this interaction needs to feel accessible. With the default instant animation, we lose the context of where we were in the app, and how we got there.

Animations guide users through flows, and communicate relationships between different parts of our application.

There's a few ways we could tackle this problem in Figma. We could create an overlay that makes the menu appear above our other screens. Or we could use smart animate to reveal the menu when you drag the current screen to the right.

Both approaches make our menu feel easily accessible, and establish a hierarchy that positions the menu on a different level than our other screens.

This also allows us to explore some of Figma's super cool prototyping features. But, they would take us well off the beginners path.

1. Move in animates the menu so that it appears over the top of our existing screen. We're being shown some more information, but we don't feel like we've moved to a new location. This feels like a good fit.
2. The menu icon is on the left-side of our screen, so our menu should move in from the left. Click in the interaction details panel to set the direction.
3. We can set the duration to control how the speed of the transition, and use easing to make our animation feel less robotic. Learn more about prototype easing curves →
4. When we return back to the home frame, the animation should be the reverse. We'll select Move out and choose the to move the menu back out.

Now we have our first set of interactions!

1. We can access the menu from both the search and profile screens, so let's create those interactions next. The Interaction details menu shows our last animation settings, let's update these to match the interaction.
2. We'll repeat this process for the profile screen. We don't need to update the animation as Figma had applied the most recent one again.
3. Now we'll create the interaction going back from the menu to the profile page, updating the animation to match.
4. We can only access search from the home screen. We'll create a connection from the search icon that opens the search page. We'll use the push animation to make it feel like we are moving laterally between these two screens.
5. Tapping cancel should take us back to the home page. We'll create a connection with a push animation that moves in that direction.

Now that we have a working prototype, we're ready to get some feedback from the other members of our team. We can invite them to the prototype itself.

Share prototypes

We can share our prototype with our team by sending them a link.

1. Click the Share button in the toolbar.
2. Update the link sharing setting from only people invited to the file to Anyone with the link and set to can view.
3. Click copy link to add the link to our clipboard.
4. Share this with the team.

Our team members avatars will show up in the toolbar as they join. We can click on someone's avatar to observe their actions as they move through the prototype. Observation mode is great when you're running a usability test!

Comment on prototyps

Anyone can add feedback, suggestions, or questions to prototypes using comments. Select to access the comment tool. Now we can click on a spot in the prototype to share our thoughts.

• It looks like Jenny is adding some questions around the other pages listed in the menu. She's also pointed out that there is no way to interact with posts on the feed.
• Rhyan's made a great observation that we're missing a back icon on the menu page, which might make it easier for users to dismiss the menu.
• Stella loves this photo of Yuna!

If we switch back to the editor and press C to select the comment tool, we can see the comments our team made on the prototype on our frames. This allows us to collect feedback in one place, incorporate advice, and resolve any outstanding comments.

Incorporate feedback

As Jenny mentioned, we want a way for our users to interact with posts. Let's add some icons to allow users to like, comment, and bookmark posts. Let's go to the components page.

Here's some components we created earlier. We've placed them in a horizontal auto layout frame, and made them into a component. We can then place an instance of this component inside our the post component.

When we switch back to our prototype, we can see the changes we made to the main component reflected in our instances. And because we built our feed using auto layout, our posts have adjusted accordingly.

We'll finish up by incorporating Rhyan's feedback. We'll drag a back icon from the Assets panel into our menu frame. Then we'll switch to the prototype tab and add an interaction to this icon. We'll also update the action to Back.

We did it! We built an interactive prototype of our designs, explored animations, and incorporated feedback from our design team.

In our next video, we'll prepare our file for sharing assets with our writers and developers. We'll explore creating thumbnails, navigating the file as a viewer, copying code from the inspect tab, and exporting assets for production.