How to create a Popup Modal or popup box in Adobe XD

How to Create Pop-up Overlay Modals in Adobe XD

Key Takeaways

• Create a working pop-up using ordinary shapes, text and an artboard.

• Connect a button with a Tap interaction and the Overlay action.

• Fix missing drop shadows by allowing space inside the overlay artboard.

• Understand why overlay placement follows the viewport, not the scrolling content.

• Add a darkened backdrop and correct its position after resizing.

A little pop-up can make a prototype feel much more complete. Click a button, bring up a card over the current page, dismiss it and carry on. The basic setup is pleasantly simple. The slightly trickier bits are keeping your lovely drop shadow visible and getting the background to dim properly.

We’ll build the basic overlay first, then tidy up those details.

1. Prepare Your Button and Pop-up Design

You need two things to get started:

• A trigger: a button, text or another object on the page that opens the pop-up.

• The pop-up artwork: the card or panel that will appear over the page.

In this example, the trigger sits near the bottom of a product details page. The pop-up is a small white card made from rectangles, circles and text, with an icon and a close symbol. There is nothing particularly special about those objects. Your pop-up can contain whatever your design needs.

The trigger does not need to be a component, either. An ordinary rectangle can activate the overlay. If your button consists of a background shape and a separate text label, you can group them before adding the interaction, or select the background shape for this simple setup.

2. Put the Pop-up on Its Own Artboard

Here is the important bit: an overlay needs an artboard as its destination. A collection of objects sitting on the pasteboard is not enough.

You do not need to rebuild the artwork. Instead, create an artboard around it:

1. Click an empty area of the canvas so nothing is selected.

2. Choose the Artboard tool.

3. Drag a custom artboard around your pop-up artwork, using the snapping guides to help fit it.

4. Give the artboard a recognisable name, such as Modal Card.

It feels as though you have converted the graphic into an artboard, but you have really created an artboard around the existing objects. That distinction will matter when we adjust the shadow later.

3. Add the Tap Interaction and Choose Overlay

Switch to Prototype mode and select the object that should open the pop-up.

You may already be used to dragging a connection from one screen to another. You can connect screens that way, but for this setup, use the interaction controls directly:

1. Add an interaction to the selected trigger.

2. Set the trigger to Tap.

3. Change the action to Overlay.

4. Choose Modal Card as the destination artboard.

The action may initially be set to Auto-Animate or Transition, depending on what you used last. Overlay is the change that makes the pop-up appear over the current page rather than replacing it.

Open the desktop preview, scroll to the button if necessary and click it. There is your pop-up. Close it, open it again and check that the basic interaction behaves as expected before adding more detail.

Does the close symbol need an interaction?

In this simple setup, the overlay dismisses without a separate interaction on the close symbol. The circle and cross are just artwork, yet clicking in the preview closes the pop-up and returns to the underlying page.

So, for the behaviour demonstrated here, you do not need to wire up the cross separately. It still gives the reader of your interface an obvious visual cue for closing the card.

4. Fix a Missing or Cropped Drop Shadow

You have carefully crafted a drop shadow, opened the preview and… where has it gone?

The usual issue in this setup is the size of the overlay artboard. The white rectangle behind your card and the artboard itself are separate things. If the rectangle reaches the artboard edges, its shadow extends outside those edges and gets cropped.

Return to Design mode and give the shadow some room. You have two options:

• Make the white card background smaller, leaving space around it inside the artboard.

• Make the artboard larger while keeping the card the same size.

Either approach lets the shadow sit within the artboard bounds. Preview the interaction again to check the result.

There is another useful detail here: assigning an artboard as an overlay automatically disables the appearance of its artboard background in this setup. That allows the original page to show through around the card, rather than leaving a large, solid white box behind it.

The card’s own white rectangle remains visible. It is only the artboard background that becomes transparent, so keep that rectangle if you want a white pop-up.

5. Position the Overlay Relative to the Viewport

This is the bit that can be confusing, especially on a long, scrolling page.

In Prototype mode, you can move the overlay’s placement preview over the source artboard. It might look as though you are placing the card above a particular heading or paragraph. But when you scroll in the desktop preview and open it, the card may appear somewhere quite different relative to that text.

Why? The overlay position references the viewport, not the content underneath it.

