Component variants (parent-child, inheritance)
While Adobe XD Team has certainly done an amazing work toward design systems creation in the tool, it still lack a bit of power.
Actually, it's quite tedious to create, maintain and use a design system in XD. Especially when working with multiple variants of a component.
Let's say I need too work on an app design and I want create my buttons in my design system : primary, secondary, alert, w/icon, large, small...
With the current XD, I only have 2 solutions and both have are really time consuming to maintain :
I need to create a separate component for each variant. So, let's say I have 12 variants, even if the required change affect a shared property, I still need to do 12 changes, one by one. And I don't even count the states and interactions related to each variant, which increased the time loss exponentially... By the way, the style panel being tiny, it rapidly become cluttered.
I can also created a component and put also variants in state but then, interactions are not inherited from on state to another. Besides states space/scroll area is not very tall, so with so much states to remember (cause we can't reoder them) out of sight it isn't as efficient as it could be. Plus it feels a bit weird to use states for variant as they are more than states.
A good solution for that would be to have a main component which could host variants inheriting its properties, states and interactions. Then the main component itself would be the default variant.
Ideally, variants would be organised in at least 2 levels of inheritance :
Main component > Variant LV1 >Variant LV2
For instance :
Button > Secondary > Large
It's really bad that the instance states do not inherit the size. So every time you use a child by a parent and change it's size, states do not inherit the new size ... compared to Sketch it is so hard to reuse icons and components in different sizes with different states. Seems to me that XD team has only worked with very simple use cases, as soon as you get into few levels down things get complex and it all falls apart. Please take into consideration that we define global icons at size eg. 64x64 then we create states in different colours and variations then we resize that to use in multiple places. I just want to easily switch, replace icons, states ... it just has to work smooth and be effortless. As others states we manually have to readjust this all the time.
I am about to create a complex design system and variants a la Figma style would be amazing.
Sergei Tarasenko commented
I want to be able to select not only states on hover or Toggle.
I want to have Variants and State Of Variants.
Such is perfectly implemented in Framer X
Calvin Joseph commented
Just want to up vote this. Seriously needed. Our Org is in the process of Design System Redesign starting with a revamp on Design Tokens. The documentation adobe provides for Design Tokens are great, but their own software doesn't support component tokens.
It's odd because the Spectrum Plugin does an excellent job handling component variant. I would even settle for having that plugin extended to custom DSM.
Let's worry about the basics before we start adding in 3d transforms.
If I make a template button with an icon and some text with several states. I then make a duplicate of this button and edit it's default state, these changes do not cascade down through to the other states like it does when I'm editing the master component. It would be amazing if I could in one click tell XD look even though this a child component, I want it to be able to inherit all changes I make to the default state as if it were a parent component
This is something that both Sketch and Figma can do it which makes handling Design Systems much easier than in XD. Come on XD! you should add this feature too!
Wolfgang Harland commented
Let's say you create component A. Then I duplicate it to create instance A'. Then I break some some links (I don't know, maybe I change the color and reposition some things). Then, I duplicate A' to create A''. Currently, both A' and A'' will still follow modifications to A, as long as those feature links haven't been broken. However, if I further modify A', this will not cascade down to A''. I want a system where modifications to A cascade down the chain to A' and A'', and modifications to A' will cascade down to A''. Essentially, instead of each component instance only having a single parent, there is an actual lineage of components. A is essentially the grandparent of A'', and A' is the parent of A'.
This would be incredibly helpful when doing responsive design for screens of various breakpoints. As I design each new breakpoint, I could make modifications to the components within it. Then, when I move onto the next breakpoint, new relationships between each iteration can be maintained, while also keeping everything consistent with the component instance that preceded it.
Melissa Sanchez commented
Create a related component from the main one, where the foundation is the same but unique changes are applied and saved as a new component if necessary., keeping the relationship of shared properties from the main one.
MVP could be just creating a new component out of an instance would be nice to have as well.