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
We're almost done creating our visual prototype. Let's finish things up!
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
Let's finish up this interface.
0:00
On the last screen,
0:01
we just need an iOS navigation
bar with a few standard controls.
0:03
Let's head back to this
Facebook iOS 10 Figma file.
0:08
And I'll hit 1 to zoom out.
0:13
And let's zoom in on the navigation bars.
0:15
It's this area right here just
under the label components.
0:19
I'll hold down Z and
just kind of circle this area.
0:24
There are a lot of choices here,
0:29
but we want users to be able
to go back to the gallery.
0:31
And we also want an edit button and
a share button.
0:35
So let's grab this navigation bar
that's just third from the top.
0:39
And we can do that just by double-clicking
anywhere in the blank area
0:45
of the title bar.
0:49
And let's copy that to our clip board.
0:51
Go over to our file.
0:53
We'll close up the editing screen,
open the sharing screen.
0:56
Open the app section, and
inside we will paste that.
1:01
Then let's just move that up.
1:05
Make sure it's centered, and
just wait until it snaps to the screen.
1:10
Now if we zoom in on that.
1:16
That looks correct, cool.
1:20
Now we need two icons
on the right side here.
1:23
So let's go back to
that Facebook document.
1:26
And we'll zoom back out.
1:30
And on the right side here,
there are what are labeled Glyphs.
1:32
Let's zoom into that area.
1:38
Zoom in a little more.
1:40
And I only want to use blue
icons to match the title bar or
1:42
Navigation Bar, I should say.
1:47
So let's start out with
some of these over here.
1:51
And let's use this blue pencil icon for
sharing.
1:56
So I'll double click that, copy it.
2:00
And then let's just paste it in here.
2:07
Then let's go back and
zoom out a little bit.
2:12
For the sharing button,
let's use this icon from Safari, this
2:17
square box with an arrow pointing upward
which typically means share in most apps.
2:23
We'll copy that.
2:29
And then again in the app group,
we will paste it.
2:32
Now we just need to move
these into position.
2:35
So let's move this first one
over to the right here, and
2:43
just kind of generally get
these into the right spots.
2:47
And then let's zoom in, and
actually make sure that these are correct.
2:52
So, that looks good.
2:58
I want that to be aligned
to the bottom right there.
2:59
This one I'll move over by pixel.
3:05
And move it down, so
its aligned at the bottom there.
3:08
That looks good.
3:12
And now we can delete these
other two place holder icons.
3:14
In the layers pallet,
they're just labeled icon one and two.
3:17
So let's just select that one and
that one and
3:20
then hit the delete key on your keyboard.
3:23
Now if we zoom back out.
3:28
And we'll just frame this up.
3:31
You can see that we now have this
finished interface with a back button,
3:34
an edit button.
3:39
If we want to go back
to the editing view and
3:40
a share button if we want to
share this image to other places.
3:43
A bit of honesty, I am not totally sure
3:49
if this correctly follows Apple's
human interface guidelines.
3:51
In fact, it probably doesn't,
but that's okay for
3:56
the purposes of this quick prototype.
3:58
It's not really something I'd be worried
about at this point of the process
4:01
because it's often a quick fix to
just change out an icon like this.
4:05
So now let's make sure everything is kind
of well organized in the Layers palette.
4:10
The Share button should really
be inside of the App group.
4:16
And in fact, let's put it
inside of this navigation bar.
4:22
And we'll just close these all up.
4:26
And then hit the 1 key on your
keyboard to frame everything up.
4:30
And that's it for these for these screens.
4:36
This is good enough for a first iteration.
4:39
But in a real app, we'd likely
have many more screens than this.
4:43
More editing controls,
a screen showing a sharing menu,
4:47
different versions and
states each screen can be in and so forth.
4:51
But this should be enough
to get the idea across.
4:55
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