Figma Master Component Quick Tip

One of the new features in Figma is variant (New features are still being introduced, I’m not sure if variants are still new 😄). I’ve also discovered some pro tips since I first used this feature. Small and quick-to-learn tips that will save significant time on your project.

The most common example of components with variants is buttons. I also adapted the buttons to variant in my projects. I’m assuming you know the variants. If you don’t know, you can learn it from this short Figma YouTube video or the variants file in Figma Community. Then you can continue reading.

Designing a Button

I created a button with 4 properties. For example, in the image, you see a variant with the properties: Size; Large, Style; Text + Icon, Type; Primary, Hover; Off.

Let me give a little more information about the button. The padding values of the example button are: 16px to the right and left, 5px up and down. The icon has 34px height and width. Font, SF Pro Rounded Bold 34px. Finally, the background color is # 194FDA. This button is a variant of a component.

And all variants look as follows;

I use variants, everything is fine. So what if I want to make changes to my style guide? For example, when I want to change the color I use as the main color, I choose the Button component with all variants. Then I change the color from the right panel collectively. That’s it;

Note: I have not changed the Primary color from the style guide. To be more understandable and to make comparisons, I detach the color style on the button.

I can do that, although it is challenging to choose each one. In this way, I can change colors, stroke attributes, effect attributes, and padding values altogether. But when it comes to typography, icon features, etc., the process becomes a little more difficult. For example, we usually use icons in frames. So when we want to change an icon, we have to click more than once until the icon in the frame is selected. And imagine that you did this for 10 icons… Annoying.