WEBVTT

1
00:00:00.300 --> 00:00:04.113
Now that we've pasted
this phone into our file,

2
00:00:04.113 --> 00:00:07.380
we need to match our content to the phone.

3
00:00:07.380 --> 00:00:15.080
We want to resize our photos, and
we do not want to resize the phone at all.

4
00:00:15.080 --> 00:00:19.384
That's because the phone is
already at the correct pixel

5
00:00:19.384 --> 00:00:23.970
resolution of the real device,
so we want to maintain that.

6
00:00:23.970 --> 00:00:28.106
So select the photos, And

7
00:00:28.106 --> 00:00:33.764
then in the layer palette,
right click on the selection,

8
00:00:33.764 --> 00:00:39.550
to bring up the context menu,
and choose Group Selection.

9
00:00:40.990 --> 00:00:46.571
Alternatively, you can do this
by creating a selection and

10
00:00:46.571 --> 00:00:51.270
then hitting Ctrl + G on Windows or
Cmd + G on Mac.

11
00:00:51.270 --> 00:00:56.099
Then name the group by
double-clicking on its name,

12
00:00:56.099 --> 00:00:59.760
and we'll type in Photos and hit Enter.

13
00:01:01.440 --> 00:01:06.540
Finally, click and
drag this group in the layers palette,

14
00:01:06.540 --> 00:01:10.120
and move it so that it's above the phone.

15
00:01:11.540 --> 00:01:15.330
That way,
when we move it around in the canvas,

16
00:01:15.330 --> 00:01:18.470
it will appear on top
of the phone whereas,

17
00:01:18.470 --> 00:01:24.440
if it's below it the phone will appear
in front of it, so let's move that back.

18
00:01:25.814 --> 00:01:31.360
Now with this group selected,
we can hold down Shift and

19
00:01:31.360 --> 00:01:36.320
resize these, and
start moving this into place.

20
00:01:36.320 --> 00:01:41.421
So let's hit Z and drag a box
around this to zoom into this area,

21
00:01:41.421 --> 00:01:44.610
get a little closer here, there we go.

22
00:01:45.810 --> 00:01:50.920
And we want to align these
with the actual screen,

23
00:01:50.920 --> 00:01:55.440
which is about four pixels
in from the white edge.

24
00:01:55.440 --> 00:01:58.100
So, if I actually zoom
in really close here.

25
00:02:01.930 --> 00:02:06.512
You can see that there is a screen here,
but

26
00:02:06.512 --> 00:02:10.966
there' s one, two, three, four pixels

27
00:02:10.966 --> 00:02:16.088
between the actual display and
the white edge.

28
00:02:16.088 --> 00:02:21.950
So we wanna move these photos so that
they're perfectly on top of the screen.

29
00:02:23.340 --> 00:02:27.990
And we're four pixels in on the top and
left side, and then we need to

30
00:02:27.990 --> 00:02:34.110
resize this group of photos so
that it's the same on all four sides.

31
00:02:34.110 --> 00:02:38.280
So, we'll just pan over to the right here,
and

32
00:02:38.280 --> 00:02:41.520
I'm doing this by just
scrolling on my track pad.

33
00:02:41.520 --> 00:02:47.040
Again, you can hold down the space bar and
click and drag if you prefer that.

34
00:02:49.080 --> 00:02:55.710
And you'll notice that I am actually
a little away from the right side.

35
00:02:55.710 --> 00:02:59.740
So I'm going to hit 1 to zoom back out.

36
00:02:59.740 --> 00:03:05.688
I'll hold down Z to zoom back into
the bottom right corner here.

37
00:03:07.988 --> 00:03:08.670
There we go.

38
00:03:10.200 --> 00:03:16.390
And we actually need to make this a little
bit bigger, so that it hits this corner.

39
00:03:19.694 --> 00:03:24.210
And it should snap to the screen,
there we go.

40
00:03:24.210 --> 00:03:32.240
Now we've got that perfect four pixels
on the right side, And on the left side.

41
00:03:33.830 --> 00:03:37.980
But now these images are kind
of spilling off of the screen.

42
00:03:37.980 --> 00:03:45.860
So let's kinda move them so that they,
Are where we want them to be.

43
00:03:45.860 --> 00:03:48.360
So let's zoom in and again,

44
00:03:48.360 --> 00:03:53.010
to select something that is inside
of a group, simply double click.

45
00:03:53.010 --> 00:03:55.750
I'll hold down the shift key, and

46
00:03:55.750 --> 00:04:01.040
also click the picture of London there and
that will select both of these.

47
00:04:01.040 --> 00:04:06.082
Let's just move these up a bit, And

48
00:04:06.082 --> 00:04:09.170
let's try to maintain
that 4 pixel distance.

49
00:04:12.480 --> 00:04:14.887
So there is one two three four, and

50
00:04:14.887 --> 00:04:20.117
you can see that there is kind of a half
pixel there, and sometimes this will

51
00:04:20.117 --> 00:04:25.670
occur when you are working with Bitmap
images and other objects in Figma.

52
00:04:25.670 --> 00:04:29.950
So let's just hold down Shift and
resize this upper photo.

53
00:04:31.530 --> 00:04:33.730
And we might not be able
to get it perfect, but

54
00:04:33.730 --> 00:04:36.600
now it's aligned to the pixel grid.

55
00:04:38.140 --> 00:04:42.640
And it should be the same on
the other side that's good, and

56
00:04:42.640 --> 00:04:45.620
now we'll just click this photo here.

57
00:04:45.620 --> 00:04:49.674
Zoom out a little bit, And
also select this photo so

58
00:04:49.674 --> 00:04:51.760
we have these two photos selected.

