Section II:

Part I: create and test a prototype

$1.$ Access the prototyping options

So far in these labs, 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.$ 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.

$4.$ 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.

$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 in this lab 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.

$1.$ 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.

$2.$ 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.

$3.$ 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:

$4.$ 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.