In the last video of our Figma for Beginners series, we created a single screen of our app. To save time, we built up 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. 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. 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. 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 it to select it. Once the connection node appears, click the connection icon to create an arrow, and drag it over to the destination frame. Release to complete the connection. Let's create an interaction from the menu back to the homepage. Select the Home text layer, click Add connection icon, and then drag the arrow back to the homepage. Currently, our connection uses the default Instant interaction settings. We'll cover the specifics of these interactions a little later on. Let's see how our prototype looks so far. 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 are 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 in the menu, it switches back to the homepage. 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 a tap, click, or hover, as well as the action and destination. 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 establishes 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 take us well off the beginner's path. To explore more, search "overlays" or "smart animate" in the Figma Help Center for more information. "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. There are some other animation types you can explore, so give them a try. The menu icon is on the left side of our screen, so our menu should move in from the left. Click the right arrow from the interaction details panel to set the direction. We can also set the duration to control the speed of the transition, and use easing to make the animation feel less robotic. We won't explore these settings now, but you can learn more by searching for "easing" in the Figma Help Center. When we return back to the home frame, the animation should be the reverse. We'll select Move Out and choose the left pointing arrow to move the menu back out. Now we have our first set of interactions. 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. We'll repeat this process for the profile screen. We don't need to update the animation, as Figma has applied the most recent one again. We'll need to create the interactions going back from the menu to the profile page, updating the animation to match. We can only access search from the home screen, so 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. Tapping cancel should take us back to the home page. We'll create a connection with the push animation that moves in that direction. Now that we have a working prototype, we're ready to get some feedback from other members of the team, we can invite them to the prototype itself. We can share our prototype with our team by sending them a link. Click the share button in the toolbar. We'll update the link sharing settings from "only people invited to the file" to "anyone with the link" and set to "can view." Perfect. Now we can click Copy Link and share this with our team. Our team 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. Anyone can add feedback, suggestions, or questions to prototypes using comments. Click the comment icon to access the comment tool. Now we can click on a spot in the prototype to share our thoughts. It looks like Jenny added some questions around the other pages listed in the menu. She's also pointed out that there's no way to interact with posts on the feed. Ryan 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. As Jenny mentioned, we want a way for our users to interact with our 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 autolayout frame and made them into a component. We can then place an instance of this component inside of our 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 autolayout, our post have adjusted accordingly. We'll finish up by incorporating Ryan's feedback. We'll drag a back icon from the assets panel into our menu frame. We'll then switch to the prototype tab and add an interaction to this icon, we'll also update the action to back. Users can access the menu from any page. The back action allows us to automatically return users to the previous page without having to create separate connections. 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 panel, and exporting assets for production.
