Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Making Wireframes in Figma (UI2) 9:09
- Making Wireframes in Figma (UI3) 8:03
- Figma Community 2:37
- FigJam & Figma Slides 3:52
- Professional Plan Features (AI & Developer Mode) 6:41
- Demonstrating Wireframes in Figma 17:45
- Sharing Wireframes in Figma 2:59
- Pros and Cons of Wireframing in Figma 1:36
- How to Make Wireframes in Figma Quiz 5 questions
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Join us in this video as we dive into Figma’s latest major update, UI3. We'll guide you through the transition from UI2, showcasing the newly centered main menu and streamlined interface. Explore the changes, learn how to navigate the new layout, and discover enhanced tools for creating and organizing your designs more efficiently in Figma’s UI3.
Resource
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
Welcome back.
0:00
In this video, we're going to explore
Figma's latest major update, UI3.
0:01
If you're like me and
currently using the UI2 interface,
0:05
scroll to the bottom right corner and
click on the question mark icon.
0:08
In this menu you can choose
to switch to the new UI, but
0:12
first I'm going to click on
the Navigating Figma's new UI link.
0:15
This will open a blog post from Figma
that explains some of the changes.
0:18
Here you can learn all about
the new features in UI3 and
0:22
how it differs from UI2.
0:25
Let's go back to Figma and
click on the question mark icon again.
0:27
This time we're going
to select use new UI.
0:30
And just like that,
we're now using the new UI 3 update.
0:35
The first thing you'll notice is that
the main menu is no longer at the top,
0:38
instead it's centered at the bottom.
0:41
This makes it easier to access items and
keeps the menu always visible.
0:43
It reminds me of the minimalist UIs we see
in Mac apps like Spotlight, Raycast, and
0:47
ChatGPT, with menus floating at the center
or bottom, giving it a unique look.
0:52
If we move to the Figma icon
in the top left corner,
0:56
we can click on it to open the main menu,
which has the same options as before.
0:59
We can go back to the main dashboard, or
1:03
I can even click on Actions to
bring up the Quick Actions menu.
1:05
You'll find File to create, open or save a
file, Edit to make changes to objects and
1:09
layers, View to show or hide grids,
rulers, UI elements, and more.
1:15
Objects to group and
adjust layer positions,
1:19
text to access formatting tools,
Arrange to adjust placement and
1:21
spacing and Vector to join Smooth,
delete or heal selections.
1:25
We also have plugins and widget tools
preferences and a link to our libraries.
1:29
Additionally, there's a link to get the
desktop app and finally Help, an account
1:33
where you can find your account settings
and support links from the Help menu,
1:37
accessed earlier by clicking the question
mark icon in the bottom right corner.
1:41
And I'll close this menu to show our
Layers panel here on the left side.
1:45
The first major change here is the new Tab
Names file instead of Layers and Assets.
1:49
Other than the name change, the layout
remains the same, with pages and
1:54
layers organized similarly to UI2.
1:59
But let's create a second
page to explore UI3 further.
2:01
I'm going to go down to the main menu at
the bottom and select the Frame tool.
2:04
Then I'll draw out a frame here.
2:07
Next, I'll select the Shape Tool and
choose a circle to place in our frame.
2:12
Then I'll go back to the Shape Tool,
select an arrow, and
2:16
stretch it across the frame.
2:20
Lastly, I'll hit R to select
the Rectangle Tool, and I'll add a square.
2:22
Now I'll straighten and align the arrow so
it's even and not tilted.
2:27
My Properties panel is
set to prototype mode.
2:30
Let me switch back to the design tab.
2:32
And then I'll take a quick moment to
better align all of my shapes here.
2:34
There, that's looking better.
2:39
As you can see, we still have
the properties panel on the right.
2:41
I can click to change the alignment
of my selected objects, but
2:45
I'll press command plus z to undo that.
2:48
While all my shapes are still selected,
I can press Ctrl plus g or
2:50
comand plus g to group them.
2:54
Now I'm gonna delete this page and
head up to the Assets tab.
3:06
Here, we still have our libraries
that include all our components
3:11
in the design system,
3:14
as well as any UI kits we've installed or
that come preinstalled by default.
3:15
But let's go back down to our main
menu and review our available tools.
3:19
This should look pretty familiar.
3:22
We have the move tool,
of course, and the hand tool,
3:23
which allows me to move the canvas around.
3:27
There's also the scale tool
to resize layers up and down.
3:30
We also have the frame tool,
which lets me create frames.
3:37
Then there's the section tool,
which allows me to create sections.
3:41
Frames are best for creating responsive
layouts with constraints and nested
3:45
elements, while sections are ideal for
organizing content for presentations and
3:49
developer handoff, with a unique ability
to mark content as ready for development.
3:54
And then we have the Slice Tool, a tool
that functions like a virtual cutting tool
3:59
that lets you select and
mark specific regions of your design for
4:03
individual export, even if
the elements aren't grouped together.
4:06
But moving on to the Shape Tool, just like
in the last video, the Shape Tool dropdown
4:09
includes all our vector shapes and lets us
import images or videos into our design.
4:13
Next we have the Text Tool,
4:17
which we can use to add text to our design
elements then there's the Comments icon.
4:19
Clicking this allows us to
leave comments in the design.
4:23
I'll click it and leave a comment at
the top saying make this thinner.
4:26
This serves as a note to the designer
to make the header section slimmer.
4:30
After that, there's an option to get
notified of replies on the go by
4:33
downloading a QR code, but
I'll skip that for now.
4:37
We see our comment here, and
if we click the checkmark, it approves and
4:40
resolves the comment, making it disappear.
4:43
And if I click Undo the comment reappears,
but I'll approve it to dismiss it again.
4:46
Next is the Quick Actions icon.
4:51
Here we can find plugins and widgets,
as well as assets, AI tools, and more.
4:53
There are also keyboard shortcuts and
account settings.
4:58
It's like a kitchen drawer or
catch all drawer.
5:00
I can click the Assets tab
to view our components or
5:03
any elements of a design
kit that we have installed.
5:05
I can even click View Library and
Community to open the kit's
5:08
dedicated Community page and
Insert to start using the components.
5:11
I can also click on Plugins and
5:15
Widgets to see some suggested plugins that
can help speed up or improve our process.
5:16
Of course we have the icon for
accessing Developer mode, but
5:26
that requires a professional plan
that covers our main navigation bar.
5:30
On the left side, we can click the Toggle
icon to hide the Layers tab and
5:35
give us more screen space.
5:38
Now that we have the basics down,
I'm gonna quickly add some
5:40
elements to the board to show how we can
maneuver and adjust elements in UI3.
5:43
I'll start by pressing the O key
to activate the Ellipse tool and
5:47
quickly draw a circle.
5:50
I'll change the circle's fill to dark
gray, then move it to the left a bit.
5:56
Next, I'll select the bottom rectangle,
our footer, and
6:03
change its color to a lighter shade,
maybe blue.
6:07
There we go.
6:09
Now I'll select the blue footer and
go to the Properties panel.
6:13
Under Appearance,
6:16
I'll change the corner radius to add
some rounded corners to the rectangle.
6:17
However, I don't want the bottom corners
rounded, so I'll click the corner radius
6:20
icon here on the right and
set the two bottom values to zero.
6:25
And that's about it for Figma's UI3.
6:29
But I wanna show you one
last thing before we go.
6:31
If we click the question mark
icon in the bottom right corner,
6:34
we can select keyboard shortcuts.
6:37
Here we can view all essential keyboard
shortcuts to help us navigate and
6:39
work more efficiently.
6:43
On the first page, we have essential
shortcuts showing how to use
6:44
the color picker, activate Search for
Actions, and show Hide the UI.
6:47
For example, pressing Command and
Backslash together hides the UI like this.
6:51
The shortcut highlights blue
to show it's been used before.
6:56
Pressing Shift plus c activates the color
picker to get the value of any color you
7:00
hover over.
7:04
I can click on the color and
7:05
it will instantly select that
color in my color swatch.
7:06
There are multiple pages with
shortcuts for Tools, View, Zoom, and
7:10
other menus so
you don't have to use the mouse as much.
7:14
This is definitely the more
professional route to take.
7:18
Don't worry if you haven't mastered
all these shortcuts, nobody has.
7:20
That's why this resource is so valuable.
7:24
I highly recommend using it often,
especially when you forget any shortcuts.
7:26
It's here for a reason.
7:29
Lastly, there's the Layout tab.
7:33
This lets us change the keyboard layout.
7:35
We can switch to any other layout like
from US QWERTY to US Dvorak or to UK,
7:37
Swedish, Spanish, Portuguese,
and many more languages.
7:42
This ensures the keyboard
shortcuts match your keyboard and
7:45
updates your shortcuts guide accordingly.
7:49
Now, that's everything on UI3.
7:51
Join us in the next video where
I'll cover the Figma community,
7:53
a place to get UI kits, icon packs and
more design resources for your projects.
7:57
See you there.
8:01
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