59
00:04:52.990 --> 00:04:57.990
Zoom back in, And
we'll just move these up by pixel.

60
00:04:57.990 --> 00:05:02.140
So now we have that perfect
four pixel distance.

61
00:05:04.031 --> 00:05:05.927
So let's zoom back out, and

62
00:05:05.927 --> 00:05:10.630
now we kinda have this large
gap between these two photos.

63
00:05:10.630 --> 00:05:16.450
So I'm going to make this photo a little
larger, make this photo a little larger.

64
00:05:17.620 --> 00:05:24.345
Now they're touching one another, But

65
00:05:24.345 --> 00:05:30.184
we can resize them by one, Two and

66
00:05:30.184 --> 00:05:34.840
then one, Two, and now we have a little

67
00:05:34.840 --> 00:05:39.350
bit of a gap between them, there we go.

68
00:05:40.849 --> 00:05:45.998
So let's just move this image of
the Golden Gate Bridge up into place,

69
00:05:45.998 --> 00:05:50.880
and as we get it closer and
closer to these two images.

70
00:05:50.880 --> 00:05:54.247
You can see that it kinda
snaps into place and

71
00:05:54.247 --> 00:05:57.614
tiny little number fours appear in red,
and

72
00:05:57.614 --> 00:06:02.900
that number four means it's four
pixels away from those two images.

73
00:06:02.900 --> 00:06:06.940
So there's one between bottom and
the top, and

74
00:06:06.940 --> 00:06:10.680
that's telling us that it is equidistant.

75
00:06:10.680 --> 00:06:15.630
So it's that same four-pixel
distance that we want.

76
00:06:15.630 --> 00:06:22.160
So we just release,
now we have the exact same distance here

77
00:06:22.160 --> 00:06:26.720
as we have here, and it looks a lot nicer.

78
00:06:28.637 --> 00:06:30.910
And these borders look very intentional.

79
00:06:31.920 --> 00:06:34.530
Now we still have the issue of this

80
00:06:34.530 --> 00:06:37.790
image hanging over the bottom
edge of the screen.

81
00:06:37.790 --> 00:06:41.830
We can fix that using
what's called a mask.

82
00:06:41.830 --> 00:06:48.471
In the Layers Palette,
Drag the photos group so

83
00:06:48.471 --> 00:06:53.660
that it's inside of the iPhone group,

84
00:06:55.290 --> 00:07:00.510
And make sure it's at the top of
this group above everything else.

85
00:07:01.840 --> 00:07:07.920
Then right click on the Screen
layer just below it,

86
00:07:07.920 --> 00:07:10.488
and choose Use as Mask.

87
00:07:10.488 --> 00:07:15.438
Now, everything above this mask

88
00:07:15.438 --> 00:07:20.750
layer will be clipped at the edges.

89
00:07:23.112 --> 00:07:28.701
Now let's duplicate this Screen
layer by having the Screen

90
00:07:28.701 --> 00:07:33.740
layer selected, and
just copying and then pasting.

91
00:07:35.750 --> 00:07:40.800
And on this one that's below,
right-click on it again,

92
00:07:42.170 --> 00:07:45.346
And again, choose Use as Mask and

93
00:07:45.346 --> 00:07:51.247
this will change that duplicate
layer back to a normal layer,

94
00:07:51.247 --> 00:07:56.180
which will give us a background for
the photos.

95
00:07:56.180 --> 00:08:00.312
Otherwise, it's just going straight
through to the canvas background.

96
00:08:00.312 --> 00:08:04.350
Finally let's change the naming
of some of these groups.

97
00:08:04.350 --> 00:08:09.058
This top grouping should be renamed so
that it's the title of this

98
00:08:09.058 --> 00:08:13.782
particular screen in our application,
which is just a gallery.

99
00:08:13.782 --> 00:08:18.987
So we'll double click this and
just type Gallery and

100
00:08:18.987 --> 00:08:24.104
hit Enter Then lets

101
00:08:24.104 --> 00:08:31.210
group all of these iPhone layers
together So everything below photos and

102
00:08:31.210 --> 00:08:36.270
screen, Just right click and
choose Group Selection,

103
00:08:37.810 --> 00:08:42.700
And we'll rename this, iPhone.

104
00:08:42.700 --> 00:08:48.244
And that way we know, what's the phone,
and what's kind of our application,

105
00:08:48.244 --> 00:08:53.240
and then what the name of this entire
screen is within the application.

106
00:08:54.390 --> 00:09:00.500
Finally, let's group the Photos layer and
the Screen layer together.

107
00:09:00.500 --> 00:09:03.060
And I'll do this using
the hotkey this time.

108
00:09:03.060 --> 00:09:09.253
Again, on Windows that is Ctrl + G and
on Mac this is Cmd + G.

109
00:09:09.253 --> 00:09:14.230
And I'll double-click that to rename it,
and let's call this App.

110
00:09:15.820 --> 00:09:20.897
And now this is much better organized,
we know exactly what the screen is,

111
00:09:20.897 --> 00:09:25.342
what's our application, and
what's just the phone, itself?

112
00:09:25.342 --> 00:09:29.997
I made things a little easier on
us by keeping the images that I

113
00:09:29.997 --> 00:09:33.300
selected at just two aspect ratios.

114
00:09:33.300 --> 00:09:37.620
But if you want to take things further,
try bringing in images that

115
00:09:37.620 --> 00:09:41.780
are all different sizes, and
see if you can come up with a solution.

116
00:09:41.780 --> 00:09:44.330
We have one screen of the app, but

117
00:09:44.330 --> 00:09:48.570
next we'll create the remaining
screens and then link them together.