Figma prototype how to#

All youвЂ™ll need are text boxes, lines, rectangles, and the align and distribute commands at the top of the InspectorвЂ™s Design tab.

Finally, use the skills youвЂ™ve gained over the past few days to reproduce this design for the slide-out menu.

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:

Time to create a simple menu that slides out from the right-hand edge of the screen.

A little вЂњXвЂќ symbol will appear-release the mouse and the connection is gone. To delete the connection, click and drag on one end or the other.

In this case, we want to remove this link.

This can save work, but it can also create problems if the connections arenвЂ™t updated where necessary. 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.

Duplicate your Photo page Frame by selecting that Frame and hitting вЊ D (Mac), or Ctrl D (PC).

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). Design a slide-out menu to add to your prototype.Practice switching between Design and Prototyping modes.

Create connections between Frames and Layers.

Figma prototype how to#

Learn how to create a prototype in Figma.