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 .
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.
Saad Sheikh commented
This is the most important feature of the design system as you that, if this is not possible to shift to a dynamically in preview so the feature is not mean in design
Rebecca Bean commented
Please add this. It saves me SO many artboards to be able to use component states on things like dropdowns and radio buttons, plus it makes it a more realistic experience for the users/stakeholders viewing it to not have to guess the combination I designed for in my prototype. When it overlaps my other content instead of pushing it down in preview, it just means I'm going to have to explain to the stakeholders the limits of my prototyping software or spend so much time duplicating my artboards to show a form being filled out in different ways.
Kristin Pruis commented
WOW... this feature definitely needs to be added.
J Fox commented
Agree with this. Please change it. I am just trying to prototype some accordian lists on a content page. Because stacking is not respected when I make each accordian section it's own component with an expanded state, I made the entire content page a component that has stacking, with a separate state for each scenario when one of the accordian lists is expanded. However, now I run into an issue where the component seems to automatically switch it's y position when it is in different states. So, when clicking within the component to see the expanded state for one accordian, the whole component shifts upward on the page, covering the masthead. Maybe a separate and equally time consuming bug?
judge bockman commented
I would very much like to see Stacking available in Presentation Mode
neil Fernandes commented
Currently there isn't a way to group separate components together and still maintain their states. So if there are 2 separate components positioned below each other and the component above has a state which expands below, then there should be a feature to allow the component below to move down the page, instead of it overlapping.
For the sweet love, please extend stack spacing to preview.
Steve Schreiner commented
Please you finally would be able to create an FAQ List with expanding and retracting text.
Clients always need to see the Two States and I always have to make two designs instead of one
Useful for prototype presentations when a pill structure has a different state when selected than the default state.
Jeffrey Johnson commented
I think this would make stacks more functional, but I would want this to be optional. There are times when you don't want items in stacks to shove other things around.
Emily Guenther commented
This problem impacts normal accordion style functionality in prototype mode. This appears to have been a problem for quite some time. I hope it gets resolved soon!
Jonathan Montalvo (US) commented
Stacked components like accordions do not dynamically push other components down in preview mode when the container expands either vertically or horizontally.
I just wasted hours trying to figure out why I could see the shifting of stacks in design view and not in preview! I thought I was doing something wrong, but instead it turns out that XD completely missed this common-sense step. What is the point of designing and adding functionality to the prototype if the prototype doesn't show the functionality??? Please Adobe, please address this problem and get this feature in place ASAP!
This completes the stack feature in my opinion. Why allow stacks in design mode if they don't translate to the preview?
Must have!!! this feature. Expansion panels (e.g aligned vertically) push the content below, otherwise need another artboard to accomplish this issue.
Davide Malasomma commented
It was just shocking to see stacks don't work in preview mode!
I spent such a long time creating the whole atomic design system to make everything scalable and then I went to preview mode and stacks don't work.
This is a MUST HAVE.
Greg D commented
Regardless this should work in prototype mode as expected.
A feature like this should work as close as possible as it would in the browser.
Having stacks not work in preview is a great disappointment.
Stefan Pedersen commented
I have expected this to work in preview far too many times, each time increasingly disappointed that it doesn't. A lot of modern apps have collapsible panels, dropdowns, and similar dynamic content. Don't get me wrong, at design-time, the feature is awesome, but it really should behave the same way in preview.
I agree with all the previous comments, the stack feature should also work in prototype mode. I think this is a must have , like artboard rotation in illustrator (which have been added in the last update)
When developing complex app interfaces, I convert control groups (eg a set of fields) into components with various expanding states.
The whole set of components exist within a stack that might also be within a container that requires padding.
While designing, I can switch states, expanding the dimensions of a component, and the overall design will expand to accommodate the new state. This incredibly convenient for designing complex app UIs and is probably the only meaningful advantage XD has over Sketch.
My hope was that I could wire all those states together (make selection B in field 1 to expose child controls for 1.B) so a prototype could demonstrate the UI responding to interaction.
Unfortunately, all that component state work is largely wasted (outside of my own design efficiency) because the resulting prototype completely ignores stacks and padding.
If interactive prototypes supported the rules of stacks and padding, XD would have a viable place in the product design landscape.