Create master component outside of variant section

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.

1 Like

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.

2 Likes

Thanks a lot! I understand how it works now. Can’t believe how simple it was lol

:thinking: 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.

:see_no_evil: Too much to read … but thanks a lot.
Missing a bunch of tuts about working in progress not only feature explaining :wink:

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.