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. We’ve got time today to create one extra 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. 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. Repeat this process once more to create a connection from the back button we created at the bottom-left of each screen. Then click on the group, and click and drag the connection handle over to your third screen-the photo page. 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. This time, repeat the process to link from the block of photos in your photostream Frame. This means that when the user taps the “Sign In” button in our prototype, they will be taken to the “Photo Stream” screen. Then click and hold on that circular handle, and drag an arrow over to the second screen to create a connection. First, select the “Sign In” button in your Login screen. This handle allows us to set which screen that object leads to when it is selected. 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.
You can hit Escape to deselect everything. 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. 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”. The first thing we need to establish is which will be the first screen in our prototype. When we present the prototype, the user is then able to click on linked elements to move around the app. Prototyping in Figma works by creating links between Frames and elements within Frames. 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. You can also double-click the name label above the Frame itself.
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. We’ve given our three screens descriptive titles: “Login Screen”, “Photo Stream”, and “Photo Page”. Rename the Frames in your app flowīefore creating any prototype, it’s a good idea to make sure that your Frames are clearly named. So far in this course, we’ve worked exclusively in the “Design” tab of the Inspector (the area on the right of the window).
#Prototype design how to#
Learn how to create a prototype in Figma.