Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Many prototyping tools like Figma can add interactivity. You define areas that people can click on, and then when they do click, you can show a corresponding visual, which simulates the experience of using the app.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up