0
1
00:00:03,140 --> 00:00:04,240
Let's create a button.
1

2
00:00:14,530 --> 00:00:20,740
Now, if we select this button and click this Create Component on the toolbar, this will turn this button
2

3
00:00:20,740 --> 00:00:27,690
into a Component. Which we can reuse across our file and drag them anytime from the Components Tab. Components
3

4
00:00:27,730 --> 00:00:30,190
in Figma are the group of elements.
4

5
00:00:30,250 --> 00:00:36,580
So with styles, we create this global connection for one particular style. But with components, we can create
5

6
00:00:36,580 --> 00:00:43,270
a global connection for several styles, and every single other object that's inside that component.
6

7
00:00:43,270 --> 00:00:51,410
The original button is called the Master competent. And the one we just dragged is called the Instance. Changes
7

8
00:00:51,410 --> 00:00:57,740
that we made to the Master, will be reflected on every single instance. But each Instance individually
8

9
00:00:57,740 --> 00:00:59,970
can override the Styles for themselves.
9

10
00:01:01,230 --> 00:01:07,710
However, the changes are not going to be reflected back on the master or any other instance. You know,
10

11
00:01:07,710 --> 00:01:13,320
sort of like Combo Classes in Webflow. And just like Combo Classes, new changes to the Master will affect
11

12
00:01:13,350 --> 00:01:15,940
only the styles that have not been overridden.
12

13
00:01:16,140 --> 00:01:22,080
So the first instance did change the color to the green, just like the master did, but the other 2 below
13

14
00:01:22,140 --> 00:01:23,030
didn't.
14

15
00:01:23,070 --> 00:01:23,460
Why?
15

16
00:01:23,730 --> 00:01:28,740
Because on the 2 below, we have overridden the background fill of the button, but on the first one
16

17
00:01:28,740 --> 00:01:29,940
we didn't touch it.
17

18
00:01:29,940 --> 00:01:35,370
So it still inherits from the Master component, until we override it. And exactly like Combo classes
18

19
00:01:35,370 --> 00:01:36,030
in Webflow,
19

20
00:01:36,030 --> 00:01:41,020
other styles that we didn't touch and didn't override, will still be inherited from the Master.
20

21
00:01:41,040 --> 00:01:43,740
For example, if we round the corners of the button.
21

22
00:01:47,000 --> 00:01:51,890
One big difference between classes in Webflow and components and Figma, is that classes don't have other
22

23
00:01:51,890 --> 00:01:52,970
elements inside.
23

24
00:01:52,970 --> 00:01:58,490
For example, if you create a class for a hero section and you put headlines, buttons and images inside,
24

25
00:01:58,910 --> 00:02:03,350
those elements are not part of the Class. But in Figma Components, they are.
25

26
00:02:03,350 --> 00:02:07,760
So, if I delete an object from the master component, it will be deleted from everywhere.
26

27
00:02:09,660 --> 00:02:14,130
If I add a new object inside the Master, that will reflect every other Instance.
27

28
00:02:19,980 --> 00:02:22,690
There are things you cannot override on the Instance.
28

29
00:02:22,710 --> 00:02:28,740
For example, whatever is the component made off. You can't remove or add new layers inside the Instance.
29

30
00:02:29,040 --> 00:02:34,650
I can't drag this rectangle inside the instance, it doesn't let me. And neither I can remove an existing
30

31
00:02:34,650 --> 00:02:41,220
layer from the component. When I press delete on any of the ingredients, it does disappear but it actually
31

32
00:02:41,370 --> 00:02:46,590
is only hidden. And you can see that in the layers panel. The layer is still there, it's just hidden.
32

33
00:02:46,650 --> 00:02:52,780
If I want, I can show it from here. Another thing we can not override structural changes like sizes or
33

34
00:02:52,780 --> 00:02:55,650
the position of the layers inside the component.
34

35
00:02:55,660 --> 00:02:59,710
As you can see, when I select a rectangle there are no resizing handles.
35

36
00:02:59,860 --> 00:03:00,890
I can't change that.
36

