Allow component instance overrides to be inherited by all states
Currently (XD 220.127.116.11), if I drop an instance of a component and then adjust part of it (text in a button, size of the instance, etc.), that override is only applied to the selected state of the instance. So, if I have a button with many states (normal, hover, disabled, active, default action, etc.) I have to manually apply that override to each state of the instance. This is extremely tedious and error prone.
Please provide the ability to have an override of an instance be inherited by all states in that component instance.
Martin Marek commented
You can inspire from Antetype where you can select multiple states and modify a property (e.g. text or color) for all those selected states.
Amanda Staunton commented
Instances are great...in concept only. It's been extremely frustrating that when you change the state of a component it doesn't save your overrides. Come on Adobe, you can do better than this.
When creating buttons using a master component, updating the text for each state of the instance is pretty time consuming.
It would be a big help if it was possible to mass set the state of a selected group of components that have the same master.
Yes! Please for the love of God add an option that can be enabled/disabled which allows the default state override to be inherited by all states. Without it. sharing design systems & kits is extremely tedious when the team has to change each state for each element. (Most elements in our kits include micro-actions & states)
Karen Beal commented
I was considering moving to XD from Sketch, but this issue where the label text change (in an instance of a button for example) isn't kept in the state or hover is really pointless! Why would you want to be able to use a button master throughout a design and it not be able to use the master state change when the button text changes? Essentially because you can only add a hover or any multiple state to a component master, you can't actually make any hover or interactive states for any buttons unless you make a master for every type label for a whole website. Or am I missing something?
Peter Villevoye commented
These two concepts (how Components work with overrides and how States work with differences) are not thought through enough. They clash and conflict in wonderful ways. Attaching these two features at the hip was a wrong idea. I hope they'll be able to surgically cut them loose from each other...
I have two content-aware components - buttons (primary and secondary)
Let's say I used primary button component and I changed the dummy text to the one that fits the context. Then I realized that it should be less emphasized and want to turn it into a secondary button. I take the right component and drop it on my instance.
What happens now:
The style has changed but also my text turned into the dummy one that is present in the component master.
What I would love to happen:
It would be great if I could apply just a style and keep the right text on the button while switching between components.
You cannot use a different styles for the text in your component if you want to change the text in the component copy. It only override the default style and not the other states. It's a big problem and painful!
I agree! And please add the following.
When exporting a component that has different states, there is a great lack of automatic suffix (as a state name) to the main component name.
For example, there is a component with the name "button". It has three states "default", "pressed" and "third". If I just duplicate it in the file body, then all duplicates will have the same name, which is very inconvenient when exporting. You have to rename the duplicates yourself manually. ((
It would be much more convenient if the name of a particular state is automatically assigned to the main component name, when you duplicate it. That is, from my example, "button_pressed" or "button_third". It will make the work very easy)
Luca Rosaldi commented
States are a wonderful feature, but not at this... ehm... state.
Ideally, all changes made to the default state should be inherited by all states in that component, while changes to a substate remain confined to that substate.
Also, changes to the states of the default component should be inherited by all instances of that component.
I understand this is not a simple implementation because there are many variables and different behaviours involved, but it is vital to the feature (and a great help to designers if developed right).
This basically renders this software unusable seeing as if I don't get the size EXACT or God forbid I need a different size I have to resize all the states... terrible.
John Vanore commented
It is not true that if you resize the default state of the component, the other states will also resize. This only works on a master component. Any other instances of components require resizing every single state individually, even if you resized the default state first. The other states do not resize, not even when responsive resize is set up identically across all states. Incredibly frustrating and making me rethink using XD as my prototyping tool altogether.
+1 This seems like a no brainer. Layer styles are simple and easy to use in Sketch. If you're going to promote this product as being quick and easy, you have to get the basic things right.
I created a set of cards yesterday, all based on a single master-component. I spent quite some time to iterate the content on all of them (basically just text) which worked fine. I did all of that in the basic state of the card. But when I added the hover-state to the master and hovered over the instances, the instance changed the text to the masters. As if the hover-state is not recognizing the text I added to the instance. Please let me customize text on instances and let that be reflected in the hover-state as well!
Cedric Chase commented
+1 come on, adobe
Stephane Baril commented
For example, when you have a button with several states containing a label and you want to change the default text label, you have to update every state of the component one after one.
It will be nice to be able to define a text as persistant inside the component states.
Perhaps a simple checkbox in the Properties?!
Or a way to link/bind only some states and not some others for more flexibility!
Jens Winther commented
Please fix this soon. I have to do double, triple, quadruple the work to use components/instances/states.
Come on adobe. You could just add an "apply latest transform to all states" button. This is annoying as all get out.
100% agree. The states feature is useless without this ability