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
Hugo Frossard commented
I work in a big company. In our assets library, we have for a same component:
- Different sizes (small/default/large)
- Different colors (primary/secondary)
- Different combinaisons (with/without icon for example but there are many different options)
The only thing XD cover today is the different states which is not enough when you consider other aspects described above.
Today we are obliged to multiplicate states (or multiplicates number of components) in order to fix this miss.
I add an example from Figma which describe pretty well the idea: You can for a same component define a list of properties you can activate when you use them from your library.
Dorothy Toth commented
I agree with this post and everyone below - it's unbelievable that XD - BY ADOBE - doesn't have variants. I love you Adobe, but you need to step this up, or you will loose us to Figma. Take the power of InDD and other apps into XD, and create and manage libraries of components, variants, type styles, etc.
We need THIS FOUNDATION FUNCTION before all else, before animations, micro interactions, etc. This is sooooo basic.
Jon Bueno commented
How are there not more votes for this? This is literally THE reason if I have to create a large design system I se figma over XD.
Just yesterday our largest client came to us. They use AEM and all their designers are on the CC (like all designers are). They wanted me to figure out a way to use their massive design system m in XD… I’m having to convince them to start using figma because of this very limitation.
I would LOVE to create large systems in XD… it’s UI, standardized design tools and quality desktop app make it light years ahead of fig on many levels… but until XD gets on equal ground with component building with variants and properties… it wont even be an option for large scale design systems.
If anyone at adobe is listening… hit me up. I will explain to you why, I will show you what we need from you. You could destroy figma just like you destroyed quark… but you have to focus on the right things… the critical things, not this piddly surface stuff… If I can build an advanced component lib in figma and it saves me 100 hours of work over what I’d need to do in XD… it’s figma all day long… regardless of what shiny feature you just launched.
Hugo Frossard commented
Unbelievable there are only 33 votes for this features and more than 1000 for stupid micro animations.... I work for a big company (more than 5000 just on our site) and we built a design system with XD but now we are clearly envisaging to switch to Figma thanks to this feature which will facilitate life of our designers..
Anyway, I hope Adobe is conscious about that if not they will have a surprise in 2022 I guess....
Carlos R commented
I'm in dire need (have been for a year plus now) for components to take the actual step to make them usable for the actual building of sites and products. If I can't easily output and document them and have my devs consume them, they're useless really.
I'm about to head into a major redesign and I'm tempted to just switch to Figma to make life easier.
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.