Stacks should dynamically shift content in Preview
Create component - + New state (bigger than the default) - Merge the component with another one or another element into a stack -
Preview mode - click the component to change state and the stack doesn't respect padding .
-
interactive-layout.gif 325 KB -
design-mode.gif 657 KB -
prototype-mode.gif 250 KB -
Expanded-Prototype.png 30 KB -
Expanded-Design.png 98 KB -
Adobe XD State Change Padding Feature Request— August 25, 12.21.06 PM.xd 104 KB -
XD Issue.mp4 3480 KB -
2020-06-18 01-27-01.mp4 2266 KB -
Link components.png 58 KB -
Components.png 18 KB -
Components stick.png 30 KB
Please note that stacks is a feature that is intended to be used at design time, and does not dynamically shift the stack in preview. I’m going to rewrite this particular request to be more precisely about the latter suggestion.
53 comments
-
Sergi Gallent
commented
Although the stack feature was intended to be used at design time (as per Elaine's comment), it doesn't make sense that when a component changes its state on the preview, the rest of the elements doesn't accommodate using the configured stack.
-
Anonymous
commented
It is crazy that this hasn't been implemented yet. What is the purpose of including it in design mode if it can't be previewed?
-
Anonymous
commented
Any idea when this will be implemented. Its been several months now and is core functionality
-
Bon
commented
I made horizontal list boxes with effects that increase its height when you hover over them. Then I group them into stacks with 20px distance with each other. When I click and select the hover of one of the boxes everything adjust accordingly but when I preview it the boxes overlaps each other.
Please allow the hover works on stacks when there is movement or increase/decrease in size of each in the stack.
-
Beverly
commented
I have a design that allows you to scroll through items and expand/collapse each item. I made each item into a component to represent the expanded and collapsed state. I turned on Stacks so every item below one selection will be pushed down when it's expanded and moves up when collapsed. It works how I want on the design side but when I go to prototype the interaction, the component simply covers the items below it instead of pushing them down.
-
Anonymous
commented
That would be perfect when using expanding components!
-
Ruxi
commented
Stacks don't work on this... They work in the file artboard, but not in the preview or on the share link.
Please consider making stacks work for accordion menus because it's too time consuming to use auto-animate if you have a lot of sections in the accordion (also the point is for it to work on one single artboard). -
Stefan Dickerson
commented
Yes please! Trees, accordions, progressive disclosure forms, and the like would all come to life without us having to draw up (and wire together) every permutation of open and closed things!
-
Filipe
commented
I wish it could work with the stacks. It works when you are editing the file, but when you publish the prototype it doesn't.
-
Anonymous
commented
I have the same problem, since the beginning of our project I have some expanding components and it is very important to move the content when the component expands - in design mode it is just perfect, but in preview mode, it isn't.
-
Cyrill Studer commented
Yes, I would like the stack to update when a component inside it auto-animates to a larger or smaller state!
-
Anonymous
commented
Absolutely crucial! please add this ASAP. It would help with my workflow immensely and save a ton of time.
-
Torbjörn Hedberg
commented
+1 here as well. Works perfectly in the Design mode so it's a shame it doesn't in Prototype mode.
-
Brandon Beiler
commented
Constantly run into scenarios where this would be insanely helpful. +1
-
Gabriel Häggebrink commented
+1 Here! Missing this virtually every project I do, would be an amazing addition.
-
Kevin
commented
When I launch a preview of a page including a component whose shape changes (addition of an element in the component) it overflows despite the use of the stack function.
-
Phil Bowell
commented
In the same way that stacks resizes it would be great if screens could resize their height dynamically. This would allow for auto-animating between different component states and the elements around them to move but retain the spacing.
An example would be in a form that works with progressive disclosure based on selecting different answers. Rather than animating between two screens, it could be between two states of a component and the screens responds dynamically.
-
Mike
commented
When you have a lot of vertical content, duplicating artboards to create a dropdown menu requires a lot of effort, especially when each message has an accordion style dropdown menu. It would be nice to have the benefits of Stacks for this behavior.
-
Rigel Closet commented
Auto animate? the point of components is to make everything happen in one art board! please implement this feature, i though stacks will take care of it, until i tried !
-
Antal
commented
Expanded/collapsed states are useless as long as preview mode does not adapt to them. A real shame and lost some hours due this particular design...