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.

Figma Community

2:37 with Daniel Montgomery

Explore the Figma Community in this video, showcasing a wealth of design assets like icons, UI kits, and templates. Learn how to access these resources through the Explore Community feature and seamlessly integrate them into your projects.

Next up, let's talk about the Figma Community, an incredible resource for 0:00
finding design assets for your projects. 0:03
Here, you can discover everything from icons and 0:05
design templates to UI kits and more. 0:08
To access it, just go to the main Figma dashboard and 0:10
click on the Explore Community link in the lower left corner. 0:13
Let's take a look inside. 0:16
Once we're in, we instantly see a variety of resources. 0:17
Figma slide templates, UI kits, design templates, 0:21
popular Figma plugins, FigJam assets for UX work, 0:26
and widgets that enhance collaboration. 0:30
Plus, there are several categories to help you quickly filter through all these 0:35
options. 0:39
Let's check out some icons by selecting the Icons category. 0:40
Now we're on a page dedicated to Icon Packs. 0:45
At the top, there's a filter bar where you can refine your search by Figma product, 0:47
resource type or filter for free and paid resources. 0:52
Let's set this to show only free resources. 0:54
Great, now we're seeing free to use icon kits. 0:58
I'll select the Material Design Icons pack and 1:02
click Open in Figma to copy these icons to a new design file. 1:05
All right, first let's dismiss this developer mode alert. 1:10
Now we're in the template where we have different 1:14
Icon Packs organized on separate pages. 1:17
Here we can view the Filled icons, let me zoom in a bit. 1:19
That should help. 1:23
If we click the outline link on this page, 1:26
we'll see the Outlined versions of the icons. 1:29
This allows us to compare the Filled and Outlined styles. 1:33
Now, let's zoom in on the Rounded icons for a closer look. 1:36
The Rounded icons have softer edges than the originals, which weren't overly sharp, 1:44
but give us a slightly different style option. 1:48
Here's another style, the Two-tone icons. 1:51
With these, we can apply two shades to each icon, 1:55
a lighter and a darker version of the same color. 1:58
For example, I'll select an icon, change its color to green, and 2:01
do the same with another icon to show how quickly we can customize colors. 2:05
We can even change one to red to make it stand out as an alert color. 2:15
To use any icon in our project, we can simply select, copy and 2:18
paste it into our open project. 2:22
Once it's there, we can move it around, change its color and 2:24
place it wherever we need, but that's going to do it for this one. 2:27
Stick around and in our next one we'll dive into FigJam and Figma slides, 2:31
see you there. 2:35