3 Easy Ways To Crop An Image In Figma
In this guide, I’m going to share with you different ways how to crop an image in Figma, including the use of the Crop tool, Masking, and the Edit Object tool.
3 Easy Ways to Crop An Image in Figma
The easiest way on how to crop an image in Figma is by holding down the Command key on Mac or Ctrl key on Windows while clicking and dragging any edge or corner of your image.
If you change your mind, release the Command or Ctrl key first before releasing the cursor to undo the cropping and resize the image.
Here are various ways you can crop an image in Figma:
Method 1: Crop Tool
Cropping an image in Figma is a simple process that can help you focus on a specific part of an image or remove unwanted parts. Here are the steps to crop an image in your Figma design project:
Step 1: Select the Image
To crop an image in Figma, you need to select the image first. You can do this by clicking on the image layer in the Layers panel or by clicking on the image itself on the canvas.
Step 2: Choose the Crop Tool
Once you have selected the image, you need to choose the Crop tool. You can find the Crop tool in the top menu bar. Click on the Crop tool button.
Step 3: Apply the Crop
Figma will add eight blue handles around the image. You can adjust the crop area by clicking and dragging the blue handles in any direction. You can also reposition the image itself by clicking and dragging it.
Once you are happy with the crop area, you can apply the crop by clicking anywhere on the Figma app background. The cropped image will now be displayed on the canvas.
It’s important to note that cropping an image in Figma, similar to Canva does not delete the parts of the image that are outside the crop area.
The original image is still intact, and you can adjust the crop area at any time by selecting the image and choosing the Crop tool again.
Overall, basic cropping in Figma is a straightforward process that can help you focus on the parts of an image that are most important.
Method 2: Use Shape As Mask
Masking is another non-destructive method for cropping images in Figma. In this method, you can use any shape as the cropped area and the image will be clipped to the shape’s boundaries.
But you can still move and edit the image within the masked area. Here are the steps to use a mask to crop your image in Figma:
Step 1: Create a Shape Layer
To create a shape layer, click the downward pointing arrow on the Rectangle shape button on the top toolbar. In this example, I will select the Ellipse tool from the drop-down menu.
Click and drag the cursor while holding down the Shift key to draw the shape of a circle. Adjust the size and position of the circle as needed.
Step 2: Position the Shape Layer
Next, position the shape layer over the image that you want to crop. Use the Layers panel on the left to adjust the layer’s position and order. Drag the shape layer below the image layer in the Layers panel.
Step 3: Mask the Image to the Shape Layer
To crop the image into the shape layer, select both layers by holding down the Shift key and clicking on each layer.
Or drag the cursor over both layers on the Figma canvas. Then, right-click and select Use As Mask from the pop-up menu. The image will now be cropped to the mask shape.
To adjust the shape layer, select the layer and use the Edit Shape tool to modify the corners and edges of the shape. You can also use the Boolean menu to combine shapes and create more complex shapes.
Method 3: Edit Object
The Edit Object tool allows designers to manipulate shapes, paths, and vector networks in their designs, offering granular control over these elements.
From adjusting individual points, curves, and lines to creating complex custom shapes, the Edit Object tool provides the flexibility and precision necessary for fine-tuning your designs.
Step 1: Select Edit Object
The first thing is to select your image by clicking on it once. Go to the top bar menu and select the Edit Object button. It has the icon of one big square with a small circle on each of the four corners.
Step 2: Crop Image
Bring the cursor back to your selected image. If you hover your cursor over one corner of your image, you will see that the corner circle fades out. Crop your image by clicking on any of the corner circles and dragging it at the same time.
Once you’ve cropped your image, you can save your file or export to other formats like Illustrator, PNG, and more.
Crop In Figma FAQs
Can I crop images in Figma using a circle or other custom shapes?
Yes, you can use any shape as a mask or for clipping, including circles, polygons, or even custom shapes created with the Pen tool or Ellipse Tool.
Is there a way to crop multiple images at once in Figma?
Yes, you can apply a mask or clipping to multiple images simultaneously by placing all images within a single shape and then using that shape as a mask or for clipping.
How do I revert a cropped image to its original state in Figma?
For masks, you can undo the cropped image by right-clicking and choosing Use As Mask to revert back to its original state.
Can I crop images in Figma without losing image quality?
Yes, Use As Mask, Edit Object and Crop tools are non-destructive methods, meaning the original image remains unaltered. When exporting a cropped image, ensure you choose the appropriate file format and settings to maintain image quality.
Can I use Figma to crop images for use in print or other high-resolution projects?
Yes, Figma supports exporting images in various file formats and resolutions, making it suitable for use in print and other high-resolution projects.
Before You Go…
Need more tips on cropping in Figma? Using images in Figma is essential, but it’s just one of the basic steps. Working with clients, partners, and other designers can require you to know how to convert files. Read my next article to learn how to convert Figma designs to Adobe Illustrator…
