Figma Support Forum

Combine 2 master components both with variants?

Is there a way to combine 2 master components both with variants?

Hi @Soffee_Yang, could you tell us in more detail what you want to achieve?

say if I have a Button for desktop with 3 variants (default, hover, disabled), also a Button for mobile with 2 variants (default, disabled), can I combine the desktop button and the mobile button to one “Button” component?

If I understood correctly, then you have two component sets with variants. You can combine these two component sets into one in several ways:

  1. Select a variants from one component set and move it to another in the layers panel.
  2. Or select a variants from one component set and drag to another on the canvas.

You may need to add an additional property to your component set, such as “Platform” with values ​​"Desktop" and “Mobile”.

With any of these method, I’ll still have to manually change the other one to the new component right? eg. I’ve already used the desktop button and mobile button in multiple files, if I drag all the variants of mobile to combine with the desktop button components, after publish the update, I’ll still have to manually swap all the existing mobile buttons to the new button components in order to keep up with any further changes.

So that you don’t have to replace instances manually, you need to do this:

  1. Change the names of the button components so that they are the same (for example, “btn”).
  2. Add all the required properties to these components.
  3. Drag a variants from one component set to another.

You can see an example in this video:

1 Like