How To

How to Crop Image in Adobe XD

Leri Koen


Adobe XD is one of the newer programs released by the tech giant. It is a vector-based user experience design tool for web and mobile apps.

In order to create compelling designs, Adobe XD allows you to edit and crop images that you can use with your web or mobile apps. Along with being able to do this, you can also do much more to design UX, UI and prototyping.

How to Crop Image in Adobe XD

What Does Adobe XD Do and Who Should Use It?

Adobe XD can be used to create cohesive design systems, design flows for new device innovations, and prototyping complex interfaces for user testing of web and mobile apps. This program can be used to design anything from smartwatch apps to entire websites.

Adobe XD is the ideal program for individual designers and developers that work in vector format. Adobe XD is also ideal for larger businesses, corporations and teams that want to create user experiences and need to collaborate on the process.

One of the reasons the Adobe XD can be used by both individuals and bigger teams is that you can easily collaborate on different projects. Another reason is that projects created with this program are easily scalable. It is also backed by Adobe’s security, which also means specific user controls can be set.

Crop an Image in Adobe XD

You can use Adobe XD to crop images so that you can only use the sections that you want within your designs. In Adobe XD there isn’t a standard crop feature like you would see on other image editing programs. Instead, you will have to use the masking feature to crop the section you want.

Open Adobe XD And Import Your Image

Open Adobe XD on your Mac or Windows desktop and import the image you want to crop.

How to crop image in adobe xd

Draw a Shape

In order to crop your image or make any edits, for that matter, you will first have to click on the image to select it.

Draw the shape you want to use. You can use regular shapes, such as circles, squares or rectangles, which can be found in the left-side panel. If you want to create a more specific shape that is not listed in the shapes tool, you can use the pen tool to create a custom shape.

How to crop image in adobe xd

Mask the Shape

Next, you need to mask the shape. In order to do this, you first need to select both the image and the shape. You can do this by clicking and dragging over both images. Next, you need to click on the ‘Object’ tab in the top menu. In the drop-down list, select ‘Mask with Shape’. The image will now be cropped to the shape you created. This is not a destructive function, so if you need to adjust your image.

How to crop image in adobe xd

Adjust the Image

Now that the image has been cropped to your shape, you can adjust and resize the shape as needed without losing any resolution in your image.

How to crop image in adobe xd

Improve Images by Cropping Them

Adobe XD is a powerful tool that can be used in various vector-design functions for web and mobile app development. Despite being robust, it is still user-friendly and learning how to use different features such as the masking tool to crop images is easy.

You may also like