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:
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:
-
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?
-
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
