Multiple overlays and opaque background for overlay option
I am trying to display a dialog box that has a popover for additional user info. When I set both of the screens to overlay, they fade out and fade in making an awkward experience. It would be great to allow multiple layers for overlays and the ability to add an opaque background to the overlay function too. See attached example.
Good points Bryan, Sean. I think it’s always challenging to account for the myriad of use cases folks will employ.
Some notes to help clarify:
- When an artboard is set as an overlay, the fill is disabled. It can be re-enabled by selecting the check box in Design mode. An overlay can have an opaque background – either by using Fill or a background image.
- When an overlay is dismissed, the transition used to display the overlay is played in reverse order. If you don’t want any transition, you can set transition to None on the overlay, and then no transition will be used when it is dismissed.
Further enhancements are planned for this feature and will be available in a future release of XD.
Bryan Rieger commented
I hit this same issue when I went to create an iOS share extension flow. First overlay is the Action Sheet, followed by the Activity View. Having these overlays animate in/out WITH the dark overlay panel (which should simply fade) is also rather unfortunate. So far, while I love the idea of the overlays - I'm just not able to put them into practice in any meaningful way.
Sean S commented
It's funny how quickly we discover shortcomings to an awesome new functionality like adding overlays. Just updated to the latest version of XD, excited to put this overlay functionality to work and within 5 min discovered that I can't add both an opaque overlay and a slide up element (like the iPhone share module). So this feature additional would be great!
I'm also having issues with the OVERLAY feature where my OVERLAY is a white text on top of a black 75% and background blur BG.
Only the black bg and blur appear on top and all the white text and white elements are hiding underneath even though in my design, they are in the correct order.
Angel Cortes commented
An opaque background (like a light-box) would be a nice iteration to this feature.
What I'm experiencing with this feature is the following:
I have a prototype that transitions between three overlays; the first overlay animates in and out (only the "in" is expected to animate), followed by the second overlay that shows up instantly, after the transitions are remain instantaneous between the three overlays, and there is no animation upon dismissing the overlay.