A component nested into another component should show the override version rather than the master version when pulled from the menu
We create a button with a rectangle fill and generic text and turn it into a master component called "button". We then place an instance of that button into a master "footer" component and override the generic text of the button to be specific to the footer. If I now copy/paste the footer component it keeps the override text. If I opt+drag to copy the footer it keeps the override text. BUT if I drag the component out from the component menu all nested components revert back to the text from their masters.
Everything in a master component should be exactly the same as the master component when dragging and dropping the component onto the artboard. Including overrides from nested components.
This is now available for you in today’s release of XD 34. Enjoy!
Joachim Tillessen commented
It's embarrassing to have your button labels constantly messed up, when you roll out widgets, navbars or footer elements on multiple screens.
Martin Klausen commented
YES! This is the most annoying feature (bug?) in XD as of July 2020. Weird this hasn’t got more votes. Is there another post about this?
Wish I could cast a double vote for this one. I can't believe there's only 5 votes at this time. The fact that components aren't using their override states when included in a nested component severely reduces the usefulness of nested components.
Yes. This is one of the most time-consuming and meaningless things in XD...
In a design system we need hierarchy and inheritance. At this point XD handles these a really poor way.
Embedded / nested components
If I embed a component and change it, the change should be the new default, so when I make new instances of the master, the subcomponent should NOT be reset.
If I create a new state, and change the elements / subcomponents, only the property changes I made should be saved in the new state. ALL OTHERS should be exactly as in the master. This should work in the property level, so if the master state has a regular font style, and on the new state the font is bold, all the other things - text content, font family, size, position, etc. should still come from the master - so these should CHANGE once the master is altered.
Now the component’s boundaries are defined by the contained elements. This is a really bad idea. Components need some kind of frame, artboard in order to make them easier to use in responsive / interactive scenarios.
- There are static components like logos, icons. Now we have to cheat and create a standard 24x24px invisible background element to make them exchangeable.
- There are elements, which have several states with different sizes. The artboard for the states should be able to follow the size changes automatically plus there should be manual control too.
- The artboards should be able to be stacked and push / pull others when needed (like an accordion). For stacking the uniform margin is not acceptable, as in the reality the margins are changing between elements.
Nicole Arocha commented
I'm having this issue as well - when I tried to solve it by adding additional states to the master component the library broke and wouldn't sync to other projects until I removed the additional states.
Either retain the override settings when a component is nested within another, or support components with additional states nested up to 3 levels deep.