Showing Overlays

Overlays display above an artboard view

Your Adobe XD project, when using desktop preview, has the ability to show one artboard as an overlay (or pop up) over another artboard. You can mostly do the same thing in the exported page.

This feature is partially supported at this time with some caveats.

You must export the overlay when you export the artboard and the overlay must be stacked higher in the layers list than the artboards. This may not matter in the future.

By default artboards have a background fill. If your overlay does not need one uncheck the background fill on the artboard.

Showing an Overlay

To show an overlay you would start following the same steps in Adobe XD prototyping.

Select the artboard and switch to prototype mode. Find an element and add an interaction to add an overlay.

Position the overlay where you desire.

Select the overlay (the artboard) and add a Go Back interaction.

Open the layers panel and select all the overlays. Drag them to the top of the layers list.

Now, select the overlays and then the artboards and then open the Export Artboards dialog.

Choose the Selected Artboards option. Choose the Single Page Application.

Click export.

Now all the selected artboards and the overlays will be on the page.

Example:

xd-examples/web-export/examples/pop-ups at master · velara3/xd-examplesGitHub