Keep elements properties between states (propagate text)
It would be awesome to be able to mark some elements inside a compontent to not change some properties on its states, for example, text. If I change the text on the main state, it would change the text inside the other states. With that, I would be able to improve my work on making hover buttons all over my prototype. The way it is now, I need to change the text inside all the states, what makes it impossible.
Anonymous
shared this idea
Apologies! I sent the Email to the wrong ticket.
32 comments
-
Martin Schilde
commented
Working with components becomes a very cumbersome content management task when working with multiple states.
Simple example: a button component with standard, hover and active states. Re-use this component for another button and change the text – I have to update the text in each state separately.
Or have a pic that zooms on hover.
Would be best if I could designate a "variable" like text-field or pic-frame, once filled in in the "standard" state, it carries it´s content troughout different states and ONLY applies changes to it (color, size, …)
-
Martin Schilde
commented
Working with components becomes a very cumbersome content management task when working with multiple states.
Simple example: a button component with standard, hover and active states. Re-use this component for another button and change the text – I have to update the text in each state separately.
Or have a pic that zooms on hover.
Would be best if I could designate a "variable" like text-field or pic-frame, once filled in in the "standard" state, it carries it´s content troughout different states and ONLY applies changes to it (color, size, …)
-
Evaluz Luna
commented
I have created many button states on my main UI (the base of my design system).
BUT when I'm prototyping or building a screen with my UI kit and I change the copy of the "rest" state, this copy doesn't change for the rest of the states which forces me to modify it, EVERY time, BY HAND.
This (as you can imagine) is time-consuming and not ideal.
Id' love if you just allow the component to inherit the copy of the rest state. -
Anonymous
commented
Please do this quickly - this is a huuuge time-waster.
-
Anonymous
commented
A duplicate of a component as a new base for another element could help here to keep also other properties e. g. width.
-
Anonymous
commented
Description: I want to create a button with text and different states as a component in the library. Each state should show the same text. Only element properties like the color of the button, the button outline and the text color should change from state to state. In the component instance it should be able to change the text in the default state and then all states take and display this text.
Current behavior: When I create new states of the button, each state gets a copy of all button elements. If I now use this button from the library, I get an instance, where I can change the text of the button. But the text will only be overridden in the current state and not in all states at once. I need to go to each state and change the text to the desired button name. This is much work when having a lot of states and a lot of different buttons.
Solution: Add the property “Keep text of the Default State” as an option for a component instance.
Value: It saves time in the prototype creation phase if I only need to change the text of the default state in an instance of a button component with many states.
-
Michael Provenzano commented
A checkbox to ALLOW for text propagation would be an invaluable addition for designers, not only for their workflows but for developer handoff. As someone who wears both hats, I tend to be a developer-friendly designer.
To ensure consistent typographic styles, including padding, I create a "Text | Content" component. I can then toggle between text states as if they were HTML classes or HTML tags (H1, H2, H3, P, etc.) While this approach is faster and more flexible than having separate components per tag/class, I have to copy and paste the text from one state to another if I decide to change my styling from an "H1" to an "H2", for example.
This feature would speed up my workflow while ensuring consistent typography in my designs.
-
Ara Garabedian
commented
Hahaha, a blast from the past indeed, but a bit more useful for components than what we have now imo
-
plainclothes
commented
Wow -- that Flash reference brought back some painful memories!
-
Anonymous
commented
The lack of this feature is terrible for productivity. Who names all their buttons the same 🤦♀️
-
Ara Garabedian
commented
Something's gotta give with component instance editing efficiency. Having to change a component instance label 3 times (Default, hover, active), at a bare minimum, for a prototype, even if it doesn't change between states (content or visual presentation) is silly.
The problem is exacerbated even more when, for example, I have a menu item component instance that is paired with an icon. I have to change the icon 3 times and the label 3 times, multiplied by each menu item.
Flash nailed this in its time in my opinion. Create keyframes in a relevant state's layer, only when you need to change them. See attached example.
-
Edu Couchez
commented
Same here... one of those typical XD stress creators and time waster... each time I've to do a single text change in a menu or button, I've to manually copy paste it again in all the descedant states. When it is a complex component, with high hierarchy logical components structure, is absolutelly impossible to predict results.
After weeks of work, I've always to break everything and start to build again each component, wasting hundreds of hours, and most important: health... cognitive frictions, rigid and unintuitive UI, estress and lots of errors due to bad user workflow.
XD is still a beta app, we pay to work as betatesters. Worst of all... we have to vote to get common sense!! Where are the UX designers at Adobe?
-
Tobias Frithiofsson
commented
When using a component (the same one) in a list it would be great if you could highlight multiple and change their view state
ex. have a button component with two states (default and hover).
I use the component to make two buttons (Cancel and Save).
I first change the text for "Cancel" in Default State then i jump to Hover State and add the same text there.
I then change the text for the next button to "Save" in Default State then jump to Hover state and add the same text there.
The two buttons are now in the same state (Hoover state) and i would like to highlight them both and say: Go to Default state. -
Antoine G.
commented
Still no answers from Adobe. It would be nice to have an update on this feature, please. This feature would be very much appreciated for high-fidelity mockups using a design system.
-
Andrés Sanz
commented
It is something very heavy to be continually changing the text for each version of the component. If it is changed in the father, it should be changed to his children. And I mean the parent component but not the main one, otherwise we don't earn much.
-
Gerald Wildmoser
commented
I fully agree. It would be a great plus and swift XD forward as a tool for design systems.
-
Juho Röyhy
commented
Currently updating highly interactive component contents is a mess. For each instance you need to go through all of the states and update contents & size as there's is no propagation possibilities.
Currently changes done to main component propagate to all instances of component if there hasnt been done any overrides in instances regarding updated parameters. This sort of propagation should be applied to component instances default state as well to easily update all of the child states with proper content / size.
See attached picture describing the issue and solution in the best possible way.
-
Cliff
commented
Come on Adobe - Jump to it. Your button interactions HAVE TO separate content from design otherwise the workflow on this is SO tedious. Has anyone worked out a way around this?
-
Eshkar Galili
commented
Sometimes I edit an object inside a component it changes the object in all other states, and when I delete or add an object and it deletes or adds it to the rest of the states in unpredictable ways.
I would like for there to be a way for me to check a box saying weather I am changing the object only for the current state or for all of the states.
Secondly, I would love it if there was an onion layer option like there is in Adobe Animate where I can see all states at once, where the inactive states are transparent and the active state is full opacity.
-
Rafael Lopes
commented
When create hover state for a text component and replicate it I have to change the text of copies two times (main and hover). I'd like change text of main state of copy and XD change text of hover state automatically.
