1
00:00:00,380 --> 00:00:04,560
These images are going to become
the first screen in our app,

2
00:00:04,560 --> 00:00:09,900
which will be a simple image gallery
of all the available photos.

3
00:00:09,900 --> 00:00:15,120
Right now, these images are way too large,
and they're overlapping one another.

4
00:00:15,120 --> 00:00:20,410
Let's zoom out a bit, re-size them,
and then rearrange them.

5
00:00:21,430 --> 00:00:27,620
In the upper-right,
we can adjust the zoom level.

6
00:00:27,620 --> 00:00:32,605
Click the arrow next to
the text that says 100%.

7
00:00:32,605 --> 00:00:35,870
And choose Zoom to Fit.

8
00:00:36,910 --> 00:00:40,450
Alternatively, you can press the plus and

9
00:00:40,450 --> 00:00:45,190
minus buttons on your keyboard
if you want to go in and out.

10
00:00:46,840 --> 00:00:52,240
And if you want to Zoom to Fit at any
time, you can also just press the 1 key.

11
00:00:52,240 --> 00:00:57,840
You can also hold down control on Windows,
or command on Mac, and

12
00:00:57,840 --> 00:01:04,090
use the scroll wheel on your mouse or
trackpad to zoom in and out.

13
00:01:05,320 --> 00:01:10,300
Once you can see the images,
click and drag in any blank area

14
00:01:11,450 --> 00:01:16,160
to select them if they're
not already selected.

15
00:01:16,160 --> 00:01:18,620
And you can drag a selection
box around them.

16
00:01:21,340 --> 00:01:26,270
Then, hover over one of the corners until
you see the arrows that are pointing

17
00:01:26,270 --> 00:01:28,180
away from one another, in a diagonal.

18
00:01:29,280 --> 00:01:31,250
And then click and drag.

19
00:01:31,250 --> 00:01:34,800
Now, this will not keep the aspect ratio.

20
00:01:34,800 --> 00:01:38,375
So in order to do that,
we need to hold down

21
00:01:38,375 --> 00:01:43,086
the shift key simultaneously,
and then resize them.

22
00:01:45,935 --> 00:01:48,780
That way, they won't get stretched or
cropped in any way.

23
00:01:50,540 --> 00:01:53,360
Once they're down to
a more manageable size,

24
00:01:53,360 --> 00:01:57,930
hit the 1 key again so
that we Zoom to Fit.

25
00:01:59,200 --> 00:02:03,530
And I am actually going to
just zoom out a little bit so

26
00:02:03,530 --> 00:02:07,760
that we have some room to work and
rearrange these.

27
00:02:07,760 --> 00:02:11,760
There we go.
If you want to pan around the canvas at

28
00:02:11,760 --> 00:02:16,610
any time, you can hold the space bar and

29
00:02:16,610 --> 00:02:20,970
then click and drag to pan around.

30
00:02:22,810 --> 00:02:26,280
Now, let's arrange these
images into a nice grid.

31
00:02:26,280 --> 00:02:29,420
I'm going to move these around so
we can see all of them.

32
00:02:29,420 --> 00:02:33,020
So let's just click one
of these to select it.

33
00:02:33,020 --> 00:02:37,553
And then you can click and
drag to move it around.

34
00:02:39,587 --> 00:02:41,971
So let's get all of these
away from one another.

35
00:02:45,152 --> 00:02:49,104
One of these images,
the one with the crazy colors of London,

36
00:02:49,104 --> 00:02:52,180
is an image we'll use
later on in the edit view.

37
00:02:52,180 --> 00:02:54,390
So let's just move that aside for now.

38
00:02:56,307 --> 00:03:02,580
And as for the remaining four images,
let's arrange these into a nice grid.

39
00:03:04,440 --> 00:03:09,740
So I'm going to start with this
colorful image of Disney World and

40
00:03:09,740 --> 00:03:10,780
put it at the top.

41
00:03:12,680 --> 00:03:17,900
And then two of these images
Are kind of long ways.

