How to Crop an Image in Figma — Crop Tool, Masks & Clipping

“I just want to crop an image to a rectangle and I can’t find the tool.” “How do I crop to a circle?” “My image keeps spilling out of the frame.” Cropping trips people up in Figma for one reason: there’s no standalone crop/trim button in the toolbar the way Photoshop has one. Cropping is built into the image itself — you double-click an image to enter Crop mode. Once you know that Figma handles cropping through a couple of distinct features, the confusion disappears.

This guide covers them in the order of what you want to do: Crop mode for a rectangle → masks for circles and custom shapes → Clip content to hide overflow → removing a background to transparency. At the end, it covers the masking pitfalls to expect when your file comes from an Adobe XD migration.

What you’ll get from this article

• The difference between Crop, masks, and Clip content — and which fits your case
• Step-by-step Crop mode for a rectangular, non-destructive crop
• How to crop to a circle, shape, or custom path with a mask — and how to release it
• Why removing a background to transparency requires a plugin
• Why image masks break after an XD → Figma migration, and how to prevent it

🗺️ Crop vs. mask: which one to use

Which feature you reach for depends on the shape you need. Here’s the full picture at a glance:

The key distinction: Crop changes the visible area of the image itself, while a mask puts a shape on top to create a “window.” If a rectangle is all you need, Crop is fastest. If you need any other shape, use a mask.

✂️ Crop an image — Crop mode

For a simple rectangular crop, Crop mode is the quickest path. The original image data is preserved, so you can re-crop as many times as you like.

1. Select the image. Click the image layer you placed on the canvas.
2. Enter Crop mode. Double-click the image, or in the right panel choose Crop from the image fill’s display mode. A handled frame appears.
3. Drag to set the area. Drag the outer handles to change the visible (cropped) area; drag inside to reposition the image within the frame.
4. Confirm. Click outside the frame or press Enter. You can re-enter Crop mode any time to adjust the area again.

To change the crop’s aspect ratio, hold Control (Windows) / Fn (macOS) while dragging a handle (Shift rotates the image in 15° increments during a crop). This is handy for banners and thumbnails where the frame is fixed and you only want to move the content inside it.

⭕ Crop to any shape — masks (circle, custom)

A circular avatar, a star-shaped cutout, a crop that follows a logo’s outline — when you need any shape other than a rectangle, use a mask. A mask reveals the image only within the bounds of the shape placed beneath it. This is what Illustrator and XD call a clipping mask — Figma simply calls it a mask.

1. Make the shape you want to crop to. Draw a circle with the ellipse tool (O), a rectangle, a polygon, or any custom path — this becomes the outline of the crop.
2. Put the shape below the image. In the layer order, place the mask shape below the image (the bottom layer of the selection acts as the mask).
3. Select both and apply the mask. Select the shape and the image, then right-click → “Use as mask,” or use the mask icon in the toolbar, or the shortcut Ctrl + Alt + M (Windows) / ⌃ + ⌘ + M (macOS).
4. The image is cropped to the shape’s outline, and the layers are grouped into a mask group.

You can still edit the mask shape after applying it — double-click into the mask group to select it. Turn the circle into an ellipse and the crop follows; move the image and you’re “panning the subject inside the window.” Unlike Crop, a mask can cut to any shape, no matter how complex.

🔓 Release and edit a mask

A mask can be removed at any time. To start over or switch to a different shape:

• Release it: Select the mask group, then right-click → “Remove mask” (or toggle the mask icon in the right sidebar, or press the same shortcut again). The image and shape return to their original stacking.
• Change the shape: Double-click to select the mask shape, then edit its size, shape, or position — the crop area updates in real time.
• Swap the image: Select the image layer inside the mask group and replace its fill image to keep the same crop shape with new content.

🖼️ Hide overflow — Clip content

If you don’t really want to “crop” so much as stop an image from spilling past a boundary, a frame’s Clip content is the lightest option. It clips the contents at the frame’s edges without building a mask.

