Adding Interactivity to Prototypes

[MUSIC] 0:00 People say that a picture is worth a thousand words. 0:04 Which means that often times a visual can say more than written communication. 0:07 A visual prototype like the one that we've created does a better job of illustrating 0:12 our intent. 0:17 And could save a lot of emails and meetings, even if it's just something that 0:18 we're going to throw away or change down the road. 0:23 However, we can do even better than just the visual. 0:27 Many prototyping tools like Figma can add interactivity. 0:30 You define areas that people can click, and 0:35 then when they do click you can show a corresponding visual which 0:38 simulates the experience of using the app, let's check it out. 0:42 Right now, we have three screens from the application arranged in a row. 0:46 We need to define these as separate areas using what Figma calls frames. 0:53 A frame is similar to a group but frames can be exported or 0:59 used as click targets interactive prototypes. 1:04 Frames can also be treated as separate screens in an interactive prototype, so 1:08 we want to start by making these entire screen groups into frames. 1:13 Select the first group in the list, and then in the inspector 1:20 change it from a Group to a Frame. 1:26 Then do the same thing for the Editing group, make that into a Frame, 1:31 and then finally the Sharing group also needs to be a Frame. 1:35 On the last screen, this back button and 1:40 the text back are separate, but we want to group them together, 1:43 so that when we click on them in the interact prototype, it's one click target. 1:48 So let's double click this, and double click it again, and now we have this 1:55 Back button, and let's hold down Shift and also click on this arrow glyph, 2:00 and we'll just group those together, so now they're a Group. 2:05 And lets hit 1 to zoom back out, and we'll do select all this stuff, there we go. 2:09 Now we're ready to connect all these together into an interactive prototype. 2:16 In the inspector at the very top, click the PROTOTYPE tab next to the DESIGN tab. 2:20 Now, when we click on a frame or an object inside of a frame, 2:29 a circle will appear on the right side, and 2:35 we can connect this to another frame. 2:40 So let's connect this smaller image of London by double-clicking and 2:44 then double-clicking again to go into that subgroup. 2:50 And we'll connect this to the editing frame by clicking on that circle and 2:55 dragging over to the Editing frame until it's highlighted and then we release. 3:02 So now, when we go to the interactive prototype, if someone taps on 3:09 this photo of London, it will bring them to this frame. 3:14 Next, select the screen or the App group inside of the Editing screen, 3:19 and lets take that circle and we'll drag it over to the Sharing screen. 3:27 So if we tap anywhere on the screen, sort of just to dismiss these editing controls, 3:33 it would take us to its finished photo screen where we can share it. 3:39 And then finally on the Sharing frame, we should connect up some of these buttons. 3:44 So let's double click and then double click again on this Back button. 3:49 And we want this to go back to the Gallery, so 3:56 were all done editing this photo, we wanna go back to the Gallery, 3:59 we'll click drag on the circle and we'll point that to the Gallery frame. 4:04 Or alternatively if we wanna go back to the Editing mode for 4:11 this photo, we'll take this little pencil icon, click that, 4:15 drag that over to Editing, And release, 4:20 and so now we can fluidly navigate between these three screens. 4:25 Now, in the upper right, click the Present button, 4:30 which looks like a play button, to see this in action. 4:34 And it will take just a second to load up. 4:39 It's brought us to the Sharing screen, 4:42 we hit this Back button, we'll see the gallery view. 4:46 And if we try to click anywhere where there's no interactivity, 4:50 Figma will highlight the areas that we can click. 4:55 So, let's click on this photo of London, and we've applied some edits, 4:59 we're on the editing screen. 5:04 Again, if we click anywhere inside the screen here, 5:06 it will bring us to the next screen. 5:09 And if we don't, it will highlight where we should be clicking. 5:12 And then finally we have the last screen here, 5:16 and we can go back to Edit, or we could go back to the Gallery. 5:20 Creating an interactive prototype like this adds a lot of 5:25 dimensionality to a visual. 5:29 It can give stakeholders a much better sense 5:31 of what an app will actually feel like once it's finished. 5:34