All About Masking in Adobe XD

ADOBE XD TUTORIAL: LEARN ALL ABOUT HOW TO MASK IN XD! | We’ll use a series of shapes to tackle masking and some of the masking problems in XD all in less than ten minutes!

In this Adobe XD tutorial, we’ll cover how to get started masking from the basics to beyond. I’ll show you how to automatically mask a photo and then also work with some of the masking limitations to get the exact mask and framing that you want in Adobe XD.

Tags: Adobe XD, adobe creative cloud, creative cloud, adobe cc, experience design, ux, ui, adobe, adobe cloud, adobe creative suite, xd, adobe experience design, ux design, ui design, prototyping, interface design, how to, user experience design, adobe xd cc, user interface design, ui/ux, ux designer, tutorial, adobe xd tutorial, how to learn ui design, adobe xd tips, how to prototype an app, how to prototype an app in xd, how to wireframe, tutvid, nathaniel dodson, XD

Tutorial Recording Notes:

Disclaimer: these are the actual notes I used to record this video and are written in a language you may or may not understand. Hopefully, you find them useful or cool.

  1. Start dragging images into shapes and show the limits on adjusting image size and position when you just drag in. This works most of the time and it’s the fastest and easiest way to mask.
  2. Cut away the shape that’s in place, drag in a photo and resize it, paste the shape (XD always pastes back in place) and then use the Object menu to create mask with the shape, open the layer folder and adjust the contents being masked as you wish.