3 ways to mask in Adobe XD

Are you new to Adobe XD? Or maybe you’re just stuck on how to create a simple mask? Here are 3 quick tips for how to mask your photos and designs in Adobe XD.

Prefer to watch a tutorial?

Watch this 2-minute tutorial video to see these 3 mask options in action.

1. Use shapes to mask

One of the easiest ways to mask in Adobe XD is to use shapes. For example, let’s say I want this profile photo placed inside a circle.

Use the Ellipse tool, click and drag while using the Option key to create a perfect circle.

Select both the circle and the photo and use the keyboard shortcut Command + Shift + Mask to mask the photo within the shape.

Keyboard shortcut to mask: Command + Shift + Mask

If you want to reposition or scale your photo within the frame, double-click into the group.

Double-click to change scale or position

Drag and drop

A similar technique is to draw the shape first then drag and drop the photo into the shape.

For example, let’s say I want to have a background photo on my artboard. Use the Rectangle tool to draw a rectangle the same size as the artboard. Then simply drag and drop your image into the rectangle. And again, you can double-click if you want to rescale or reposition.

2. Use the pen tool

Another option is to use the pen tool in Adobe XD to draw any shape. This is the best option to create more complex masks for your photos.

Use the pen tool in Adobe XD to create more complex mask shapes

As with the first option, select both the shape and photo, use keyboard shortcut Command + Shift + M to mask.

3. Use the pen tool… in Photoshop

This last option is kind of a cheat. Sometimes I prefer to do custom masking in Photoshop as it’s easier and more accurate.

For this photo, I want the hand and the cup to cut out from the background. In Photoshop, I’ll use the Quick Selection tool and click on Select Subject. At the bottom of the Layers panel, click Add a Mask.

Zoom in and make sure everything was selected. In this case, Photoshop missed a little bit of the lip of the cup, so I zoom in and use the Brush tool to paint the area back in.

Then go to Image > Trim > and choose the Transparent Pixels option. This will get rid of all transparent pixels and crop your image.

Go to File > Save As > PNG.

Now I can drag and drop this image into my XD file. And because I used Photoshop to mask out the background, now I can add a color background to the landing page.