Let's create a button. 1
Now, if we select this button and click this Create Component on the toolbar, this will turn this button 2
into a Component. Which we can reuse across our file and drag them anytime from the Components Tab. Components 3
in Figma are the group of elements. 4
So with styles, we create this global connection for one particular style. But with components, we can create 5
a global connection for several styles, and every single other object that's inside that component. 6
The original button is called the Master competent. And the one we just dragged is called the Instance. Changes 7
that we made to the Master, will be reflected on every single instance. But each Instance individually 8
can override the Styles for themselves. 9
However, the changes are not going to be reflected back on the master or any other instance. You know, 10
sort of like Combo Classes in Webflow. And just like Combo Classes, new changes to the Master will affect 11
only the styles that have not been overridden. 12
So the first instance did change the color to the green, just like the master did, but the other 2 below 13
didn't. 14
Why? 15
Because on the 2 below, we have overridden the background fill of the button, but on the first one 16
we didn't touch it. 17
So it still inherits from the Master component, until we override it. And exactly like Combo classes 18
in Webflow, 19
other styles that we didn't touch and didn't override, will still be inherited from the Master. 20
For example, if we round the corners of the button. 21
One big difference between classes in Webflow and components and Figma, is that classes don't have other 22
elements inside. 23
For example, if you create a class for a hero section and you put headlines, buttons and images inside, 24
those elements are not part of the Class. But in Figma Components, they are. 25
So, if I delete an object from the master component, it will be deleted from everywhere. 26
If I add a new object inside the Master, that will reflect every other Instance. 27
There are things you cannot override on the Instance. 28
For example, whatever is the component made off. You can't remove or add new layers inside the Instance. 29
I can't drag this rectangle inside the instance, it doesn't let me. And neither I can remove an existing 30
layer from the component. When I press delete on any of the ingredients, it does disappear but it actually 31
is only hidden. And you can see that in the layers panel. The layer is still there, it's just hidden. 32
If I want, I can show it from here. Another thing we can not override structural changes like sizes or 33
the position of the layers inside the component. 34
As you can see, when I select a rectangle there are no resizing handles. 35
I can't change that. 36
However, we are able to change the size of the entire component. So the resizing of the rectangle is not 37
possible, but resizing of the whole component, we can do that. 38
If I change the size of the master component, it's not going to cascade down to the blue button, because 39
it's overriding it. 40
But that's only for the full component size. 41
If I change the size of the rectangle itself, that blue button is now helpless and will have to obey. Neither 42
I can't change the position of the text inside the Instance. 43
There is no way for me to move it. 44
Now as for things that we can override. We can override the styles of each element, whatever they may 45
be. We can override the size of the entire Component, like I mentioned previously. 46
And we can override the content. 47
And again if we override it, then whatever changes we make to the master Component it's not going to 48
be reflected. As you can see the other two buttons instantly updated their text, but the blue button didn't. 49
We're also able to detach Instances from their component. 50
You can do that from here. 51
Once detached, it stops being the component and they're completely free and independent layers. 52
Another thing we can do with Instances, is to reset the changes we've made to them. This option here 53
will reset every single change we have made to the instance, and inherit everything from the Master. 54
We also have an option to reset only particular properties. If we select a rectangle and go to the reset 55
option again, the dropdown highlights all the styles that have been overridden and we can reset them 56
independently. 57
For example, we can reset on the background fill. Or we can reset all the override on the rectangle, 58
without touching any changes that have been made to the text inside the button. 59
If you have a closer look at the layers panel, you'll see that Master component has this diamond icon 60
with 4 squares, and the instance has this single diamond icon. To locate the master component you 61
can select any instance and click Go To Master Component from the properties panel. 62
This will work even if the component is on a different page, but won't work if it's in a different file. 63
Components are part of individual files. 64
To add a component, you can either drag them from a Components panel, or you can just copy paste either 65
a Master or an Instance. If you want to create a new Component, for example, like primary button and secondary 66
button. First, detach it from the component, and then click Create New Component. 67
If you instead, click Create Competent on a live Instance, then that's just going to create a new Component 68
with an Instance as part of it. 69
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
with practice. And we're gonna start that practice by wireframing in upcoming videos.