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
Using smart guides, Figma makes it easy to arrange objects on the canvas.
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
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
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