Preview
Video Player
00:00
00:00
Arranging Design Elements
9:49Using smart guides, Figma makes it easy to arrange objects on the canvas.
Now that we've pasted
this phone into our file,
0:00
we need to match our content to the phone.
0:04
We want to resize our photos, and
we do not want to resize the phone at all.
0:07
That's because the phone is
already at the correct pixel
0:15
resolution of the real device,
so we want to maintain that.
0:19
So select the photos, And
0:23
then in the layer palette,
right click on the selection,
0:28
to bring up the context menu,
and choose Group Selection.
0:33
Alternatively, you can do this
by creating a selection and
0:40
then hitting Ctrl + G on Windows or
Cmd + G on Mac.
0:46
Then name the group by
double-clicking on its name,
0:51
and we'll type in Photos and hit Enter.
0:56
Finally, click and
drag this group in the layers palette,
1:01
and move it so that it's above the phone.
1:06
That way,
when we move it around in the canvas,
1:11
it will appear on top
of the phone whereas,
1:15
if it's below it the phone will appear
in front of it, so let's move that back.
1:18
Now with this group selected,
we can hold down Shift and
1:25
resize these, and
start moving this into place.
1:31
So let's hit Z and drag a box
around this to zoom into this area,
1:36
get a little closer here, there we go.
1:41
And we want to align these
with the actual screen,
1:45
which is about four pixels
in from the white edge.
1:50
So, if I actually zoom
in really close here.
1:55
You can see that there is a screen here,
but
2:01
there' s one, two, three, four pixels
2:06
between the actual display and
the white edge.
2:10
So we wanna move these photos so that
they're perfectly on top of the screen.
2:16
And we're four pixels in on the top and
left side, and then we need to
2:23
resize this group of photos so
that it's the same on all four sides.
2:27
So, we'll just pan over to the right here,
and
2:34
I'm doing this by just
scrolling on my track pad.
2:38
Again, you can hold down the space bar and
click and drag if you prefer that.
2:41
And you'll notice that I am actually
a little away from the right side.
2:49
So I'm going to hit 1 to zoom back out.
2:55
I'll hold down Z to zoom back into
the bottom right corner here.
2:59
There we go.
3:07
And we actually need to make this a little
bit bigger, so that it hits this corner.
3:10
And it should snap to the screen,
there we go.
3:19
Now we've got that perfect four pixels
on the right side, And on the left side.
3:24
But now these images are kind
of spilling off of the screen.
3:33
So let's kinda move them so that they,
Are where we want them to be.
3:37
So let's zoom in and again,
3:45
to select something that is inside
of a group, simply double click.
3:48
I'll hold down the shift key, and
3:53
also click the picture of London there and
that will select both of these.
3:55
Let's just move these up a bit, And
4:01
let's try to maintain
that 4 pixel distance.
4:06
So there is one two three four, and
4:12
you can see that there is kind of a half
pixel there, and sometimes this will
4:14
occur when you are working with Bitmap
images and other objects in Figma.
4:20
So let's just hold down Shift and
resize this upper photo.
4:25
And we might not be able
to get it perfect, but
4:31
now it's aligned to the pixel grid.
4:33
And it should be the same on
the other side that's good, and
4:38
now we'll just click this photo here.
4:42
Zoom out a little bit, And
also select this photo so
4:45
we have these two photos selected.
4:49
Zoom back in, And
we'll just move these up by pixel.
4:52
So now we have that perfect
four pixel distance.
4:57
So let's zoom back out, and
5:04
now we kinda have this large
gap between these two photos.
5:05
So I'm going to make this photo a little
larger, make this photo a little larger.
5:10
Now they're touching one another, But
5:17
we can resize them by one, Two and
5:24
then one, Two, and now we have a little
5:30
bit of a gap between them, there we go.
5:34
So let's just move this image of
the Golden Gate Bridge up into place,
5:40
and as we get it closer and
closer to these two images.
5:45
You can see that it kinda
snaps into place and
5:50
tiny little number fours appear in red,
and
5:54
that number four means it's four
pixels away from those two images.
5:57
So there's one between bottom and
the top, and
6:02
that's telling us that it is equidistant.
6:06
So it's that same four-pixel
distance that we want.
6:10
So we just release,
now we have the exact same distance here
6:15
as we have here, and it looks a lot nicer.
6:22
And these borders look very intentional.
6:28
Now we still have the issue of this
6:31
image hanging over the bottom
edge of the screen.
6:34
We can fix that using
what's called a mask.
6:37
In the Layers Palette,
Drag the photos group so
6:41
that it's inside of the iPhone group,
6:48
And make sure it's at the top of
this group above everything else.
6:55
Then right click on the Screen
layer just below it,
7:01
and choose Use as Mask.
7:07
Now, everything above this mask
7:10
layer will be clipped at the edges.
7:15
Now let's duplicate this Screen
layer by having the Screen
7:23
layer selected, and
just copying and then pasting.
7:28
And on this one that's below,
right-click on it again,
7:35
And again, choose Use as Mask and
7:42
this will change that duplicate
layer back to a normal layer,
7:45
which will give us a background for
the photos.
7:51
Otherwise, it's just going straight
through to the canvas background.
7:56
Finally let's change the naming
of some of these groups.
8:00
This top grouping should be renamed so
that it's the title of this
8:04
particular screen in our application,
which is just a gallery.
8:09
So we'll double click this and
just type Gallery and
8:13
hit Enter Then lets
8:18
group all of these iPhone layers
together So everything below photos and
8:24
screen, Just right click and
choose Group Selection,
8:31
And we'll rename this, iPhone.
8:37
And that way we know, what's the phone,
and what's kind of our application,
8:42
and then what the name of this entire
screen is within the application.
8:48
Finally, let's group the Photos layer and
the Screen layer together.
8:54
And I'll do this using
the hotkey this time.
9:00
Again, on Windows that is Ctrl + G and
on Mac this is Cmd + G.
9:03
And I'll double-click that to rename it,
and let's call this App.
9:09
And now this is much better organized,
we know exactly what the screen is,
9:15
what's our application, and
what's just the phone, itself?
9:20
I made things a little easier on
us by keeping the images that I
9:25
selected at just two aspect ratios.
9:29
But if you want to take things further,
try bringing in images that
9:33
are all different sizes, and
see if you can come up with a solution.
9:37
We have one screen of the app, but
9:41
next we'll create the remaining
screens and then link them together.
9:44