Hello, I duplicated a file which displays different style buttons created with variants. However, I noticed that the master component is not inside the variant section but independent of it. See pic below.
My question is, how do I create a master component that sits outside the variant section that when altered, it will simultaneously change all buttons inside the variant section.
Thanks in advance.
Best answer by tank666
Create a master button component like btn-base. Create an instance of this component. From this instance you make a new component, for example, btn-variants. Create variants from btn-variants.
Structure: btn-variants ⟩ btn-base ⟩ btn-label.
Create a master button component like btn-base. Create an instance of this component. From this instance you make a new component, for example, btn-variants. Create variants from btn-variants.
Structure: btn-variants ⟩ btn-base ⟩ btn-label.
Thanks a lot! I understand how it works now. Can’t believe how simple it was lol
🤔 I still have a misunderstanding with it. Was not meant how that goes retroactively?
A button with variances is already there. Now I want a master component (_MasterButten) that affects these variants
You may no longer need to create a base component, because Figma has a tool to select all matching layers. You can read more in this thread: Component properties and their implications on base component workflow.
Regarding your question, how to create a base component for already existing variants, I see only a way to recreate your variants from scratch. Maybe the Master plugin will also help you.
🙈 Too much to read … but thanks a lot.
Missing a bunch of tuts about working in progress not only feature explaining 😉
I use this approach (one base component) in order to change variants. However, this is approach has to problems: sometimes interactions don’t work because of nested components, and when I was creating tooltip components, I set direction pointer in my base component, but wasn’t able to move it arround inside the variant.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
