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 .
-
Stacked components.mp4 641 KB -
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.
54 comments
-
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.
-
Ria
commented
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!
-
Anonymous
commented
This completes the stack feature in my opinion. Why allow stacks in design mode if they don't translate to the preview?
-
Amir
commented
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.
-
Leandro
commented
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)
-
plainclothes
commented
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.
-
Daniel Alves commented
It would be very important for the stack to work as a preview.
As it is today, working only in design mode, you need to keep adding comments to the development team, which could be solved only with the real interaction of the elaborated design.
-
Lena
commented
When I create a component with stages of different height (like an Akordeon that can be collapsed or expanded) I would like to be able to select "push / pull elements", so that when the stage of the component is changed to the expanded version, the elements that are visible below this component move down to make room for the expanded version
Vice versa for choosing the collapsed state (the elements return to their original position).
The space between the component and the elements below should stay the same.
Axure has a feature like this and i really miss it, since we work with XD in my new job. -
Scott
commented
This needs to work this way, this is the way stacks should have worked from the beginning!
-
BB
commented
Definitely need to add to prototyping/preview. Explaining to clients how it's going to look and why I can't show them in preview is an unbearable conversation that will always lead to the client's questioning the capability of the tools being used to design their site or my personal ability as a designer. We all know that's a lose-lose dialog. Just add it already.
-
Jad
commented
+1 on this feature
-
ahmed ali
commented
I have same issue, and It drive me crazy and take me days of searching and asking without result.
It would be super useful if add it.And how about same issue to extend the artboard it self, so the artboart response simultaneously with
-
Brandon
commented
We need this feature.
I have two scenarios that this has caused me issues.
One, building a dynamic menu with expanders. The menu could have been done on one art board but instead required a massive web of art boards and load on the program. This also effected my specification document as it could not be made on a single page and shared easily.
Second, usability testing for rearranging and and dragging of items, tiles, etc. would work so much better with stacks in preview mode.
-
Juho Röyhy
commented
Stacks work as intended in Design mode, but when you actually drive the prototype stack doesn't update on all changes that are happening inside stack.
See attached example where there are one mother stack and two child stacks and when child stack's size changes mother stack doesn't update when in "play mode" on design mode it works just fine.
-
Ryan
commented
This makes more sense now that you have nested components with nested component actions that trigger nested component state transitions. A specific use-case I'm trying to simplify is to add an item to a list and then "delete" it through actions. Delete is in quotes because I'm just hiding everything in the component. Another use-case is to expand an element (like a tree or nested configuration). These both work in the designer and don't work during Preview. This one feature would complete the workflow that allows me to just use nested components without duplicating anything across artboards.
-
Emamuzo Okerri
commented
Please it would be very useful if stacks are enabled in preview. It's a very useful feature and will be most brilliant if they actually work in preview.
Saves us from having tons of artboards for multi-directional/multi-decision interactions.
-
Rick Bond
commented
tl;dr I'd like to suggest that users be better informed in-app that stacks is a design only feature, to set realistic expectations and avoid user frustration and waste. Until stacks work in preview, only use them for basic layout - nothing nested.
Just adding my 2 cents. I work as a UX designer as part of a large enterprise UX team and have observed 2 team members losing DAYS of work because there was no indication when using stacks to design, (SUPER USEFUL FEATURE in design mode, we all LOVE it!!!)
Well, after mocking up a complicated nav using stacks, they discovered that it didn't render as expected in preview. Their work ended up being thrown away because it not only doesn't work in preview... It breaks it. Any stacks then need to be recreated the good ol' manual way. Fine, just time consuming. And if I hadn't been made aware by my colleagues I very well would have fallen into this same "trap" myself.