Working with Images in Adobe XD

After you have imported your images into Adobe XD, you don’t have a great deal of editing control, but you can resize and rotate images just like you would any other shape.

You can also easily round the corners of an imported image using the corner widgets.

Masking your images

By defining a closed shape with a shape tool or pen tool, you can define what becomes a mask. A mask offers you the ability to put an image into a custom shape. It also offers you the ability to crop out parts of an image that you do not want to be visible. Follow these steps in order to create a mask:

1. Import an image on to an artboard.
2. Create a shape and size and position it over the image. The placement over the image determines what part of the image will show.
   Position a shape over an image to determine what part of the image you want to show.
3. Using the Select tool, select both the shape and the image. It is important that the shape be on top of the image; if it is not, choose Object →Arrange → Bring to Front.
4. With both objects selected, choose Object → Mask with Shape. The shape now contains the image.
   An image masked with a shape.

If you would like to edit the positioning of the shape over the image, simply double-click the masked object using the Select tool. When you are finished repositioning your image and shape, click anywhere else on your artboard.

Taking advantage of masks

You can mask any object(s) with a shape. Perhaps you have several items that you want to keep together in a circular shape, or you want to crop a series of repeated images. Both of these tasks can be done by following these steps:

1. After creating your artwork, add a shape on the top, or bring a shape that you wish to mask into to the front using Object → Arrange → Bring to Front.
2. Select all the objects that are to be masked in addition to the topmost object, which is the mask, and choose Object  → Mask with Shape.

If you need to edit objects in a mask independently, you can either choose Object → Ungroup Mask, or open the Layers panel and double-click on the icon to the left of the object named Mask Group. When you double-click, it allows you to select individual objects.