42
00:03:17,900 --> 00:03:21,870
They're in portrait view
rather than landscape view.

43
00:03:21,870 --> 00:03:24,630
So let's put these side by side.

44
00:03:27,642 --> 00:03:28,940
And we'll drag to select them.

45
00:03:30,800 --> 00:03:33,570
Move this image of
the Golden Gate Bridge out of the way.

46
00:03:35,858 --> 00:03:37,710
And let's select these two.

47
00:03:37,710 --> 00:03:42,110
Hold down Shift and resize them so

48
00:03:42,110 --> 00:03:47,540
that they're the same width
as this mage of Disney World.

49
00:03:47,540 --> 00:03:51,320
And you'll see these smart
guides that kind of snap so

50
00:03:51,320 --> 00:03:53,910
that we know that
the left side is aligned.

51
00:03:53,910 --> 00:03:55,210
And then we'll resize.

52
00:03:57,244 --> 00:03:59,290
And there's the right side.

53
00:03:59,290 --> 00:04:03,760
And then, we can put this image
of San Francisco underneath.

54
00:04:03,760 --> 00:04:08,850
And again, the smart guides will
tell us when the distance between

55
00:04:08,850 --> 00:04:13,640
these images is equidistant to
a distance between the top two.

56
00:04:14,710 --> 00:04:15,800
Great.
So now,

57
00:04:15,800 --> 00:04:21,140
let's pull in some of the phone
elements from the Facebook file.

58
00:04:21,140 --> 00:04:27,770
In the upper left, click the Menu,
and choose Back to Files.

59
00:04:29,620 --> 00:04:31,550
Then, go to Drafts.

60
00:04:32,850 --> 00:04:39,580
Click the Menu icon on the Facebook file,
which is just these three dots here.

61
00:04:41,160 --> 00:04:43,310
And then choose Open in new tab.

62
00:04:47,069 --> 00:04:54,000
Then, in the first tab here,
go back to the photo app.

63
00:04:55,360 --> 00:04:57,290
And open the Prototype file again.

64
00:05:00,285 --> 00:05:03,350
And now, we have our two Figma files open.

65
00:05:04,840 --> 00:05:08,410
So first,
let's take a look at this Facebook file.

66
00:05:08,410 --> 00:05:13,370
Here, there are lots of
design elements from iOS 10.

67
00:05:13,370 --> 00:05:16,880
Everything you'd need to create
a High-Fidelity mock-up.

68
00:05:16,880 --> 00:05:21,830
For now, we just need one of
these phones on the left side.

69
00:05:23,320 --> 00:05:27,550
If you hold down the Z button,
and click and

70
00:05:27,550 --> 00:05:33,550
drag a box around an area on the canvas,
it will zoom into that area.

71
00:05:35,000 --> 00:05:38,390
These phones are in various groups.

72
00:05:38,390 --> 00:05:43,140
And while we only need one phone,
we still want it's other elements,

73
00:05:43,140 --> 00:05:47,570
like the screen and
the subtle shadow that's below it.

74
00:05:48,696 --> 00:05:52,780
Double-click on the phone
that you would like to use.

75
00:05:52,780 --> 00:05:57,830
I am going to use this one that's
white with the silver finish.

76
00:05:57,830 --> 00:05:59,290
So, I will just double-click it.

77
00:06:01,282 --> 00:06:07,290
And double-clicking will select
a sub element of this whole group.

78
00:06:07,290 --> 00:06:13,030
So, now on the left side, you can see
that we have this group of devices,

79
00:06:13,030 --> 00:06:19,930
but double-clicking on this one in
particular has selected this subgroup.

80
00:06:19,930 --> 00:06:27,660
Now, let's copy that by hitting
Ctrl+c Windows, or Cmd+c on Mac.

81
00:06:27,660 --> 00:06:32,454
And then, over in our file, hit Ctrl+v

82
00:06:32,454 --> 00:06:37,390
on Windows, or Cmd+v on Mac to paste it.