0
1
00:00:00,150 --> 00:00:05,720
Before we create wireframes, I'm gonna teach you 2 features of Figma, that we haven't covered yet.
1

2
00:00:05,820 --> 00:00:08,380
We're gonna need them to create our wireframes.
2

3
00:00:08,460 --> 00:00:12,090
These are Styles and Components. In this video,
3

4
00:00:12,090 --> 00:00:13,680
we're going to cover Styles.
4

5
00:00:13,740 --> 00:00:16,730
You know, how in Webflow we can style classes and tags?
5

6
00:00:16,740 --> 00:00:19,290
We can do something similar in Figma as well.
6

7
00:00:19,290 --> 00:00:21,600
For example, let's take a heading and style it.
7

8
00:00:25,880 --> 00:00:29,120
Under these dots, we have option for Tex Styles.
8

9
00:00:29,270 --> 00:00:34,880
If we click on that plus icon, this will create a new Text Style from the currently selected text. We
9

10
00:00:34,880 --> 00:00:39,600
can name it H1, similar to what we do in Webflow, when styling all H1 tags.
10

11
00:00:39,620 --> 00:00:43,270
Now we can take any other text and apply H1 style to it.
11

12
00:00:46,790 --> 00:00:52,430
In the properties panel, you'll see that a lot of text editing options are disabled. Like the font,
12

13
00:00:52,430 --> 00:00:58,480
size, line height and others are gone. But we still have things like fill color and text alignment.
13

14
00:00:58,550 --> 00:01:04,100
They don't become part of the Text Style, so they can always be edited. And it's not going to affect the
14

15
00:01:04,110 --> 00:01:07,570
Text Style itself, it will be applied only to that instance.
15

16
00:01:07,640 --> 00:01:12,620
If this was Webflow, we wouldn't be able to do this. Everything would be editable and reflected on all
16

17
00:01:12,620 --> 00:01:17,450
instances with the same tag or class. Inside the interface designers like Figma,
17

18
00:01:17,450 --> 00:01:20,320
this behavior makes more sense. To edit a style,
18

19
00:01:20,330 --> 00:01:27,950
click on it and then go to the Edit Style. We have an option to Edit the Style from here.
19

20
00:01:28,060 --> 00:01:33,220
You can change whatever you like and you will see changes to the style instantly reflect on all of the
20

21
00:01:33,220 --> 00:01:34,210
instances.
21

22
00:01:34,210 --> 00:01:39,610
This doesn't seem like much, but when you have several pages with multiple headlines on each page, then
22

23
00:01:39,610 --> 00:01:41,590
you'll realize how big this is.
23

24
00:01:41,590 --> 00:01:46,910
We also have an option to detach the style. That's going to let you edit all the text properties. And
24

25
00:01:46,930 --> 00:01:52,120
any future changes to the original text style, is not going to affect the second headline because it's
25

26
00:01:52,120 --> 00:01:53,950
now detached from the textile.
26

27
00:01:53,980 --> 00:01:59,100
If you want to delete the style, this is not very evident, but right-click on it and you'll get a delete
27

28
00:01:59,130 --> 00:01:59,500
option.
28

29
00:02:04,090 --> 00:02:06,560
Text styles are not the only thing we have in Figma.
29

30
00:02:06,580 --> 00:02:13,060
Almost every other property in the panel can have these global styles. Fill, stroke, effects even the grid.
30

31
00:02:13,060 --> 00:02:16,540
The second most useful is always the color styles. From the same place,
31

32
00:02:16,540 --> 00:02:18,010
you can add a new color style.
32

33
00:02:23,450 --> 00:02:27,580
And just like text styles, it can be applied to all other elements that have color
33

34
00:02:27,590 --> 00:02:31,170
property. Doesn't matter if it's text or rectangle. Just like Text Styles,
34

35
00:02:31,180 --> 00:02:32,250
color styles are big.
35

36
00:02:32,250 --> 00:02:35,940
I often end up changing colors several times while designing a website.
36

37
00:02:35,970 --> 00:02:39,270
Very picky with colors and can change my mind easily.
37

38
00:02:39,270 --> 00:02:40,790
God bless the colors styles.
38

39
00:02:40,950 --> 00:02:46,410
So that's the Styles in Figma. Applies to nearly everything fill, color, text, layout, grid.
39

40
00:02:46,410 --> 00:02:48,540
Up next, we're gonna cover Components.
40

41
00:02:48,600 --> 00:02:49,080
Stick around.