How to make a pop-up overlay in Adobe XD

Graphic artist Erica Larson dreams up inspired designs every day as a member of the Adobe Studio team. In other words, she makes stuff that makes others want to make stuff.

Larson starts by duplicating her primary artboard. To do this, she clicks the artboard name as she holds the Alt (Windows), or option (macOS), key then drags the artboard to the right.

Larson wants to initially hide some elements on the artboards so they come in and out of view as the user interacts with the app. She Shift+clicks across artboards to select them all, then moves the Opacity slider in the Property Inspector to 0%.

Larson clicks the Prototype tab to define interactivity. She selects the hamburger menu icon on the first iPhone artboard and drags a wire to the Menu artboard. She sets the Action to Overlay and chooses Slide Right as the Animation so the menu will slide over the artboard. Then she drags the green circle of the overlay to move the menu into position. She finishes by repeating this technique for the hamburger menu on the second iPhone artboard.

Next, Larson drags a wire from the Info icon to the second iPhone artboard. This time she wants the hidden elements to fade in to view, so she sets the Action to Transition and the Animation to Dissolve.

Larson’s final step is to wire a hotspot on the model’s cheek to the Product overlay. She selects a dot, drags the wire to the Product overlay artboard, and defines the interaction. She then moves the overlay into position over the second artboard. When finished, she clicks Desktop Preview to test everything.

Design reusable image and menu overlays for your mobile app.

Note: Project files included with this tutorial are for practice purposes only.