Preview
Video Player
00:00
00:00
Navigating the Canvas
6:39Inside a Figma file, design objects are manipulated in a space called the canvas. In order to use Figma effectively, it's essential to understand how to navigate the canvas.
These images are going to become
the first screen in our app,
0:00
which will be a simple image gallery
of all the available photos.
0:04
Right now, these images are way too large,
and they're overlapping one another.
0:09
Let's zoom out a bit, re-size them,
and then rearrange them.
0:15
In the upper-right,
we can adjust the zoom level.
0:21
Click the arrow next to
the text that says 100%.
0:27
And choose Zoom to Fit.
0:32
Alternatively, you can press the plus and
0:36
minus buttons on your keyboard
if you want to go in and out.
0:40
And if you want to Zoom to Fit at any
time, you can also just press the 1 key.
0:46
You can also hold down control on Windows,
or command on Mac, and
0:52
use the scroll wheel on your mouse or
trackpad to zoom in and out.
0:57
Once you can see the images,
click and drag in any blank area
1:05
to select them if they're
not already selected.
1:11
And you can drag a selection
box around them.
1:16
Then, hover over one of the corners until
you see the arrows that are pointing
1:21
away from one another, in a diagonal.
1:26
And then click and drag.
1:29
Now, this will not keep the aspect ratio.
1:31
So in order to do that,
we need to hold down
1:34
the shift key simultaneously,
and then resize them.
1:38
That way, they won't get stretched or
cropped in any way.
1:45
Once they're down to
a more manageable size,
1:50
hit the 1 key again so
that we Zoom to Fit.
1:53
And I am actually going to
just zoom out a little bit so
1:59
that we have some room to work and
rearrange these.
2:03
There we go.
If you want to pan around the canvas at
2:07
any time, you can hold the space bar and
2:11
then click and drag to pan around.
2:16
Now, let's arrange these
images into a nice grid.
2:22
I'm going to move these around so
we can see all of them.
2:26
So let's just click one
of these to select it.
2:29
And then you can click and
drag to move it around.
2:33
So let's get all of these
away from one another.
2:39
One of these images,
the one with the crazy colors of London,
2:45
is an image we'll use
later on in the edit view.
2:49
So let's just move that aside for now.
2:52
And as for the remaining four images,
let's arrange these into a nice grid.
2:56
So I'm going to start with this
colorful image of Disney World and
3:04
put it at the top.
3:09
And then two of these images
Are kind of long ways.
3:12
They're in portrait view
rather than landscape view.
3:17
So let's put these side by side.
3:21
And we'll drag to select them.
3:27
Move this image of
the Golden Gate Bridge out of the way.
3:30
And let's select these two.
3:35
Hold down Shift and resize them so
3:37
that they're the same width
as this mage of Disney World.
3:42
And you'll see these smart
guides that kind of snap so
3:47
that we know that
the left side is aligned.
3:51
And then we'll resize.
3:53
And there's the right side.
3:57
And then, we can put this image
of San Francisco underneath.
3:59
And again, the smart guides will
tell us when the distance between
4:03
these images is equidistant to
a distance between the top two.
4:08
Great.
So now,
4:14
let's pull in some of the phone
elements from the Facebook file.
4:15
In the upper left, click the Menu,
and choose Back to Files.
4:21
Then, go to Drafts.
4:29
Click the Menu icon on the Facebook file,
which is just these three dots here.
4:32
And then choose Open in new tab.
4:41
Then, in the first tab here,
go back to the photo app.
4:47
And open the Prototype file again.
4:55
And now, we have our two Figma files open.
5:00
So first,
let's take a look at this Facebook file.
5:04
Here, there are lots of
design elements from iOS 10.
5:08
Everything you'd need to create
a High-Fidelity mock-up.
5:13
For now, we just need one of
these phones on the left side.
5:16
If you hold down the Z button,
and click and
5:23
drag a box around an area on the canvas,
it will zoom into that area.
5:27
These phones are in various groups.
5:35
And while we only need one phone,
we still want it's other elements,
5:38
like the screen and
the subtle shadow that's below it.
5:43
Double-click on the phone
that you would like to use.
5:48
I am going to use this one that's
white with the silver finish.
5:52
So, I will just double-click it.
5:57
And double-clicking will select
a sub element of this whole group.
6:01
So, now on the left side, you can see
that we have this group of devices,
6:07
but double-clicking on this one in
particular has selected this subgroup.
6:13
Now, let's copy that by hitting
Ctrl+c Windows, or Cmd+c on Mac.
6:19
And then, over in our file, hit Ctrl+v
6:27
on Windows, or Cmd+v on Mac to paste it.
6:32