Bug details

Master component changes do not update on children if master has subcomponents

Version: XD19

Steps:
1) Create a rectangle with a black fill, convert that rectangle to a component.
2) Use an instance of that new component to create another component (perhaps in addition to a text layer so those two together make up a button)
3) Change the master of that button component to have a red background color
4) The instances of that button component do not reflect the red background, even though they have 0 overrides

Expected: Changes in a master component get reflected in its children
Result: Child components retain the initial state, even though they have no overrides

4 votes
Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)

We’ll send you updates on this idea

Jan shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

Hi Jan,

Thanks for your reply. Apologies if I was unclear – I didn’t mean to say that all your nested components must be master components, but to demonstrate that if you are editing master components, the edits will propagate to the other instances.

So in the original example you posted, you were actually overriding the fill color in a nested instance (not a master component). If instead, you right-clicked on the nested instance and chose ‘Edit Master Component’, your viewport would have panned to the master component, and then any changes you made to the master component would propagate to its instances. It doesn’t matter if the instance is nested in another component or not.

So nested components are fully supported in this new master/instance model, but the important thing to remember is you must edit the master component, either directly in the parent component or by right-clicking on it and choosing ‘Edit Master Component’. Then any changes made to the master component will apply to all instances that have not had the same property overridden. Otherwise, you’re overriding a nested instance.

Hope this clarifies it,
Joe

2 comments

Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
Submitting...
  • Jan commented  ·   ·  Flag as inappropriate

    Hey Joe,

    Thanks for your reply. Creating a larger design system however requires components to be nested and being used as a base for other components just with overrides).

    Think of a common button_bg component that defines the basic shape (border radius) of buttons. I would use that common component in all other button components, propagating any change of e.g. the border radius to the other components. I'd use that button base component with color overrides in all the buttons.

    Requiring all components to only have master components somewhat interferes with that approach.

    Thanks!

    @Armando: Exactly, I believe all changes to subcomponents simply get ignored inside components and revert to their original layout.

  • Armando Scuro commented  ·   ·  Flag as inappropriate

    What I noticed from testing, is that if the component has another component or even a group inside of it, changing the layout inside the nested group/component doesn't propagate changes of master component to its instances.

    basically only changes done to content inside a component propagate, not changes done inside a nested group/component

    hope this helps, and hope this is what Jan was discussing

Feedback and Knowledge Base