[MUSIC]

People say that a picture is worth a thousand words.

Which means that often times a visual can say more than written communication.

A visual prototype like the one that we've created does a better job of illustrating

our intent.

And could save a lot of emails and meetings, even if it's just something that

we're going to throw away or change down the road.

However, we can do even better than just the visual.

Many prototyping tools like Figma can add interactivity.

You define areas that people can click, and

then when they do click you can show a corresponding visual which

simulates the experience of using the app, let's check it out.

Right now, we have three screens from the application arranged in a row.

We need to define these as separate areas using what Figma calls frames.

A frame is similar to a group but frames can be exported or

used as click targets interactive prototypes.

Frames can also be treated as separate screens in an interactive prototype, so

we want to start by making these entire screen groups into frames.

Select the first group in the list, and then in the inspector

change it from a Group to a Frame.

Then do the same thing for the Editing group, make that into a Frame,

and then finally the Sharing group also needs to be a Frame.

On the last screen, this back button and

the text back are separate, but we want to group them together,

so that when we click on them in the interact prototype, it's one click target.

So let's double click this, and double click it again, and now we have this

Back button, and let's hold down Shift and also click on this arrow glyph,

and we'll just group those together, so now they're a Group.

And lets hit 1 to zoom back out, and we'll do select all this stuff, there we go.

Now we're ready to connect all these together into an interactive prototype.

In the inspector at the very top, click the PROTOTYPE tab next to the DESIGN tab.

Now, when we click on a frame or an object inside of a frame,

a circle will appear on the right side, and

we can connect this to another frame.

So let's connect this smaller image of London by double-clicking and

then double-clicking again to go into that subgroup.

And we'll connect this to the editing frame by clicking on that circle and

dragging over to the Editing frame until it's highlighted and then we release.

So now, when we go to the interactive prototype, if someone taps on

this photo of London, it will bring them to this frame.

Next, select the screen or the App group inside of the Editing screen,

and lets take that circle and we'll drag it over to the Sharing screen.

So if we tap anywhere on the screen, sort of just to dismiss these editing controls,

it would take us to its finished photo screen where we can share it.

And then finally on the Sharing frame, we should connect up some of these buttons.

So let's double click and then double click again on this Back button.

And we want this to go back to the Gallery, so

were all done editing this photo, we wanna go back to the Gallery,

we'll click drag on the circle and we'll point that to the Gallery frame.

Or alternatively if we wanna go back to the Editing mode for

this photo, we'll take this little pencil icon, click that,

drag that over to Editing, And release,

and so now we can fluidly navigate between these three screens.

Now, in the upper right, click the Present button,

which looks like a play button, to see this in action.

And it will take just a second to load up.

It's brought us to the Sharing screen,

we hit this Back button, we'll see the gallery view.

And if we try to click anywhere where there's no interactivity,

Figma will highlight the areas that we can click.

So, let's click on this photo of London, and we've applied some edits,

we're on the editing screen.

Again, if we click anywhere inside the screen here,

it will bring us to the next screen.

And if we don't, it will highlight where we should be clicking.

And then finally we have the last screen here,

and we can go back to Edit, or we could go back to the Gallery.

Creating an interactive prototype like this adds a lot of

dimensionality to a visual.

It can give stakeholders a much better sense

of what an app will actually feel like once it's finished.