37
00:03:00,920 --> 00:03:08,450
However, we are able to change the size of the entire component. So the resizing of the rectangle is not
37

38
00:03:08,450 --> 00:03:12,080
possible, but resizing of the whole component, we can do that.
38

39
00:03:12,140 --> 00:03:17,300
If I change the size of the master component, it's not going to cascade down to the blue button, because
39

40
00:03:17,300 --> 00:03:18,260
it's overriding it.
40

41
00:03:19,510 --> 00:03:21,600
But that's only for the full component size.
41

42
00:03:21,610 --> 00:03:28,310
If I change the size of the rectangle itself, that blue button is now helpless and will have to obey. Neither
42

43
00:03:28,310 --> 00:03:31,110
I can't change the position of the text inside the Instance.
43

44
00:03:31,130 --> 00:03:32,540
There is no way for me to move it.
44

45
00:03:37,680 --> 00:03:43,050
Now as for things that we can override. We can override the styles of each element, whatever they may
45

46
00:03:43,050 --> 00:03:48,630
be. We can override the size of the entire Component, like I mentioned previously.
46

47
00:03:50,520 --> 00:03:52,180
And we can override the content.
47

48
00:03:55,620 --> 00:04:01,050
And again if we override it, then whatever changes we make to the master Component it's not going to
48

49
00:04:01,050 --> 00:04:05,820
be reflected. As you can see the other two buttons instantly updated their text, but the blue button didn't.
49

50
00:04:09,040 --> 00:04:12,000
We're also able to detach Instances from their component.
50

51
00:04:12,010 --> 00:04:13,770
You can do that from here.
51

52
00:04:13,930 --> 00:04:18,520
Once detached, it stops being the component and they're completely free and independent layers.
52

53
00:04:23,510 --> 00:04:30,130
Another thing we can do with Instances, is to reset the changes we've made to them. This option here
53

54
00:04:30,130 --> 00:04:35,020
will reset every single change we have made to the instance, and inherit everything from the Master.
54

55
00:04:35,020 --> 00:04:40,750
We also have an option to reset only particular properties. If we select a rectangle and go to the reset
55

56
00:04:40,780 --> 00:04:46,390
option again, the dropdown highlights all the styles that have been overridden and we can reset them
56

57
00:04:46,390 --> 00:04:47,560
independently.
57

58
00:04:47,560 --> 00:04:53,230
For example, we can reset on the background fill. Or we can reset all the override on the rectangle,
58

59
00:04:53,230 --> 00:04:56,890
without touching any changes that have been made to the text inside the button.
59

60
00:04:59,610 --> 00:05:04,350
If you have a closer look at the layers panel, you'll see that Master component has this diamond icon
60

61
00:05:04,350 --> 00:05:10,530
with 4 squares, and the instance has this single diamond icon. To locate the master component you
61

62
00:05:10,530 --> 00:05:15,060
can select any instance and click Go To Master Component from the properties panel.
62

63
00:05:15,060 --> 00:05:20,250
This will work even if the component is on a different page, but won't work if it's in a different file.
63

64
00:05:20,420 --> 00:05:22,900
Components are part of individual files.
64

65
00:05:23,950 --> 00:05:28,790
To add a component, you can either drag them from a Components panel, or you can just copy paste either
65

66
00:05:28,790 --> 00:05:35,230
a Master or an Instance. If you want to create a new Component, for example, like primary button and secondary
66

67
00:05:35,230 --> 00:05:41,020
button. First, detach it from the component, and then click Create New Component.
67

68
00:05:44,200 --> 00:05:50,470
If you instead, click Create Competent on a live Instance, then that's just going to create a new Component
68

69
00:05:50,860 --> 00:05:53,340
with an Instance as part of it.
69

70
00:05:53,380 --> 00:05:58,630
This gets weird, so make sure to detach it first. All right that's all, for now, you'll get a hang of Components
70

71
00:05:58,630 --> 00:06:02,710
with practice. And we're gonna start that practice by wireframing in upcoming videos.