1. Place the image inside a frame (or a component with Clip content).
2. Select the frame and check Clip content in the right panel.
3. Anything that extends past the frame’s bounds is hidden. Resize the frame and the visible area follows.

Clip content shines in layouts like cards and thumbnail slots where you want to show only what fits a fixed frame. Because the image itself isn’t cropped — the frame decides what’s visible — it holds up well when layouts resize. It can’t cut to arbitrary shapes the way a mask can, but for rectangular overflow it’s the simplest tool.

🪄 Removing a background needs a plugin

One common misconception to clear up: removing a background (keeping the subject and making the rest transparent) can’t be done with Crop or masks alone in Figma’s built-in features. Crop only does rectangles, and a mask only cuts to a shape you draw yourself — neither detects a subject’s outline to erase the background automatically. For that, use a background-removal plugin that detects the subject with AI, or make a transparent PNG externally and place it.

For the step-by-step background-removal options, when to use a plugin vs. external processing, and the JPG gotcha, see how to remove an image background in Figma. If you only want the subject’s shape as a decorative frame, a mask can sometimes get you close.

🔄 Image crops and masks from an XD migration

Files migrated from Adobe XD need one extra layer of care around image crops and masks. XD also has a masking mechanism, so a design where an image was cropped to a shape needs to convert into the equivalent structure on Figma’s side.

• A simple rectangular crop holds up if Figma reconstructs it as a Crop or frame clipping.
• A shape mask (a crop to a circle or custom shape) needs to be rebuilt as a Figma mask group. If this is off, the crop area shifts, or the mask comes loose and the whole image shows.

Rebuilding masks one image at a time is tedious, so the safe move is a migration path that converts the mask structure itself. Pixel Fine Converter reads XD files directly and converts image masks and crops into Figma’s structure, cutting down on the rebuild work after migration. For the overall migration workflow, see the XD → Figma migration playbook; for shape and path conversion specifics, see converting XD shapes to Figma.

💬 FAQ

Q: How do I crop an image to a rectangle in Figma?

Double-click the image to enter Crop mode, then drag the handles to set the area. The original image is preserved, so you can widen the frame later to bring back anything you cropped off.

Q: How do I crop to a circle?

Draw a perfect circle with the ellipse tool while holding Shift, place it below the image, select both, and apply a mask (Ctrl/⌘ + Alt/⌥ + M). Crop only does rectangles, so circles and custom shapes use a mask.

Q: How do I release a mask?

Select the mask group and right-click → “Remove mask” (or toggle the mask icon, or press the same shortcut again). The image and shape return to their original stacking.

Q: Can I remove a background to transparency?

Not with Figma’s built-in Crop or masks. For a background removed along the subject’s outline, use a background-removal plugin, or make a transparent PNG externally and place it.

Q: I just want to hide the part of an image that overflows the frame.

Select the frame and check Clip content — the overflow is hidden, with no mask required.

Q: My XD image crop broke after migrating to Figma.

The XD shape mask didn’t convert into a proper Figma mask structure. Use a migration-focused converter that carries the mask structure over, or rebuild the masks after migrating.

🎯 Recap

The trick to cropping in Figma is to stop hunting for a “crop tool” and pick the right one of three features by goal. The four takeaways:

Rectangle? Crop. Need a shape? Mask. Just hiding overflow? Clip content. Keep that mapping in mind and cropping in Figma stops being a guessing game. And if your file starts in Adobe XD, migrating with the mask structure intact is a reliable way to avoid rebuilding every crop by hand.

Related pages

• How to remove an image background in Figma — the detailed steps for background removal and transparency
• XD → Figma migration playbook — the full migration workflow
• Converting XD shapes to Figma — shape and path conversion details
• Tidying up the Figma UI — everyday shortcuts and small tricks
• Converting XD shadows and effects to Figma — migrating image decoration