Allow an Overlay to be applied to another overlay. For example, you have a dialog box Overlay and inside you want to have a drop-down menu which has an Overlay of a list of options. Currently what happens is the drop-down Overlay replaces the dialog Overlay.
I think this is something fundamental that would make Overlays even more powerful. Its omission almost feels like a bug.
Glad to see that this still hasn't been solved 😭Excuse me while I spend several hours doing a bunch of micro-interactions
Hey @XDTeam. How come you are not working on implementing nested overlays when it is:
- an open community request since 2018
- it's a crucial interaction in modern applications
You've seen this in many apps too. It's also baked in into iOS. For instance, here is an use case:
1. The user is on a screen where she triggers an overlay interaction (the screen slides in from the bottom)
2. The user clicks inside this overlay and triggers another slide in, the second overlay. This one might come again from the bottom, from top, doesn't matter.
3. Then the story continues for the third time and so on...
As it's well known, this is still not possible with XD. I think Figma does it and they call it "Overlay Swap", but I'm not an active Figma user.
Before someone comments this can be done with component states, that is unfortunately only true in limited scenarios because only auto animate ans dissolve transitions are supported between states. Overlay transitions are not supported.
Then there is a question of usability, while even if overlays could in future be achieved with component states it would be unpractical to overload components with so many states and so many possible scenarios of transition and inherited content.
Overlays belong on their own artboards. They behave in a way as components, where you call them up when they are needed. We just need a way to have multiple of them stack up on each other.
Yes, I need this feature to build my prototypes. It would be great if you can define an originate point from where all the following overlays will be started. Another option ist to move the overlayframe to the desired page.
Nathan Wells commented
Yes, it would be great to be able to swap an overlay so the overlay can have multiple states without having to create the overlay as a component.
Claudio G. commented
Does any other prototype software allow that?
Yes! I have just wasted a bit of time trying to figure out why I couldn't overlay an overlay. Guess i'm going to need to manually create this interaction. Glad to see i'm not alone though - hopefully with a future update!
Ishwor M. commented
A must have feature. Didn't expect that XD doesn't have this feature. Let's hope it's going to be added this basic feature soon.
Thanks Nick for introducing this request.
Miguel Santo commented
Was thinking i was doing something wrong... I did not expect to not be able to do this.
I just wanted to do an overlay on top of an overlay without dismissing the first one (because it evokes the animation of the first overlay and only after that does it trigger the second overlay, which results in a weird behaviour)
Armando Tavares commented
Yes, overlays are unusable if you have more then a simple menu. Using multiple overlays is very glitchy and doesn't work well for micro-interactions. Or moving from a small overlay to a larger one doesn't work.
Moises Lopez commented
Yes please. Thank you!
Jerimy Brown commented
Agreed... I am already doing this for a multi-tiered navigation structure idea I have, and it's working, but glitchy, and I have to create a lot of duplication to keep it from completely breaking. Also, even if you select none as your transition, you still get a flash as one overly replaces they other. Would be nice to at least have that replacement be seamless as a start.
I actually found this because I was in the process of writing this feature request myself ;)
Johan Steyn commented
This is a must have, otherwise what I am having to do is hack together detailed duplicate screens to make this work which is highly inefficient.
Complex systems interfaces just need this feature.
Igor Mikelic commented
Great idea. Very useful on collapsible (or drop down) menu items. This is easy to implement and solve =D
exp. You have 1. page (like home) and 1st overlay (main menu) and 2nd overlay (expanded main menu). When you are linking on 2nd overlay there is blank page below instead visible 1. page below. Logic would be show me main screen always below no matter how many overlays i chose to replace (or simple nested overlays)...
I can send XD file for developers or PM... or PIC attachment for detail explanation ;)
This is a good suggestion, I'm trying to design an advanced filter and I have put the filters on an overlay. When i put drop downs or date filters on the overlay you can't click them without dismissing the overlay.