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.
31 comments
-
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.
-
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.
-
Marshall Wells commented
Agreed - it would be super helpful to have the stack respond to the states of components within it. This would save a ton of variation components and speed things up for me.
-
Sergi Gallent
commented
Although the stack feature was intended to be used at design time (as per Elaine's comment), it doesn't make sense that when a component changes its state on the preview, the rest of the elements doesn't accommodate using the configured stack.
-
Anonymous
commented
It is crazy that this hasn't been implemented yet. What is the purpose of including it in design mode if it can't be previewed?
-
Anonymous
commented
Any idea when this will be implemented. Its been several months now and is core functionality
-
Bon
commented
I made horizontal list boxes with effects that increase its height when you hover over them. Then I group them into stacks with 20px distance with each other. When I click and select the hover of one of the boxes everything adjust accordingly but when I preview it the boxes overlaps each other.
Please allow the hover works on stacks when there is movement or increase/decrease in size of each in the stack.
-
Beverly
commented
I have a design that allows you to scroll through items and expand/collapse each item. I made each item into a component to represent the expanded and collapsed state. I turned on Stacks so every item below one selection will be pushed down when it's expanded and moves up when collapsed. It works how I want on the design side but when I go to prototype the interaction, the component simply covers the items below it instead of pushing them down.
-
Anonymous
commented
That would be perfect when using expanding components!
-
Stefan Dickerson
commented
Yes please! Trees, accordions, progressive disclosure forms, and the like would all come to life without us having to draw up (and wire together) every permutation of open and closed things!
-
Anonymous
commented
I have the same problem, since the beginning of our project I have some expanding components and it is very important to move the content when the component expands - in design mode it is just perfect, but in preview mode, it isn't.
-
Cyrill Studer commented
Yes, I would like the stack to update when a component inside it auto-animates to a larger or smaller state!
-
Anonymous
commented
Absolutely crucial! please add this ASAP. It would help with my workflow immensely and save a ton of time.
-
Torbjörn Hedberg
commented
+1 here as well. Works perfectly in the Design mode so it's a shame it doesn't in Prototype mode.
-
Brandon Beiler
commented
Constantly run into scenarios where this would be insanely helpful. +1