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 Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
Discover how to create and collaborate on wireframes using Figma, a cloud-based design tool that lets you work directly in your browser, offering a real-time interface with features like prototyping and team collaboration, all accessible through a free Starter plan.
Note:
Figma currently lets you choose between UI version 2 and UI version 3, with UI version 2 set as the default. This video uses UI version 2. If you're using UI version 3, please proceed to the next video to follow along.
Resources
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
[MUSIC]
0:00
Hey there designers, in this video,
I'll introduce you to Figma,
0:04
a design tool that's taken
the design world by storm.
0:08
Figma is a cloud based app that lets you
create user interfaces, prototypes and
0:11
collaborate with your team in real time.
0:15
Unlike traditional design software,
Figma works directly in your web browser,
0:18
though it does have desktop apps for
both Windows and macOS.
0:22
Just remember that that these desktop
versions still need an internet connection
0:25
to open, view and edit files.
0:29
Alright, let's jump into Figma and
get started, to follow along, head to
0:31
figma.com, go ahead and create a free
account and log in if you haven't already.
0:35
Now, Figma's free plan, called the starter
plan, works on a per team basis.
0:39
When you sign up, you'll automatically get
a team created for you as you can see,
0:43
mine says Daniel Montgomery's team.
0:47
Within your team, you can create
unlimited personal drafts and
0:49
you'll have access to three collaborative
design files and three FigJam files.
0:52
Each design file can have
up to three pages and
0:56
each user can join up
to 100 different teams.
0:58
You can also download files locally
to save space in your cloud account.
1:01
Handy if you're working
within the three file limit.
1:05
Once you're logged in,
you should arrive at this screen.
1:07
This is where you'll find your recent
files and can create new ones,
1:10
on the left we're in the recent tab
which shows our most recent projects.
1:13
Below that is your team,
you can add multiple teams here and
1:17
switch between them.
1:20
Next is the drafts tab where
your in progress work is stored.
1:21
Remember, you can create unlimited drafts
which can be shared with view only
1:25
permissions.
1:28
Then we have all projects, this is
where you can create projects which
1:29
are essentially folders for
organizing files.
1:33
If you want files that others
can edit in real time,
1:36
they'll need to be assigned to a project.
1:38
This is where the starter plan's three
file three page limit comes into play.
1:40
Figma gives each team a default project,
but you can delete this and
1:44
create your own if you'd like.
1:48
Just keep in mind the starter plan lets
you have one active project at a time.
1:49
And last, there's the trash tab, this is
where you'll find any deleted files from
1:53
here you can recover them or
delete them permanently.
1:58
Back in our main screen in the recent tab
we have a few options to get started.
2:02
We can create a new design file,
a new FigJam board which is like Miro,
2:07
Lucidspark or
Google's recently retired Jamboard.
2:10
We can also create a new slide
deck using Figma Slides,
2:14
this tool is similar to Google Slides or
Microsoft PowerPoint.
2:17
Lastly, we can import external
files like Figma or FigJam files,
2:21
as well as PNGs, JPEGs,
and even sketch files.
2:25
But for now, let's go ahead and
click on new design file so
2:28
we can check out Figma's UI or
user interface.
2:31
Alright, before we begin the tour,
I wanted to start off by letting you know
2:34
that Figma's user interface is currently
set to UI2, but we can change that.
2:38
Right now you can choose
between Figma UI 2 and
2:42
Figma UI 3 by clicking on the question
mark icon in the bottom right corner and
2:45
selecting to use the new UI, aka UI3 or
use the old UI aka UI2 in the menu,
2:50
which I'll also show more of when
we switch to UI3 in the next video.
2:55
Depending on when you sign up for a Figma
account, you might start with UI2 or UI3,
3:00
they both offer the same features but
have different layouts.
3:04
In the future, Figma might retire UI2,
making UI3 the only option available, for
3:07
now, you have the flexibility to
choose which version you prefer.
3:12
I'll demonstrate both UI layouts to show
how Figma operates starting with UI2 in
3:16
this video, but
I'll be using UI3 in the following videos.
3:21
Let's dive in,
on the left side we have the layers panel,
3:24
this panel lists all the layers or
elements in your design.
3:28
At the top of the layers panel,
we have a few options,
3:32
this magnifying glass
icon is the search icon.
3:35
We can click this to search through
our layers for a specific layer.
3:38
The Layers tab what we're looking at now,
3:41
it's currently blank because we
don't have any layers or elements.
3:43
Then we have the Assets tab,
next to it is the pages dropdown,
3:46
which lets you create additional pages.
3:50
You can organize your work by
having your design system or
3:52
style guide on one page, wireframes on
another, mockups on a third, and so on,
3:55
it's a great way to keep
everything organized.
4:00
Now let's check out the assets tab,
4:03
here you'll find various pre installed UI
kits and any components you've created.
4:05
All your components
are accessible from this tab,
4:10
making it easy to manage your assets.
4:12
In the top left corner you'll see the main
menu with the Figma logo as the menu icon.
4:16
Clicking this dropdown reveals standard
menu items like file, edit, view,
4:21
object, text, arrange, vector,
plugins, widgets, preferences,
4:26
libraries, get, desktop,
app, help, and account.
4:30
This is where you can access
community pages, plugins and more.
4:34
Next I'll click on the frame tool
represented by a hashtag icon,
4:41
I'll use it to create a frame,
which is our workspace.
4:45
Then I'll select the rectangle tool to
draw a rectangle for our website or
4:48
header layout.
4:52
I'll turn the top rectangle black
to serve as the website header,
4:59
by duplicating it and moving the copy
to the bottom, we create a footer.
5:02
Now, our website layout has three header,
content area, and footer.
5:06
Let's return to the main menu and
take a closer look at the available tools,
5:12
I'll walk you through each one so
you know what's at your disposal.
5:15
First, we have our selection tools,
the move tool, and the scale tool.
5:18
Under the frame tool,
you'll find additional tools like frame,
5:22
section and slice.
5:26
In the shapes section, we have rectangles,
lines, arrows, ellipses,
5:27
polygons, stars, and the image tool for
importing PNG or JPEG files.
5:31
There's also the pen and
pencil tools for drawing custom vectors,
5:36
as well as the text tool to add text,
and this icon represents the components,
5:39
plugins and widgets tabs.
5:43
Here you can quickly access your
components, search for plugins, and
5:44
add widgets to your project.
5:48
Next is the move tool,
shown with a hand icon,
5:52
which lets you navigate the artboard.
5:55
Lastly, we have the comment tool,
which allows you to leave comments on your
5:58
design, we'll explore this
feature in more detail later.
6:02
With an item selected,
the main center menu at the top appears.
6:05
The first icon is the edit object tool,
which opens the vector editing suite for
6:08
modifying your selected shape.
6:13
The select matching layers tool lets you
choose layers that share the same names
6:15
and structures across different frames,
provided they are part of a component
6:18
family, this is great for
maintaining consistency in your design.
6:22
Clicking the create component icon turns
the selected item into a component.
6:25
You can then create multiple instances
of this component from the assets tab.
6:29
The use as mask tool allows you to apply
a shape as a mask, similar to photoshop.
6:33
Finally, the union selection tool
lets you combine selected layers.
6:39
Let me demonstrate by selecting a few
layers to show how the menu options
6:44
change, I'll select all three rectangles.
6:48
Now the component icon has a dropdown
that allows us to create components,
6:50
create multiple components,
and create component sets.
6:54
The union selection tool also offers
options like union, subtract, intersect,
6:59
exclude, flatten, and
merging layers into one.
7:04
When you click on a layer,
the properties panel appears on the right.
7:09
Similar to the layers panel,
it has design and prototype tabs.
7:12
In the design tab, you can adjust
alignment, position constraints,
7:16
layer properties, fill, stroke,
effects, and export settings.
7:20
Here we can add a stroke to outline the
rectangle, it's currently black on black,
7:25
so it's invisible, but we can change
the fill color to something like red,
7:31
for now, we'll keep the layer black.
7:37
Next, I'll remove both strokes and
switch to the prototype tab.
7:40
This is where you adjust
prototype properties or
7:50
start creating prototypes
by selecting layers.
7:52
At the top there's the spotlight feature,
it highlights a collaborator,
7:57
dimming the rest of the screen so
others can focus on what you're showing,
8:00
this is useful for
collaborative design sessions.
8:04
Clicking the headphones icon lets us
communicate via audio while working
8:11
in Figma.
8:14
Note that this feature requires
a professional plan subscription.
8:15
There's a share button,
which I'll demonstrate later.
8:21
To its right are developer mode icons,
allowing you to share code snippets,
8:23
manage design measurements,
sync with vs code, and more.
8:27
This is also a professional plan feature,
further to the right,
8:30
the book icon opens your libraries, where
you can view design system components,
8:33
styles, variables, and
any imported UI kits.
8:38
There's also an updates tab for
plugin or widget updates,
8:41
the play button lets you preview
your interactive prototype.
8:44
Alternatively, you can select your
frame and press shift spacebar to open
8:49
the preview in a new window, that
covers the basics of Figma's interface,
8:53
giving you the fundamentals
to start building wireframes.
8:58
But before we begin,
let's review Figma's new layout in UI3,
9:02
I'll see you in the next video.
9:06
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