Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Wireframing

Well done!

You have completed Introduction to Wireframing!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Making Wireframes in Figma (UI2)

9:09 with Daniel Montgomery

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.

[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