Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.3 hours
140786 adam noonan thumbnail figma 02 400x277px 102417
  • Overview
  • Transcript

2.5 Working With Components

In this lesson, you’ll learn how to work with components. These are crucial elements in any complex Figma document, and also in team collaboration. Let’s see what they’re all about.

2.5 Working With Components

Hello and welcome to this course. In this lesson you are going to learn about a feature called components. This is crucial for any kind of complex document and also it's crucial in team collaboration. Now we can think of components like reusable elements. Each component has a master, which is the main element. And then there are instances of that element. Now instances can be modified individually, but they will still retain some properties from the master. Now here's the interesting part, when you update the master, all of the instances are updated automatically. So let me show you an example and see what I'm on about. Let's say that I need some buttons throughout my website, right? So I'm designing a button here. Let's make this 16 height. Let's make it 150, let's give it a nice fill color like maybe this. Let's adjust the corner radius to about 100 to make a pill button. And let me actually zoom in here so you can see it better. And then some text. So let's make this bold, 14 pixels and white. And let's select these two and align them horizontally and vertically. Let's set the text to center, and let's group these together by using the command G option to create a group, and I'll rename this as Button. I can select this button then and hit Create Component. This will change its color from blue to purple. I was gonna give it a special icon in the Layers palette, and it's also gonna make it show up in my Components panel right here. So here's the thing, right? I'm just gonna put this outside. Whenever I'm working on a project, on a page, in my project and I need a button. Instead of copying the button from another page, I can simply go to my Components page here, and simply drag and drop. Now this will actually create an instance. It says so right here, instance of the button component. Now I have two options. Either work with this, or go to my master component which will select my master component. Now here's the interesting part. You can change the text here, for example, to, Sign out. You can even change the background color, right? I can change it to this bit. That doesn't modify the master element, it only changes that instance. So I can duplicate this, and I can create another button. Let's make it red, all right? And let's set the text to Delete. But the thing is, now if I go to my master and I change something, for example, the text, maybe I want a bigger font size, maybe I want it to be 16, right? Well that changes in the master, but also in all the other instances. Maybe I want this to have 10 pixel radius instead of 100, right? Well I can do that, and these will change automatically. This is the nice thing about components. Now you have no limit as to what you can put inside a component. If you want, you can select an entire frame and you can make a component out of it, right? Just like that. And one other thing, if for some reason you want to reset a button to the master or reset the instance, you can right-click and select Reset Instance, or you can click this little button here. It's gonna revert it back to the master. You can also detach the instance, and that will simply create a regular group instead of being linked to the button instance. Now once you do that, you can not simply attach that group to an instance again. You would have to delete it and reinsert the component from the master. Now components, as I was saying in the beginning of the video, play a huge role in team collaboration because you have the option to publish the file to the library. So those components will be accessible to other people. For now, pretty much this has been short introduction to what Figma can do. The user interface and all of that stuff. But let's actually go ahead and try to look at this from a designer's perspective, right? So what is it like to actually design something in Figma? We're gonna do that in the next lesson. I'll see you there.

Back to the top
Continue watching with Elements