Master Figma Components in 4 Mins | 2026 Tutorial

Start using Figma components if you want to design faster and keep everything consistent. Let me show you. I will change just one thing in this button here and it updates across all screens instantly. That's the entire idea behind components. In the next 5 minutes, we will cover master versus instance, creating a base component, properties and varants, using components in real life screens, and finally building groups of buttons for real life UI situations. Let's start with the basics. I will create one simple button text only for now. Once the button is ready, I turn it into a component with the shortcut. Let's make some copy of this button. The master component is the source of design. Every instance takes things like background color, font, border, radius, padding, all the core styles from master component. But they are also things you can safely override in an instance without breaking anything. For example, the text label. If I change something inside instance, the master stays unchanged and every other instance will also stay the same because instance can affect on other components. That's why components are powerful because the control is only in one place. Okay. Now let's use the full potential of components. Right now we have only one version of the button. So let's add more variants. In this case we can go for button with left icon and only icon button. Okay. When we have that, let's make other types of button. So, copy the first type of button. So, that's going to be primary and the secondary and the third one text only tertiary. And now we have multiple combinations of our button. Now, let's actually use those components in a real project. But before that, remember about leaving like and subscribe. And let's back to the video. There are two simple ways to add component to our project. The first one is drag this instance from the master while holding alt and the second one is go to the assets panel search for button to take and drop it into the screen. I made few screens already. So let's drop the buttons into them on placeholders. Okay. And now imagine you are designing a real lab and suddenly you decided that the primary color should be blue. So I go into a master component change the color once and every instance across every screen updates instantly. Also you can see having exactly the same button everywhere gives us feeling that our app look more professional. But sometimes you want to change something in instance that mother component didn't allows you. For example having two text inside button. In this situation we need to detach component and right now our component is no longer connected with master. So we can do everything what we want. Next big thing is grouping component into one component. In our case in the screen, one button isn't enough. So let's build a component for that. I will create a frame. Turn it into component to varants. Change the variant names. Okay. And add this to our design and see how it works. You can see we can easily change amount of buttons just by one click. Also you can see here we can use nested properties and this gives us opportunity to change every component without going really into the top component. In this case this frame is becoming more useful if you have components with many instances inside because you don't need to click multiple times with mouse. Okay. Now let's take a look at the final project. I made more screens. I use component in them and the whole design works exactly like we want. And right now if I update something in the master component for example change color, change border rads automatically in seconds. This is the biggest advantage of using components. But it's really important that there are some areas where creating components isn't the best idea. For example, tables. Of course, creating table cell or table row isn't a bad idea, but I wouldn't recommend adding them into a huge table component because you wouldn't be able to do changes without detaching component. For example, you can add the next row. As you see now, components are really powerful and you need them to be a great designer. If you made this this far, type components in the comments, leave a like and subscribe. Theo in the next