In Design mode, select a source artboard and the other artboard to overlay it. You can reuse an overlay artboard multiple times.
Learn how to add overlay to simulate interactive slide effects.
Adobe XD allows you to stack content on top of another artboard, rather than duplicate it on multiple artboards, to simulate effects such as drop-down lists, slide-up keyboards, and more.
In Design mode, select a source artboard and the other artboard to overlay it. You can reuse an overlay artboard multiple times.
In Prototype mode, drag-and-drop the connector from the source artboard to the artboard with the overlay content. Click the connector to view the Interaction panel that appears in Property Inspector and set the following options:
To adjust the position of an overlay on the source artboard, click, drag, and drop the green position knob (+).
To preview your overlays in supported browsers, click .
Adobe XD does not support nested overlays where you apply an overlay over another overlay. In such scenarios, when you connect the first overlay artboard to another artboard, the first overlay is transitioned out before transitioning in the second overlay.
Want to create interactive overlays using background blur effects?
For a detailed tutorial and downloadable sample files, see Create an interactive overlay.
Want to learn how to use overlays to create a slide-in drop-down list effect? Watch the tutorial at the end of this example and follow these steps:
To learn more about overlays in XD, watch this video.
Viewing time: 10 minutes
You can also check out the XD community for more such tutorials and sample files.
"Overlay is a very powerful feature that has many uses. The tasks that users are trying to perform are becoming increasingly complex, and overlays can really help to take off the pressure". Says Oliver Lindberg. Check out his blog on best practices for designing overlays.
Aanmelden bij je account