Has this feature been added yet?

I'm creating an XD mockup of a popup modal on a website and would very much like an overlay to fade in while the modal window slides up from the bottom of the screen.

Figma has this option, Adobe should have it too.. It's so basic: when you open a popup window (an overlay) you expect the background to dim

Very much needed. Critical prototyping feature missing.

Figma has that and I miss that when I switch to XD projects.

Highly needed. It's just so frustrating to create a full-page artboard for every single tiny dialog in the designs. Wastes space, especially problematic because the artboard size has a max-limit.

Another vote for it!

this is flagged as "needs more info" - how can we help flesh this out? My team sorely needs this.

Another vote for this. Dimming the background is the preferred behavior in iOS for popovers, and it's pretty tedious to simulate this in XD currently.

https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/

Totally agree, this would be awesome. Please do this.

Really would love this feature or a solid work around. @Sean S and @Arvid @Armando describe issue perfectly.

The settings menu in Slack on mobile (the three nodes top right, when in a channel or DM) is a perfect example of what I'm trying to achieve.

Has there been any update on this from Adobe? I see a new version of XD just shipped but I still don't see the ability to add a scrim behind overlays.

It is sad there's no move for this request for a year.
@Dani
I do exactly as you suggest since there's no way out, but this workaround is really rough.
The disadvantages are:
- It is not possible to use slide in/out transition for such an element like a side navigation. In this case the whole canvas with its hard edge is moving in and out. A side nav appears with dissolve transition doesn't look "realistic."
- In case I have multiple screen sizes (smartphone, tablet, desktop) in one project I should have copies of any modal dialogs and side nabs for every size.

Many design systems like Google Material Design, Apple iOS HIG suggest to display scrim or backdrop below modal views. So, in many cases a trim in designs is not just a nice visual effect but a demand.

It would be nice if scrims will be realized in Adobe XD. It can be done in one of the two ways:
- Scrim settings (color, opacity, blur) could be added to Overlay action of the link dialog.
- Scrim settings could be added to an Artboard itself. Surely, it makes the scrim looking the same for any views, but you don't need to setup it again every time. Moreover, I suppose, in this case it should be possible to send scrim settings to Design Specs (Share for Developer).
In the both cases the scrim itself can appear just with dissolve transition and at the same duration as Overlay does.
Thank you in advance.

I mean I can use a rectangle at the moment, to simulate this, but if I use an animation for the overlay (e.g. slide in from the bottom) the background tint does slide in as well, when i rather want it to fade in ...

Agree that this would be a very nice addition to the overlay functionality. The workaround suggested by @dani is tedious and given that you can't position overlays below the fold, it means you're really limited.

@Dani, that works great if you set the overlay transition to dissolve or none, but seeing the background slides as well is not something you see in any good app.

tbh, I would be content (for now) if you automatically fade-in a 50% opaque black tint behind any overlay, similar to how it is in framer/framerX

I like the workaround @Dani but if it could be made a simple part of the interface that would make it less cumbersome. » Background: Blur [amount] || Colour [picker], opacity [slider]

I agree. It would be nice to nest overlays into one another or point to 2 different overlays and trigger them with the click of one button. An example of this would be the iPhone share modal which slides up from the bottom of the screen a split second after a dark/blurred overlay dissolves in. This is quite a common action in smartphones' UI.

Martin -- You're request has been noted. In the meantime you can achieve this with the shipping version by completing the folowing steps:

1. Make sure your Overlay artboard is the same size as the artboard you want to apply it to
2. Create a rectangle the same size as the artboard, and check the Background Blur option
3. Add the actual overlay content. The assumption here is that it is smaller than the parent artboard

When you wire the artboard you should see overlay content with the blur background. If instead, you'd like a lighter or darker tint set the background container as white or black with a percentage fill (example 15%).

Hope this helps