How does instancing inheritance works, and how can I structure my button component?

Hi all, I’m a bit stuck on the component instancing and how to structure my component. I have primary, secondary and tertiary buttons, with four sizes each, two states (default/hover) and 3 variations (left icon/no icon/right icon). That’s a lot of permutations, and would be a pain to update something across them all, so I figured I’d just have external masters that are instanced inside variants for controlling main stuff, so I have a single place where I can change style for “primary” button and have it cascade, such as following setup (skipping icons and other stuff for ease of demonstration):

So first we have a local component with 2 size variations, which is instanced into a component that controls different button types, etc, and then putting it all together in main “button” component to the utmost right, where you click through nested components to the right “level” and select right variant of it:

image

The issue however is that any changes on size/master/state masters do not propagate to “large” variants inside “Final” component, such as changing the fill on “style master” here to red:

I expect “Large” under final to inherit all the changes to the styles from “Style master”, which is did at first when I switched to “large” variation, but then it becomes separate and is stuck on white background for some reason. No changes are done to any instances under “variant” besides changing their variant.

So two questions:

  1. How does the logic of component instancing inheritance work here? Why does small button under “Final” receive updates from “style master”, but large button does not after it been created?

  2. How do I structure the button component according to my needs at the start of the top while allowing for quick modification across a certain kind of property, such as changing background on all “primary” buttons? I don’t exactly want to select 50 buttons and do changes that way…

File with example: https://www.figma.com/file/BdUGQb65t6TFyzjIhBtJk7/Component-instancing-issue?node-id=2%3A2

1 Like

You’ve added a fill to the wrong layer level (to the Size instance, instead of the variant’s parent layer of the Style component).

And why don’t you combine the Style and State components?

I’ve duplicated and modified your file so you can see and test if this solution meets your requirements:

Hey, thanks for the help! I figured I was supposed to modify the original component, and its modifications would carry on when switching to a different instance, and they do, but then stop receiving updates for untouched properties.

While your approach solves the issue of background color, there’s still issue of text properties not receiving updates. For example primary button’s font color on “styles” component doesn’t update it across all variants in the final component.

I guess I could address this by adding a font color variation to “size” master but it feels a bit of a weird way to go about it :thinking:

And yeah I figured I could combine style and state after I posted it, gonna do that :slight_smile:

So use another concept that I added to the file:

In general, experiment with different combinations. Only then will you find the right way for you.

@Svarrie Avoid different component sets for different steps. Scalable variants is the only way to go. Use one (or more) master or ‘base’ components with all possible layers/nested instances in it. Then duplicate as many variants as you need, then hide layers on/off, changing color for states etc. for all your variants.

This video describes it well: Building scalable variants in Figma using `.base` components - YouTube

I’ve been trying for a while. Thanks for taking another look, but it seems my problem doesn’t have a solution unfortunately, because as soon you switch to any other sub-variant in the final component, it stops receiving updates from the level before it.

For example in your latest edit, if you change the auto-layout spacing on “.size-plus-icon” it does not cascade to any of the buttons variants other than the default one. Plus now the size of the button is controlled in 3 different components, one for each icon state :confused:

Thanks for the answer. Figma has countless different ways and combinations to try. You can see another example below: