Hide parts of images and other content with masks.

What you'll need

This sample file is an Adobe Stock asset you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

What you learned: How to mask or hide parts of content using different types of masks in XD

Masking methods in Adobe XD

Masking is a way to hide parts of content in your XD documents—maybe to show part of a larger image for a header. There are two ways to mask in XD: you can drag an asset, like an image, into a shape, or use a shape as a mask for content in your document.

Dragging an asset into a shape

If you are starting a design with placeholder graphics, like a circle in place of a profile picture, you can drop assets into the shapes. The assets, like an image, will be fit to the shape proportionally and the parts of the asset that are outside of the bounds of the shape are hidden or masked.

  • Drag an asset from a folder into a shape in an open XD document. When the shape is highlighted, release the mouse and the asset is placed within the shape.
  • Drag a point on the selected shape to resize the shape and the content within.

Tip: To replace content within a shape, drag the asset from a folder into the shape. The new content is proportionally scaled to fit within the shape.

Editing the shape or masked content

  • To edit the content within the shape, double-click the shape and the content within is selected. You can then transform the content in different ways.

Masking with a shape

  • Draw or place a shape that you want to use as a mask onto the portion of the content you want to keep. The content that is outside the shape will be masked or hidden.
  • Select the image and the shape (mask).
  • Choose Object > Mask with Shape (MacOS) or right-click the selected content and choose Mask With Shape (Windows).

Editing the mask or content

  • Drag a point on the selected shape to resize the shape and the content within.
  • To edit the content within the mask shape, double-click the masked content. The mask is selected and can be transformed in different ways.
  • Click the content being masked and you can then transform it in different ways.

Tip: Simple SVG content you import can also be used as a mask. Drag an image from a folder onto SVG content in your XD document and the SVG content becomes the mask shape. You can also drag a simple SVG file from a folder onto an image in XD and the SVG content becomes the mask.
 

10/10/2019
Was this page helpful?