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.
-
Ivan Vladimirov commented
This and the ability to change the state of a component from another component are probably the biggest pain points for me.
On the other hand sometimes it is very useful. For example a menu button or any overlay with expanded popup in design view will shift the layout, but in preview mode it stays absolutely positioned on top of other elements, which is super powerful and frequent use.
Same is true to simulate some nice behaviors, like, I click this Save button at the bottom and it displays alert in the header, where you can embed the notification in the button state itself, which will destroy your layout in design view, but works like a charm in preview.Bottom line both behaviors are much needed, like in CSS you have fixed and relative positioning.
-
Germán Ferreira commented
Incredible that what you do in design mode cannot be applied in Preview or in the prototype. The main point of a prototype application is interaction, otherwise we would use Illustrator or Photoshop as in the past.
That something doesn't exist yet can be debated as a next step for the app, but that it exists but only in design mode doesn't make sense. I design to define and then communicate it, if I can't communicate it, it doesn't work for me.
-
mjb commented
There should be no differentiation between design and prototype, Design SHOULD be the foundation for prototyping as that is the way it works in the real world and is the only logical way of dealing with it.
Otherwise one has to design twice, once for the design and once for prototyping which is completely ridiculous. No interactive application ever has worked like this so I don't see any good reason why XD does other than lazy and shabby development.
-
Gabriel Asuncion commented
I frequently design and revise website prototypes when there are some adjustments like adding/removing elements. The whole height is adjusted and will have to also adjust the artboard which is annoying. while this is somewhat solved using padding and stack group to be dynamically adjusted based on contents, a QoL changes to also applies to the artboard would save hours of time collectively.
So this would make artboards be able to be grouped if this is also added
-
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.
-
Anonymous commented
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
funktional one. -
L commented
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.
-
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.