Create a mask with shapes

Learn how to create a mask with shapes.

Masks in XD
mask with shapes

Use masks to clip portions of images or objects and create outcomes that focus on specific elements in your designs. 

Some of the scenarios where you can use masking is creating a profile avatar or simulating a dark mode experience as shown below.

Profile picture within a circle
Profile avatar in a mobile application
Animated masks to simulate a dark mode experience
masks to simulate a dark mode experience

Want to learn how to create, edit, or remove a mask effect? Follow these steps:

  1. Draw a shape that you want to use as the mask and place it on the portion of the image you want to retain. Select the image and the shape. 
  2. Select Object Mask with Shape (MacOS) or right-click the selected content and choose Mask with Shape (Windows). The portion of the image or drawing that is outside the shape is masked.
1

3. To edit the content within the mask shape, double-click the masked content. The masked area is not deleted from your project. You can readjust the mask to highlight another portion of the image.

4. To disable or remove a mask, select the object and right-click (Windows) or Ctrl + Click (Mac), and select Ungroup Mask from the context menu.

Limitations

  • When you mask one vector object with another, the object on top of the stack acts as a mask. 
  • You cannot mask text on shapes, components, groups, or symbols.
  • XD does not support alpha masks or masks with opacity. Here is an interesting discussion that you can be part of and upvote this feature in UserVoice.

Was this article helpful to you?