1
00:00:00,161 --> 00:00:03,907
FIGMA is a free web based tool
that you use in your browser so

2
00:00:03,907 --> 00:00:06,670
there's no need to install any software.

3
00:00:06,670 --> 00:00:10,926
To follow along,
head over to figma.com and

4
00:00:10,926 --> 00:00:16,190
you should see a webpage that
looks similar to this one.

5
00:00:17,320 --> 00:00:20,670
There are desktop versions available
if you prefer that instead.

6
00:00:20,670 --> 00:00:25,150
And there are also some paid
plans with additional features.

7
00:00:25,150 --> 00:00:27,167
However, it's free to get started.

8
00:00:27,167 --> 00:00:31,764
To create an account, click Sign Up
in the upper right corner and

9
00:00:31,764 --> 00:00:34,710
follow their sign-up process.

10
00:00:34,710 --> 00:00:40,294
Or if you already have an account,
feel free to sign in.

11
00:00:40,294 --> 00:00:46,590
Once your logged in you'll be greeted with
a screen that looks similar to this one.

12
00:00:46,590 --> 00:00:51,990
It has a few images in the middle,
probably just these first three and

13
00:00:51,990 --> 00:00:54,980
not these three that I have at the top.

14
00:00:54,980 --> 00:01:00,600
And on the left there's
a sidebar going down the side.

15
00:01:00,600 --> 00:01:04,190
This whole screen is what's
called the files view.

16
00:01:04,190 --> 00:01:09,750
On the left side you should
find a Drafts section.

17
00:01:09,750 --> 00:01:13,670
And this is a place for
files that haven't been categorized yet.

18
00:01:13,670 --> 00:01:18,375
In the middle,
each one of these rectangles is

19
00:01:18,375 --> 00:01:22,365
a file with a preview image and a label.

20
00:01:23,485 --> 00:01:29,095
A file is very similar to a file you might
work with in a program like Photoshop or

21
00:01:29,095 --> 00:01:30,205
Illustrator.

22
00:01:30,205 --> 00:01:35,022
It's a single unit of visual
composition within Figma.

23
00:01:35,022 --> 00:01:41,360
We could create a file and
just let it sit in this drafts folder.

24
00:01:41,360 --> 00:01:47,160
With all these other templates and samples
but lets properly categorize it first.

25
00:01:48,170 --> 00:01:53,138
On left side, we can create
a new team using the New team

26
00:01:53,138 --> 00:01:56,280
button at the bottom left corner.

27
00:01:56,280 --> 00:02:01,251
I already have a team called TreeHouse, so

28
00:02:01,251 --> 00:02:08,580
I am just going to create a new team,
and I'll call it my team.

29
00:02:08,580 --> 00:02:10,580
But you can name yours
whatever you'd like.

30
00:02:10,580 --> 00:02:13,041
So I'll hit Create Team.

31
00:02:13,041 --> 00:02:16,400
And it will ask you to choose a team plan.

32
00:02:16,400 --> 00:02:20,310
But let's just say let's get started for
free that's fine.

33
00:02:20,310 --> 00:02:25,136
And on the left here you can see I have
created this new team called My Team

34
00:02:25,136 --> 00:02:28,850
in addition to a team I
already have called TreeHouse.

35
00:02:28,850 --> 00:02:35,000
In Figma multiple people can be
invited to a team as team members.

36
00:02:35,000 --> 00:02:37,946
And they can share Figma
files among one another and

37
00:02:37,946 --> 00:02:39,940
collaborate on them in real time.

38
00:02:39,940 --> 00:02:45,831
Each team in Figma can have multiple
projects which acts as a folder or

39
00:02:45,831 --> 00:02:48,470
a container for files.

40
00:02:48,470 --> 00:02:53,939
I'm going to create a project by clicking
the create a project button here,

41
00:02:53,939 --> 00:02:57,280
or you can also choose
New Project on the left.

42
00:02:57,280 --> 00:03:03,690
And as soon as you click that it will
ask you to name the project here.

43
00:03:03,690 --> 00:03:11,110
So I am just going to call
this Photo App and hit enter.

44
00:03:11,110 --> 00:03:15,470
And it will immediately take
me to this new project.

45
00:03:17,220 --> 00:03:20,572
Before we create a new
file inside this project,

46
00:03:20,572 --> 00:03:23,530
we'll need a few resources to help us out.

