Bummer! You have been redirected as the page you requested could not be found.
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