Is there a way to combine 2 master components both with variants?
Solved
Combine 2 master components both with variants?
Best answer by tank666
If I understood correctly, then you have two component sets with variants. You can combine these two component sets into one in several ways:
- Select a variants from one component set and move it to another in the layers panel.
- 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”.
This topic has been closed for replies.
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:
- Select a variants from one component set and move it to another in the layers panel.
- 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”.
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
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:
- Change the names of the button components so that they are the same (for example, “btn”).
- Add all the required properties to these components.
- Drag a variants from one component set to another.
You can see an example in this video:
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.