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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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