Allow component instance overrides to be inherited by all states
Currently (XD 22.214.171.124), 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.
I currently have 40 different button components with the only difference being the text inside of the button OMG please fix this
Johan Dahlin commented
Christoph Leitner commented
The current behavior is annoying in most instances. A desirable behavior would be that if states have matching horizontal and/or vertical dimensions in the master component they should also have matching dimensions in instances which have been scaled - no matter what state was active when the scaling happened.
Example: I uses several instances of my table column header component for my table header. They are scaled to have different widths. There is a component state including a sorting arrow for the column which is used for table sorting. Changing the first column to the state without arrow and the third column to the state with arrow should not require scaling of the components – their width should just match.
This is a nightmare and time consuming. You could do this two ways, the first would be just allow a highlight of the default and animated state. Second would be just allow a scale feature that scales in percentages like all your other apps. Why can't I just click each item and determine the percentage I'd like to scale ex: 50% or 120%, Whatever. So basically creating an animated component is useless if you need to resize it from web to mobile?
Austin Condiff commented
Let's say I create a 128x128 Card component with multiple elevations as states. If I create a new instance of the Card component and resize it to 300x400, then change states, I expect it to retain my 300x400 size rather than reverting to 128x128 because I changed the component size, not the shape inside the Card component.
Jonas Hartmann commented
Totally agree. One of the most urgent features for me.
Two things to have in mind here.
1. Most of the time i use buttons with different texts. Would be nice i wouldn’t have to copy a new text in to every state.
2. On the other hand, sometimes i want the hover state to have a different text or width or anything,
especially for animations.
> I think it should be default, that chances of the default state should overwrite the other states (form, size, text, …) But if i have already changed the hover state manually it might should not overwrite or it should ask me, while editing the default state if it should overwrite the other states?
I would say fix it but it's not broken, it's just that you probably didn't plan this feature correctly. I am no longer using states. I wanted a Hover state and "On" state for a button. Then when I put this button in my prototype and change its label, when I place the cursor over the button it shows the original label from the Master. Defeats the whole purpose of components. Either "fix" this or be done with this feature.
This is a MUST.. if I want to use the same button component over and over, I have to manually adjust the Hover state of every button.. it is not fast and easy as it should be
Marcus Fridholm commented
This is a very tedious way of how component states work. Like for instance, I have a form with a lot of fields. If I want to show that a field is active or disabled for changes. I can't just change the state, I have to change the state, the label and the value.
It gets old very fast.
Crazy that this isn't how this works from day 1. The feature isn't complete without this. No one wants to redo their overrides for every single state on every instance. Makes this feature almost useless.
I am surprised that this feature has so few votes. This is essential!
Padding is nice ! It's now possible to create a button which automatically rezised with my label.
Let's go further now.
I've a component with padding ON. This component has also a hover state. In this hover state I've got a beautiful animation using a mask with the same shape as my button.
Problem is when when I changed my label my button width change but not my mask layer. So my hover state doesn't work anymore.
When the size of my component dynamically changed all layers with responsive mode need to resized also dynamically.
Wojciech Obuchowicz commented
Absolute stopper for starting use xD components. Recreate whole text nodes is unreal. Thanks for fixing this.
Absolutely agree that this needs to be fixed! Current implementation breaks our flow of designing, as we need to manually apply overrides in every state of a component. It currently just costs too much time to work with.
Kalia Hayes commented
This is such a need for me. It's getting so annoying that I'm already on the hunt for alternative programs.
I have the buttons that have different text lengths with the same hover effect. When I resize the default state, the other states need to be resized at the same time, which makes the component more powerful and reusable.
yes when you use a button on both mobile and desktop it's really annoying you have to rescale everything, it's really time consuming
Jack Minogue commented
I absolutely need this functionality. Its killing me to re-create text overrides across all states of my components. Please put it in the next release!
Luke Mazza commented
This is a breaking issue and an obvious bug in my opinion.
What's the point of a component (and states) if you can't change the text/color/styles without unsyncing the various states from each other?
We started rolling out states in our design system but had to roll it all back because it was breaking our prototypes.