There are several ways we can create wireframes, there are like third party applications that create 1
wireframes, like Balsamiq mockups and Whimsical. That I've used in the past. 2
Some designers just use pen and paper and sketch the wireframes like that. 3
I do that, but only for my brainstorming process. 4
I don't share it with my clients. 5
The best tool for us, is still Figma. 6
That's what I use these days. 7
It's just easier to create wireframes there and share it with a client. 8
The collaboration part of it and the commenting makes it easy for them to give comments. And also we 9
can share the access to the file with our client, and they can fill out the content right inside Figma. 10
The best way to create wireframes inside Figma is by using wireframe kits. Which are premade ready to 11
use competent libraries. And we can drag them right from the components panel and then put them 12
on the page. And sort of start building the entire page like a Lego structure. 13
There are a lot of wireframe kits available online, often for free, but I wasn't very happy with what 14
I found. 15
So, I decided to create one for you, a simple and easy to use kid based on what I use myself. And you can 16
make this wireframe kit your own and use it in your future projects for yourself. 17
Here is how this kid works. From the components panel, we're going to drag premade components that we 18
need. 19
They are organized like this, inside the components panel. 20
We have Buttons, we have Inputs, like different types of form fields and we have Placeholders, like an 21
avatar. And we'll build our wireframe using these components. 22
Besides these elements, 23
I have also added icons. 24
These are free material design icons by Google. 25
They are Figma components too. 26
You can drag them, resize, change colors and so on. 27
The components panel has the search option, which is very handy. 28
This will search through all the components that are in the file including icons, since they are regular 29
components too. 30
I've also created text and color styles. 31
For example, when we need a headline for our hero section, we'll add a new text the usual way we add text. 32
And from the textiles, we will select heading 1 or any other heading style. When we need a paragraph, we'll 33
again add a new text and choose a paragraph style instead. 34
I have also added color styles, so we can instantly give something a color, without us worrying and testing 35
it out. 36
And, you know, coming up with different color versions. Primarily, we will use these blacks said greys. 37
This is a nice neutral color palette. 38
That's great for wireframes. 39
I like wireframes, that look faded deliberately looking like it's lacking color. 40
Sort of like a coloring book. And for clients to understand that this is not a design. 41
Speaking of which, when you share wireframes with your clients, make sure you explain your 42
process and explain what wireframes are. Often they're not gonna know what wireframes are and I've 43
had once a moment when one of my clients thought that these wireframes were final designs, and he wasn't 44
very happy with it, 45
if you can imagine. The Master components and styles that I've created, you can see them on components 46
page. If you want to make any edits and changes, you can edit these Master instances from here. 47
You can also build and add more components, if you like it. 48
Make this wireframe kit your own and have it as your go to template for your future projects. 49
It will make your wireframing stage smooth and speedy. One note about icons. 50
If searching from the components panel doesn't give you any results, 51
take a look at here to see what's available, 52
the names of these icons might not be as intuitive. 53
For example, this trash can icon is named "delete" and searching "trash" won't bring any results. 54
So open that wireframe kit file and make sure that you have the copy of file in your account. 55
Now we're ready to start wireframing, we'll get to it in the upcoming video. 56
Stick around.