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.

Looking for a 'crop tool'?

Figma has no standalone crop/trim button in the toolbar like Photoshop. Instead, use Crop mode (double-click an image) for a rectangular crop, a mask to crop to a circle or any custom shape (for a plain circle, a corner radius will do), and Clip content to simply hide what spills out of a frame. Pick one of the three based on what you’re trying to do, and you’re set.

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 is neither Crop nor a mask
  • Why image masks break after an XD → Figma migration, and how to prevent it

🗺️ Crop vs. mask: 4 cases, which one to use

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

What you wantFeatureShapes it can crop to
Crop to a rectangleCrop modeRectangle only (any aspect ratio)
Crop to a circle / custom shapeMaskAny shape or vector path
Hide what overflowsClip contentThe frame / component bounds
Remove the backgroundPlugin (see below)The subject’s outline

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.

Circles are the exception — two shortcuts before you reach for a mask

“Anything but a rectangle means a mask” is the general rule, but circles and ellipses are the exception. Figma’s own docs list three ways to crop an image to a circle: (1) increase the layer’s corner radius, (2) use the image as a layer fill, or (3) create a mask1. When you just want to round off a square image — a profile avatar, say — option 1 is far quicker and adds no extra layers. Save the mask for shapes a corner radius can’t express, like a star or a logo outline.

✂️ Crop an image — Crop mode in 4 steps

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. There are three doors in, and the official docs treat them as equals1: double-click the image, click the Crop image button in the Image section of the right panel, or open the swatch in the Fill or Stroke section and switch the mode to Crop. A handled frame appears.
  3. Set the area. Dragging the blue handles is the usual route, but the docs also list a slider for the crop value, an aspect ratio picker, and Resize to fit1. Drag inside the frame to reposition the image within it.
  4. Confirm. Click outside the frame or press Enter. You can re-enter Crop mode any time to adjust the area again.

Crop is non-destructive

Cropping in Crop mode doesn’t delete the pixels you hide — it only narrows the visible area. Widen the frame later and the hidden part comes back. That’s what makes Crop safe: you can never “over-crop” permanently. When you Export, only the currently visible area is written out as the image.

A handful of modifier keys make cropping much faster. These are the three the official docs call out1:

  • Break the aspect ratio: hold Control (Windows) / Fn (macOS) while dragging. Figma preserves the ratio by default, so you need this for a free-form crop
  • Move the opposite side too: hold Option (macOS) / Alt (Windows) while dragging and the facing edge moves with it
  • Crop without entering Crop mode: hold ⌘ Command (macOS) / Ctrl (Windows) and drag a corner of the image

Once an image is cropped you can also reposition, rotate, and resize it inside the frame. To rotate, hover just outside a corner of the image and drag — hold Shift for 15° increments1. All of 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 in 3 steps (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. It’s worth knowing that shapes aren’t the only thing you can mask with: the official docs are explicit that any layer works — vector shapes, text layers, images with an alpha channel, groups, and more2. Masks also come in three types — alpha, vector, and luminance — with alpha as the default2. For a full rundown of the types and when to use each, see how to mask in Figma.

  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 go to More options (⋯) → Use as mask in the right sidebar, or press Ctrl + Alt + M (Windows) / ⌃ + ⌘ + M (macOS)2.
  4. The image is cropped to the shape’s outline, and the layers are grouped into a mask group.

Fastest way to crop to a circle

To crop a profile image to a circle: draw a perfect circle by holding Shift with the ellipse tool, place it below the image, select both, and apply the mask. After masking, move or resize the circle to adjust the crop area directly.

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 — 3 operations

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.

When the mask isn't working — or is working too hard

If the image vanishes after masking, or the wrong area gets hidden, the cause is almost always the layer stacking order. The mask is the bottom layer of the selection. If the shape you meant to use as the mask sits above the image, Figma treats the image as the mask and the result inverts. Reorder the layers, then re-apply.

The opposite problem — unrelated layers getting masked too — comes down to a scoping rule worth learning. Per the official docs, a mask applies to every sibling layer above it and stops as soon as it hits one of three things2: another mask or mask object, its parent frame or group, or a frame or component with Clip content turned on. When a mask reaches further than you meant it to, wrapping the intended layers in a frame or group is the standard fix.

🖼️ 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 is neither Crop nor a mask

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. Crop only does rectangles, and a mask only cuts to a shape you draw yourself — neither detects a subject’s outline. For that, use Figma AI’s Remove background (select the image and click it in the secondary toolbar; the plan requirement the docs state is a paid plan, and it spends AI credits)3, a background-removal plugin, or a transparent PNG made externally.

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.

🚀 Keep your XD masks and crops intact in Figma — Pixel Fine Converter

Converts the masks and crops from your XD images into Figma's structure. Try the Free version on your own file to check the fidelity before you decide.

🔄 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. If you are still mapping out the migration, the step-by-step XD → Figma migration guide — which runs from pre-conversion prep through artboards and components — makes it easier to decide where the mask rebuilding gets handled. 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?

If you only need to round off a square image, raising the layer’s corner radius to its maximum is the shortest path. Figma’s docs list three routes to a circular or elliptical crop: increase the corner radius, use the image as a layer fill, or create a mask1. When you need a shape a corner radius can’t express, 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).

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 Crop or masks — both only cut to a shape you specify. For a background removed along the subject’s outline, use Figma AI’s Remove background3, a background-removal plugin, or a transparent PNG made externally.

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: What’s the difference between Clip content and a mask?

Clip content simply hides whatever overflows a frame or component boundary, so the visible area is always the frame’s rectangle. To crop to a specific shape — a circle, star, or any custom path — use a mask (a clipping mask) instead. Rule of thumb: use Clip content to keep an image inside a layout frame, and a mask when you need a defined cutout shape.

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:

#What you wantFeature
1Rectangular cropCrop mode (double-click → handles, original preserved)
2Circle / custom shapeCircle? Max out the corner radius. Anything else: a mask (shape below → select → Use as mask)
3Hide overflowFrame’s Clip content
4Background to transparentNot Crop or a mask — Figma AI Remove background, a plugin, or external processing

Rectangle? Crop. Circle? Corner radius. Any other 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.

🚀 Install Pixel Fine Converter from the Figma Community

One-click install from Figma Community

Everything in this article about how Figma behaves is sourced to Figma’s official documentation, cited below. Everything about how Pixel Fine Converter converts masks and crops is first-hand: it comes from our own source code and hands-on testing.

Sources

  1. Crop an image — the three ways into Crop mode (double-click / the Crop image button in the Image section / the Fill and Stroke display mode), the slider, aspect ratio picker and Resize to fit, the Control/Fn, Option/Alt and ⌘/Ctrl modifiers, repositioning, rotating (Shift for 15° increments) and resizing after a crop, and the three routes to a circular or elliptical crop (checked 2026-08-20) ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  2. Masks — any layer working as a mask (vector shapes, text, images with alpha, groups), the alpha / vector / luminance types, a mask applying to the siblings above it until it reaches another mask, its parent frame or group, or a frame with Clip content on, and the routes and shortcut for Use as mask (checked 2026-08-20) ↩ ↩2 ↩3 ↩4

  3. Make or edit an image with AI — Figma AI’s Remove background (select the image, then the secondary toolbar) and its stated requirement of a paid plan with edit access plus AI credit consumption (checked 2026-08-20) ↩ ↩2