Creating overlays in XD creates a stacking effect so one artboard is on top of the other. This simulates drop down menus and slide up keyboards.
In prototype mode, select a source artboard, click the prototype wire and drag it to the overlay. You can reuse an overlay artboard multiple times.
For the Interaction
Trigger: tap
Action: Select Overlay.
Animation: Select the animation type. If you select Slide Up or Slide Down, XD automatically positions the overlay to the edge of the source artboard.
To adjust the position of an overlay on the source artboard, click, drag, and drop the green position button (+).
Next create an interaction to return to the previous artboard. A user may click the overlay and then it will hide. For this interaction:
Trigger: tap
Action: Select Previous Artboard
Table of Contents:
00:12 – Where to use overlay
00:25 – How overlay works
00:42 – Create artboard same size as others
01:04 – Prototype to component menu
01:50 – Preview of overlay
02:37 – Back to previous close overlay