Skip to main content

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.

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.