Learning objectives:
- Learn how to create a prototype in Figma
- Create connections between Frames and Layers
- Present and share your prototype
- Practice switching between Design and Prototyping modes
- Design a slide-out menu to add to your prototype
Time to complete: 30 minutes
Today’s tutorial
1. Access the prototyping options
So far in this course, we’ve worked exclusively in the “Design” tab of the Inspector (the area on the right of the window). Time to click the “Prototype” tab:
2. Rename the Frames in your app flow
Before creating any prototype, it’s a good idea to make sure that your Frames are clearly named. We’ve given our three screens descriptive titles: “Login Screen”, “Photo Stream”, and “Photo Page”. To rename a Frame, all you need to do is double-click its name in the Layers panel (left-hand side), type the new name, and hit Enter. You can also double-click the name label above the Frame itself.
Good naming conventions are especially important in larger projects—just imagine trying to build a 50-screen prototype if all of your Frames are named some variation of “iPhone 8 Copy 42”!
3. Set a starting Frame
Prototyping in Figma works by creating links between Frames and elements within Frames. When we present the prototype, the user is then able to click on linked elements to move around the app.
The first thing we need to establish is which will be the first screen in our prototype. Under the “Starting Frame” heading in the Inspector, click the drop-down menu and select the name of the first Frame—in our case, “Login screen”.
Note: if you can’t see the “Starting Frame” setting in the Inspector, make sure that you’ve got the “Prototype” tab selected, and check that no Frames or Layers are selected. You can hit Escape to deselect everything.
4. Create a connection
If we select Layers or Frames while the “Prototyping” tab is open, we get an extra, circular handle on the right-hand edge of the object. This handle allows us to set which screen that object leads to when it is selected.
Let’s use this to create a connection. First, select the “Sign In” button in your Login screen. Then click and hold on that circular handle, and drag an arrow over to the second screen to create a connection. This means that when the user taps the “Sign In” button in our prototype, they will be taken to the “Photo Stream” screen.
5. Create another connection
This time, repeat the process to link from the block of photos in your photostream Frame. You’ll need to make sure that grid of images is grouped—if it’s not already grouped, click and drag to select them all, and hit ⌘G. Then click on the group, and click and drag the connection handle over to your third screen—the photo page.
6. Create connections for the “back” button
Repeat this process once more to create a connection from the back button we created at the bottom-left of each screen. So the back button on the Photo page will link back to the Photo stream, and the Photo stream will link back to the login screen. This is pretty rudimentary functionality for a back button, but it will help to give your users a feel for how they will move around the app.
7. Create a screen with a menu overlay
We’ve got time today to create one extra screen. This gives us an opportunity to practice moving between the Design and Prototype tabs in the Inspector, and to get a feel for managing our prototype connections while adding to the app design.
- Duplicate your Photo page Frame by selecting that Frame and hitting ⌘D (Mac), or CtrlD (PC). Did you notice that when you duplicated the Frame, the connection from the back button was also carried across to the new Frame? Any connections that originate from the duplicated Frame will also be copied over. This can save work, but it can also create problems if the connections aren’t updated where necessary.
- In this case, we want to remove this link. To delete the connection, click and drag on one end or the other. A little “X” symbol will appear—release the mouse and the connection is gone.
- Time to create a simple menu that slides out from the right-hand edge of the screen. Select and group all the elements within the Frame except the nav bar, and shift them all over to the left, so that the edge of the photo now lines up with the right-hand edge of the first column of the grid:
- Finally, use the skills you’ve gained over the past few days to reproduce this design for the slide-out menu. All you’ll need are text boxes, lines, rectangles, and the align and distribute commands at the top of the Inspector’s Design tab.
![Create a screen with a menu overlay]()
Have a go at doing this independently, but if you get stuck, check out the reference file linked to at the end of today’s tutorial.
As a quick side note, we’ve chosen this kind of menu layout to optimise for the “thumb zone”: most users find it easier to reach the bottom of the screen than the top when holding their phones one-handed. By placing menu items towards the bottom of the screen, we increase the usability of the interface.
8. Create a connection to the hamburger menu icon
The final step is to create connections to and from the menu screen. This will allow us to demonstrate the slide-out menu functionality in the prototype. Create these connections:
- The hamburger button on the Photo page, linking to the Menu screen
- The hamburger button on the Menu screen, linking back to the Photo page
9. Test your prototype
You can launch your prototype by hitting the “Present” button at the top-right of the Figma interface. Do this now to check that all your connections are working as planned!
Note that in the latest version of Figma, it’s possible to present your prototype in a device container. While in the “Prototype” tab, select “iPhone 8” from under the “Device”. Then, simply click the “Present” button again! One of the advantages of using a simulation like this is that it gives a more accurate experience of the size and scale of screen elements.
10. Share your prototype
Get a friend or family member to try using the prototype. Voilá, you’re doing user testing! Watch them use the prototype. Do they intuitively know where to click? What ideas does watching them give you for how to improve the design?
By the way, all you need to do to share the prototype via link is to copy the link from the address bar while you’re in “Present” mode, and send it on via email or instant message. Easy!
That’s the end of Day 5! Remember to save today’s work to your Version History. It might feel like we’ve been taking baby steps, but you’ve already learned heaps about Figma’s interface, its core set of functions, and the principles of how to build prototypes. Tomorrow, we’ll consolidate all of those skills by converting this design to a tablet or desktop version.
Today’s bonuses
+ Sample file with today’s completed assignment
+ Full details of the new prototyping features released in Figma 3.0