The viewport is the visible screen area. On a scrolling artboard, it runs from the top of the artboard to the viewport boundary line. The rest of the document continues below that line, but it is not part of the visible screen at that moment.

• Place the overlay near the middle of the viewport, and it appears near the middle of the screen.

• Place it near the bottom of the viewport, and it appears near the bottom of the screen.

• Do not expect it to stay attached to a particular word or product description as the page scrolls.

Using fixed positioning on the trigger does not solve that last point. It fixes the button’s position, not the overlay’s relationship to an item in the scrolling content.

The easiest way to think about placement is: “Where should this pop-up sit on the visible screen?” rather than “Which paragraph should it sit above?”

6. Add a Darkened Background Behind the Pop-up

The card now works, but the page behind it can still feel a little busy. A translucent black backdrop makes the pop-up stand out.

For the setup here, we’ll build that dimming effect into the overlay artwork. The trick is to make the overlay artboard cover the whole viewport, with the smaller card sitting inside it.

Match the overlay artboard to the viewport

1. In Design mode, select the source artboard and check its width.

2. Check the viewport height, rather than the full height of the scrolling content.

3. Resize the overlay artboard to those dimensions.

4. Move the pop-up card into the middle of the enlarged artboard.

For this mobile example, the viewport is 375 pixels wide and 667 pixels high. Those are the dimensions used for the overlay artboard. Use the corresponding dimensions from your own design.

If the card feels too wide, reduce it slightly. Responsive Resize is useful here for adjusting the layout together. Holding Option on a Mac or Alt on a PC while dragging a side resizes from both sides at once, which helps keep the card centred.

Create the translucent backdrop

1. Draw a rectangle that covers the entire overlay artboard.

2. Set its fill to black.

3. Remove its border.

4. Lower the fill opacity so the page underneath remains visible.

5. Send the rectangle behind the pop-up card.

Make sure you lower the backdrop’s fill opacity, not the opacity of the entire pop-up. You want the page to look darker while the card stays clear and bright.

7. Reset the Overlay Position After Resizing

Ready to preview it? There is one easy-to-miss adjustment first.

The interaction still remembers where you positioned the original, small overlay. Enlarging its artboard does not automatically reset that placement. As a result, the new backdrop can start partway down the screen and overlap the bottom instead of covering the whole viewport.

If that happens, the backdrop itself is not the problem. The overlay is simply doing exactly what its old position tells it to do.

1. Return to Prototype mode.

2. Select the button’s overlay interaction.

3. Move the full-size overlay placement to the top of the source viewport, aligning its bounds with the visible screen area.

4. Open the desktop preview and test the button again.

Now the page darkens behind the card, the pop-up sits where it should and the interaction can be opened and dismissed again. Lovely.

The core workflow is small: give the pop-up an artboard, connect it with Tap and Overlay, then check its viewport placement. The extra polish comes from leaving room for shadows and treating the backdrop as part of the overlay design.

Key Terms

Overlay

A prototype action that displays a destination artboard over the current screen instead of navigating away from it.

Modal card

The visible pop-up panel. In this example, its background, icon, text and close symbol are ordinary design objects.

Artboard

The container used as the overlay destination. Its boundaries determine how much space is available for the card and its shadow.

Pasteboard

The canvas area outside your artboards. Pop-up artwork sitting here needs an artboard around it before it can be selected as an overlay destination.

Viewport

The visible portion of a screen or scrolling artboard. Overlay placement is measured relative to this area.

Backdrop

The translucent rectangle behind the card that darkens the underlying page. Here, it sits inside the same overlay artboard as the pop-up.

FAQs

Does an Adobe XD overlay button need to be a component?

No. An ordinary shape or text object can trigger the overlay. You can also group a button’s background and label before adding its interaction.

Why can’t I use my pop-up artwork as the overlay destination?

The destination needs to be an artboard, not just objects on the pasteboard. Create a custom artboard around your artwork, name it and select that artboard in the Overlay interaction.

Why is my pop-up shadow missing?

The shadow may extend beyond the artboard edges and be cropped. Enlarge the artboard or reduce the card’s background rectangle to leave space for the shadow.

Why does my dark backdrop only cover part of the screen?

Check both its size and its placement. The overlay artboard should match the viewport dimensions, and its Prototype placement should align with the top of that viewport after resizing.