Learn how to create a mask with shapes.

Create a mask with shapes

Search
Adobe XD User Guide

On this page

Applies to: Adobe XD

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Learn how to create a mask with shapes.
Masks in XD

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
Animated 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.

Examples and sample files

Did you know that when you are starting a design with placeholder graphics, like a circle in place of a profile picture, you can create masks by dropping assets into the shapes? 

To learn more about dragging an asset into a shape or using an existing shape as a mask, check the tutorial below or download the sample files to try them out yourself.

Viewing time: 1 minute.


Number counter animations are used to display numbers in an interesting and eye-catching way. Want to learn how to use masking to create a running scoreboard?  Check out this video and download the sample files to try them yourself.

Viewing time: 1 minute 2 seconds.

Use masking to create an animated number counter

You can also check out XD support community for examples and tutorials.

Tutorials

Use masks to place an image into a custom shape and crop out parts of an image that you do not want to be visible. Check out this tutorial on how to work with images and masking in XD.

Viewing time: 1 minute.