0
1
00:00:00,150 --> 00:00:05,730
There are several ways we can create wireframes, there are like third party applications that create
1

2
00:00:05,730 --> 00:00:10,020
wireframes, like Balsamiq mockups and Whimsical. That I've used in the past.
2

3
00:00:10,020 --> 00:00:15,030
Some designers just use pen and paper and sketch the wireframes like that.
3

4
00:00:15,030 --> 00:00:18,060
I do that, but only for my brainstorming process.
4

5
00:00:18,060 --> 00:00:19,550
I don't share it with my clients.
5

6
00:00:19,560 --> 00:00:22,070
The best tool for us, is still Figma.
6

7
00:00:22,140 --> 00:00:24,070
That's what I use these days.
7

8
00:00:24,090 --> 00:00:28,230
It's just easier to create wireframes there and share it with a client.
8

9
00:00:28,230 --> 00:00:34,830
The collaboration part of it and the commenting makes it easy for them to give comments. And also we
9

10
00:00:34,830 --> 00:00:40,380
can share the access to the file with our client, and they can fill out the content right inside Figma.
10

11
00:00:40,440 --> 00:00:46,770
The best way to create wireframes inside Figma is by using wireframe kits. Which are premade ready to
11

12
00:00:46,770 --> 00:00:52,440
use competent libraries. And we can drag them right from the components panel and then put them
12

13
00:00:52,440 --> 00:00:56,460
on the page. And sort of start building the entire page like a Lego structure.
13

14
00:00:56,460 --> 00:01:02,250
There are a lot of wireframe kits available online, often for free, but I wasn't very happy with what
14

15
00:01:02,250 --> 00:01:02,790
I found.
15

16
00:01:02,820 --> 00:01:09,600
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

17
00:01:09,600 --> 00:01:14,460
make this wireframe kit your own and use it in your future projects for yourself.
17

18
00:01:14,460 --> 00:01:20,590
Here is how this kid works. From the components panel, we're going to drag premade components that we
18

19
00:01:20,590 --> 00:01:21,130
need.
19

20
00:01:21,160 --> 00:01:24,160
They are organized like this, inside the components panel.
20

21
00:01:24,160 --> 00:01:30,760
We have Buttons, we have Inputs, like different types of form fields and we have Placeholders, like an
21

22
00:01:30,760 --> 00:01:33,910
avatar. And we'll build our wireframe using these components.
22

23
00:01:41,740 --> 00:01:42,910
Besides these elements,
23

24
00:01:42,940 --> 00:01:44,450
I have also added icons.
24

25
00:01:44,470 --> 00:01:47,700
These are free material design icons by Google.
25

26
00:01:47,710 --> 00:01:48,850
They are Figma components too.
26

27
00:01:48,850 --> 00:01:51,400
You can drag them, resize, change colors and so on.
27

28
00:01:54,260 --> 00:01:57,420
The components panel has the search option, which is very handy.
28

29
00:01:57,470 --> 00:02:02,090
This will search through all the components that are in the file including icons, since they are regular
29

30
00:02:02,090 --> 00:02:02,810
components too.
30

31
00:02:07,560 --> 00:02:09,990
I've also created text and color styles.
31

32
00:02:09,990 --> 00:02:16,110
For example, when we need a headline for our hero section, we'll add a new text the usual way we add text.
32

33
00:02:16,230 --> 00:02:21,970
And from the textiles, we will select heading 1 or any other heading style. When we need a paragraph, we'll
33

34
00:02:21,990 --> 00:02:25,200
again add a new text and choose a paragraph style instead.
34

35
00:02:28,350 --> 00:02:34,350
I have also added color styles, so we can instantly give something a color, without us worrying and testing
35

36
00:02:34,350 --> 00:02:34,850
it out.
36

37
00:02:34,860 --> 00:02:39,750
And, you know, coming up with different color versions. Primarily, we will use these blacks said greys.
37

38
00:02:39,750 --> 00:02:41,460
This is a nice neutral color palette.
38

39
00:02:41,460 --> 00:02:43,240
That's great for wireframes.
39

40
00:02:43,260 --> 00:02:48,080
I like wireframes, that look faded deliberately looking like it's lacking color.
40

41
00:02:48,180 --> 00:02:53,210
Sort of like a coloring book. And for clients to understand that this is not a design.
41

42
00:02:53,220 --> 00:02:57,540
Speaking of which, when you share wireframes with your clients, make sure you explain your
42

43
00:02:57,540 --> 00:03:03,840
process and explain what wireframes are. Often they're not gonna know what wireframes are and I've
43

44
00:03:03,960 --> 00:03:10,050
had once a moment when one of my clients thought that these wireframes were final designs, and he wasn't
44

45
00:03:10,050 --> 00:03:10,910
very happy with it,
45

46
00:03:10,920 --> 00:03:17,840
if you can imagine. The Master components and styles that I've created, you can see them on components
46

47
00:03:17,840 --> 00:03:22,850
page. If you want to make any edits and changes, you can edit these Master instances from here.
47

48
00:03:22,850 --> 00:03:26,000
You can also build and add more components, if you like it.
48

49
00:03:26,000 --> 00:03:30,690
Make this wireframe kit your own and have it as your go to template for your future projects.
49

50
00:03:30,770 --> 00:03:36,160
It will make your wireframing stage smooth and speedy. One note about icons.
50

51
00:03:36,210 --> 00:03:39,670
If searching from the components panel doesn't give you any results,
51

52
00:03:39,720 --> 00:03:42,450
take a look at here to see what's available,
52

53
00:03:42,450 --> 00:03:45,570
the names of these icons might not be as intuitive.
53

54
00:03:45,570 --> 00:03:51,270
For example, this trash can icon is named "delete" and searching "trash" won't bring any results.
54

55
00:03:58,900 --> 00:04:04,900
So open that wireframe kit file and make sure that you have the copy of file in your account.
55

56
00:04:04,900 --> 00:04:08,920
Now we're ready to start wireframing, we'll get to it in the upcoming video.
56

57
00:04:08,920 --> 00:04:09,430
Stick around.