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 .
-
Screenshot 2022-01-14 at 12.55.47.png 233 KB -
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.
-
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. -
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.