Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Prototyping with Figma!
You have completed Prototyping with Figma!
Preview
Setting up a Figma Project is easy. Each project can include multiple design documents called "files" and each Project belongs to a team.
Resources
- Image Files - These are the image files we'll use throughout this course. Download them, unzip the file, and then import them into Figma.
- Facebook iOS 10 Figma - Make sure to duplicate this file to your own Figma account so you can use its design elements.
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
FIGMA is a free web based tool
that you use in your browser so
0:00
there's no need to install any software.
0:03
To follow along,
head over to figma.com and
0:06
you should see a webpage that
looks similar to this one.
0:10
There are desktop versions available
if you prefer that instead.
0:17
And there are also some paid
plans with additional features.
0:20
However, it's free to get started.
0:25
To create an account, click Sign Up
in the upper right corner and
0:27
follow their sign-up process.
0:31
Or if you already have an account,
feel free to sign in.
0:34
Once your logged in you'll be greeted with
a screen that looks similar to this one.
0:40
It has a few images in the middle,
probably just these first three and
0:46
not these three that I have at the top.
0:51
And on the left there's
a sidebar going down the side.
0:54
This whole screen is what's
called the files view.
1:00
On the left side you should
find a Drafts section.
1:04
And this is a place for
files that haven't been categorized yet.
1:09
In the middle,
each one of these rectangles is
1:13
a file with a preview image and a label.
1:18
A file is very similar to a file you might
work with in a program like Photoshop or
1:23
Illustrator.
1:29
It's a single unit of visual
composition within Figma.
1:30
We could create a file and
just let it sit in this drafts folder.
1:35
With all these other templates and samples
but lets properly categorize it first.
1:41
On left side, we can create
a new team using the New team
1:48
button at the bottom left corner.
1:53
I already have a team called TreeHouse, so
1:56
I am just going to create a new team,
and I'll call it my team.
2:01
But you can name yours
whatever you'd like.
2:08
So I'll hit Create Team.
2:10
And it will ask you to choose a team plan.
2:13
But let's just say let's get started for
free that's fine.
2:16
And on the left here you can see I have
created this new team called My Team
2:20
in addition to a team I
already have called TreeHouse.
2:25
In Figma multiple people can be
invited to a team as team members.
2:28
And they can share Figma
files among one another and
2:35
collaborate on them in real time.
2:37
Each team in Figma can have multiple
projects which acts as a folder or
2:39
a container for files.
2:45
I'm going to create a project by clicking
the create a project button here,
2:48
or you can also choose
New Project on the left.
2:53
And as soon as you click that it will
ask you to name the project here.
2:57
So I am just going to call
this Photo App and hit enter.
3:03
And it will immediately take
me to this new project.
3:11
Before we create a new
file inside this project,
3:17
we'll need a few resources to help us out.
3:20
First, download the image files
associated with this video.
3:23
We'll import these image
files in a moment.
3:28
While it's downloading,
click the link in the notes associated
3:31
with this video that says
Facebook iOS 10 Figma.
3:36
This will duplicate a Figma
file into your drafts section.
3:39
This file is from Facebook's
official design resources,
3:47
and it contains reusable
design elements from iOS 10.
3:52
This of course isn't
the latest version of iOS, but
3:57
for the purposes of our prototyping
example, it will work just fine.
4:00
Now inside of the Photo App project,
click the New File button.
4:05
And this will automatically
open a new file.
4:14
At the top is a toolbar where
we can choose different
4:19
manipulation tools and
change various settings.
4:24
On the left side is the layers
pallet where we can rearrange
4:28
the stacking order of layers as
well as group layers together.
4:33
Right now it's blank because
there's nothing in this file.
4:38
On the right side is the inspector
which provides more settings and
4:43
details about the currently
selected object.
4:48
There's nothing in the file to select,
so when nothing is selected,
4:52
it will select the canvas.
4:57
Which is the big area in the middle of the
screen that we'll use to layout objects.
4:59
As we build the project,
I'll go over the interface in more detail.
5:06
For now, at the top,
let's rename this file by choosing
5:09
the arrow next to the files title and
choosing Rename.
5:14
So we'll change this to something
like Prototype and then hit Enter.
5:21
If you started downloading the images
associated with this video
5:28
earlier the download
should be just about done.
5:32
When they're finished unzip the file and
inside you'll find five photos.
5:35
I could have included these
in another Figma file, but
5:42
I wanted to show you how can
import images on your own.
5:46
Back in the Figma file in the upper
5:49
left corner, click the menu icon,
5:54
and choose file, place image.
6:00
Then in your operating
system's file browser,
6:04
navigate to where you unzipped the images.
6:08
So in my case it's in my downloads folder,
under photos, and
6:11
here are those five images.
6:16
Now lets select all of them, and
6:18
you can do that by clicking the one at
the top, holding down the Shift key,
6:20
and clicking the one at the bottom and
then choose open.
6:25
Then in the upper left,
click the button that says Place All.
6:31
And when the images are placed,
they'll be at full resolution,
6:37
which is much larger than we need.
6:41
And they'll also be overlapping
one another, that's fine for now.
6:44
In the next video we'll learn how to
adjust these to be a more reasonable size
6:48
and then arrange them on the canvas.
6:53
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