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
-
Jovana
commented
Since the stack dynamically expands (changes) in design mode, I have spent some time understanding that this does not happen in Preview.
I can understand why people might think this is annoying to have by default, but it could be an additional option when setting up a stack..Anyways, it would really be incredibly useful to have this behaviour in the preview too.
-
Almasi
commented
I'd like this feature also, it feels like a natural fit for Stacks. What happens now is the opened state overlays the content beneath the closed state.
Elaine, this will not currently work (with auto-animate or otherwise) unless we put all the page's content into one giant component and manually position the content for each state. This precludes making a non-scripted flow.
FWIW, I hope I'm wrong, but I can't get this to work. Yes, I have the most recent version.
-
Florian Pürschel
commented
It is so sad that this feature is missing. I have a list with a lot of expanding elements. When changing the state to "expanded" everything adjusts just fine in design mode. Unfortunately it does not adjust in preview which forces me to add 2342346456 additional artboards to present every possible combination of expanded elements. This is really really annoying
-
Luke
commented
I could really use this feature in prototype now. I have a sidebar with a ton of filters where I have expanded/collapsed states. Right now the expanded state in prototype just goes over the other elements.
-
Payton
commented
The Problem: I have two components A & B. In A's default state component B is y px beneath A. Component A size expands or contracts by z px and changes to a new state. Currently, component B is now y + z px from the bottom of component A.
The Solution: Components that can change shape between states should "push or pull" other components by fixed padding defined assumed by the system or defined by the designer. This behavior should be able to be chained between multiple components & other objects.
Applications: Expandable lists, expandable cards, & my quality of life improves.
Savings: No need to create an endless number of artboards to express simple behavior between components or super long write-ups to hand off to a developer.
Current Time Cost: Per component, n, that has a number of states, y, on the artboard a designer has to create (n*y)! number of artboards to describe the screen behavior. This is a massive pain in the butt! It costs countless hours of write-ups and reconciliation with developers.
-
John
commented
This wold be a really cool thing to implement. You already to auto-animate so creating a stack that animate should be relatively simple. Let's say you have a stack of expanding components. Then as each component expands, the stack responds and expands as well.
-
Vivek
commented
Two adjacent buttons [components in this case] each with similar states (one hover and one dialog popup) are not behaving as per the expectation. When the pop up dialog state is active, the other button is overlapping onto the dialog. Check the video. This is a limitation. Creating a separate artboard and linking to it should not be the solution when you have components in place. I am unable to use two components with states adjacent to each other or one below the other.
Also, it would be nice to see a component with expanding state pushing the component below and likewise pulling it back to its original position when in collapsing or default state. This could help in a lot of situations. Example - accordions.
-
Hafeez
commented
With the new update the stack and scrolling verticaly/horizoontaly.
Create Component -> Repeat Grid -> Ungroup -> Group - > Create Stack ->inside the stack main component -> Create new state (After) -> On after state(Make the space vericaly larger) ->Default to normal state back -> press preview.
Result : Inise Xd Programe, is shows that the component is pushing the stack. When preview mode, doesnt push the stack accordingly.
-
Yoav
commented
Elaine,
While you can achieve a lot using auto animate, it is still a scripted flow. The idea behind creating common components is to be able to build a non scripted flow. -
Wilhelm
commented
When a component or an object expands, you may want to push other content with it. This could be solved by pinning individual objects and components to each other.
The attached screens shows 3 accordions made using XD's new component feature. Once I open Item 2, I'd like item 3 to be pushed down. This is not possible today, instead item 2 overlaps all other contents below it.
-
Chris Fleming
commented
Yes! This could be an easy feature but it takes upwards of 20-30 minutes to duplicate artboards and link them all with specific transitions. They could easily make a collapsible accordion menu.
-
Jonathan
commented
Also mabe a horizontal Accordion for menues.
-
Sean S
commented
I would like to be able to create an accordion that forces all elements below it down. I'm guessing the best way to do this is use overlays and and have the ability to fix the overlay to the accordion button and switch states of said button (closed/open)