Scale all component states when scaling the instance
I have animated icons with auto animate and wish to use them in two sizes: Small size in the menu and big size in the features page.
When I scale up or down the component it only scale that one specific state. We need it a way to scale all states so we can have a few less components. and a fast workflow.
Concrete use case where it would be needed : simple and basic contextual menu. If I resize the main component (contener), I have to resize every components cell insides...
The worst thing is it will resize the current child component state, but not the others...
In addition, not every users are designers. The way it works make things way too hard to maintain.Our design system is shared with Project Managers, Product owner, Developers... This kind a detail is a real pain point for adoption in our company.
WTF XD – how do you not include scale!!!!! SMERIOUSLY????
Wanting to move over from Sketch to XD.. but their control over components is not as good as Sketch's Symbols - I want to be able to edit the sizing of the master component and it affect all instances - not have to edit each one separately as overrides!
Anyone know if they will be improving this?
Josh Laeupple commented
Definitely a big need!....It would save a lot of time.
Damn yes. I'm losing so much time not having this feature. The more I use XD, the more I'm wondering what Adobe's waiting for implementing basic features. (hello drop shadows on element groups, and hi static scroll !).
I am again surprised that this feature isn't there. There should be a way to select the whole button and resize all states, rather than just the default one.
Roel Berends commented
I could really use this feature.
Piotr Braszak commented
Yes, please, so very much! I got a project that spans across over 250+ artboards. All of them use some master components, and if a feedback comes to change a certain component, it'd save me unbelievably large amounts of time. Not to mention all buttons that come inside that component too.
I am also looking forward to seeing this update made. The states almost aren't usable otherwise.
Luis Rodrigues commented
The components really need more features of overriding and instance like in Sketch, I am working on a huge DS and I have been importing components from Sketch when I want to use a symbol and replace for another icon inside we should have an easy way of replacing this, it happens that when I drag the icon from the components because it has a different size, overrides the size assuming the size of this icon it's completely insane
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.
Come on adobe. You could just add an "apply latest transform to all states" button. This is annoying as all get out.
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.
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
Thanks but I saw that when you resize le main state, it doesn’t work every time but the real thing is that when you create for exemple a text menu, it is not interesting to change the main object but each copy to fit
Thanks for your feedback.
If you resized the Default State in the Master component all other states will change to reflect that new size.
However, if you created an instance of the master component and changed the size of its default state, the other states won't change in size. This is an area that we're working to improve the experience in so stay tuned.