47
00:03:23,530 --> 00:03:28,127
First, download the image files
associated with this video.

48
00:03:28,127 --> 00:03:31,278
We'll import these image
files in a moment.

49
00:03:31,278 --> 00:03:36,065
While it's downloading,
click the link in the notes associated

50
00:03:36,065 --> 00:03:39,820
with this video that says
Facebook iOS 10 Figma.

51
00:03:39,820 --> 00:03:45,500
This will duplicate a Figma
file into your drafts section.

52
00:03:47,380 --> 00:03:52,285
This file is from Facebook's
official design resources,

53
00:03:52,285 --> 00:03:57,002
and it contains reusable
design elements from iOS 10.

54
00:03:57,002 --> 00:04:00,658
This of course isn't
the latest version of iOS, but

55
00:04:00,658 --> 00:04:05,570
for the purposes of our prototyping
example, it will work just fine.

56
00:04:05,570 --> 00:04:11,710
Now inside of the Photo App project,
click the New File button.

57
00:04:14,530 --> 00:04:18,110
And this will automatically
open a new file.

58
00:04:19,500 --> 00:04:24,175
At the top is a toolbar where
we can choose different

59
00:04:24,175 --> 00:04:28,862
manipulation tools and
change various settings.

60
00:04:28,862 --> 00:04:33,420
On the left side is the layers
pallet where we can rearrange

61
00:04:33,420 --> 00:04:38,920
the stacking order of layers as
well as group layers together.

62
00:04:38,920 --> 00:04:43,080
Right now it's blank because
there's nothing in this file.

63
00:04:43,080 --> 00:04:48,033
On the right side is the inspector
which provides more settings and

64
00:04:48,033 --> 00:04:52,340
details about the currently
selected object.

65
00:04:52,340 --> 00:04:57,195
There's nothing in the file to select,
so when nothing is selected,

66
00:04:57,195 --> 00:04:59,102
it will select the canvas.

67
00:04:59,102 --> 00:05:06,180
Which is the big area in the middle of the
screen that we'll use to layout objects.

68
00:05:06,180 --> 00:05:09,343
As we build the project,
I'll go over the interface in more detail.

69
00:05:09,343 --> 00:05:14,779
For now, at the top,
let's rename this file by choosing

70
00:05:14,779 --> 00:05:20,000
the arrow next to the files title and
choosing Rename.

71
00:05:21,430 --> 00:05:28,150
So we'll change this to something
like Prototype and then hit Enter.

72
00:05:28,150 --> 00:05:32,412
If you started downloading the images
associated with this video

73
00:05:32,412 --> 00:05:35,597
earlier the download
should be just about done.

74
00:05:35,597 --> 00:05:42,710
When they're finished unzip the file and
inside you'll find five photos.

75
00:05:42,710 --> 00:05:46,070
I could have included these
in another Figma file, but

76
00:05:46,070 --> 00:05:49,370
I wanted to show you how can
import images on your own.

77
00:05:49,370 --> 00:05:54,510
Back in the Figma file in the upper

78
00:05:54,510 --> 00:06:00,017
left corner, click the menu icon,

79
00:06:00,017 --> 00:06:04,985
and choose file, place image.

80
00:06:04,985 --> 00:06:08,287
Then in your operating
system's file browser,

81
00:06:08,287 --> 00:06:11,890
navigate to where you unzipped the images.

82
00:06:11,890 --> 00:06:16,659
So in my case it's in my downloads folder,
under photos, and

83
00:06:16,659 --> 00:06:18,870
here are those five images.

84
00:06:18,870 --> 00:06:20,956
Now lets select all of them, and

85
00:06:20,956 --> 00:06:25,745
you can do that by clicking the one at
the top, holding down the Shift key,

86
00:06:25,745 --> 00:06:29,390
and clicking the one at the bottom and
then choose open.

87
00:06:31,290 --> 00:06:37,010
Then in the upper left,
click the button that says Place All.

88
00:06:37,010 --> 00:06:41,410
And when the images are placed,
they'll be at full resolution,

89
00:06:41,410 --> 00:06:44,120
which is much larger than we need.

90
00:06:44,120 --> 00:06:48,944
And they'll also be overlapping
one another, that's fine for now.

91
00:06:48,944 --> 00:06:53,818
In the next video we'll learn how to
adjust these to be a more reasonable size

92
00:06:53,818 --> 00:06:56,190
and then arrange them on the canvas.