How to Crop in Figma: Simple Image Editing

There is no crop button on the Figma toolbar. The tool lives inside the Fill panel, which is the first thing that trips people up coming over from Photoshop. What it does is reposition the visible window of an image fill, leaving the pixel data behind it completely intact.

All of this happens on the canvas in Figma Design, the company’s browser-based interface tool. No reason to open a raster editor for a simple reframe.

Figma’s own documentation for the feature counts eight blue handles around the crop box, since every corner and every edge midpoint doubles as a drag point (Figma Help Center, 2025).

What Does Crop Mean in Figma?

Nothing gets deleted. What changes is which part of an image fill shows inside its container, and the rest of the picture stays loaded underneath.

Photoshop’s raster crop does the opposite. Those pixels leave the file for good.

Open a Figma file back up a month later and the whole original image is still there under whatever crop you applied. Drag the handles again, switch scale modes, reset the fill, and it comes back exactly as it was.

• The crop sits on the image fill rather than on the shape or frame holding it, which is the entire reason it stays reversible
• Overshot and want a clean slate? Undoing the change in Figma puts the previous crop state straight back

Market position explains part of why Figma built it this way. The tool holds roughly 41.78 percent of the collaborative design tool market, well ahead of Adobe XD and InVision (6sense technographic data, 2026).

Files at that volume get resized, swapped, and re-cropped every day. Destructive crops would make that kind of iteration genuinely painful.

How to Crop an Image Using the Fill Panel

Most people reach for this method first, and it is also the quickest one.

1. Select the image layer on the canvas
2. Double-click the image, or open the Fill panel and click the image name to reveal the dropdown, then choose Crop
3. Drag the handles at the corners or edges to redefine the visible area
4. Click and drag inside the crop box to reposition the image underneath it
5. Press Enter, hit Esc, or click outside the shape to apply the crop

Figma’s canvas renders through WebGPU, the engine that replaced its original WebGL renderer in late 2025, so the crop preview updates in real time as you drag. No lag between the handle and what you see.

Keyboard Modifiers for Precise Cropping

Figma keeps the aspect ratio locked by default while you drag a handle. Hold Control (Windows) or Fn (Mac) to free it up for a manual, free-form resize.

Option (Mac) or Alt (Windows) resizes the crop from the opposite edge at the same time, instead of only the side you grabbed. Combine both and you can pull a crop box inward from its center without eyeballing the numbers.

The full list of these lives in Figma’s keyboard shortcuts, worth a bookmark if you crop images often.

How to Crop an Image Into a Circle or Custom Shape With a Mask

A mask hides whatever falls outside a vector shape you draw, again without deleting anything underneath.

Draw the shape, stack it above the image, select both, then apply masking in Figma through the right-click menu.

Layer order matters. If the shape sits below the image in the layer panel, the mask does nothing at all.

Using the Ellipse Tool for a Circular Crop

1. Press O, or select the Ellipse tool from the toolbar (press R first for a rectangle mask instead)
2. Draw a circle over the part of the image you want to keep
3. Select both the circle and the image, right-click, and choose Use as Mask

This is the standard route to a circular avatar or a badge-style profile photo. Resize the ellipse afterward and the visible crop resizes with it, since the mask stays linked to the shape.

Using a Custom Path for an Irregular Crop

Swap the preset shape for the Pen tool and the crop follows whatever outline you draw.

One continuous path works fine on its own. For anything more involved, boolean operations like union or subtract merge several shapes into a single mask before you apply it.

Complex paths left ungrouped tend to produce crops that look right in one spot and wrong in another, so group multi-shape masks first.

How to Crop Using a Frame Instead of a Mask

A frame clips whatever sits inside it the moment you resize the frame smaller than its contents.

Wrap the image in a frame, or right-click an existing selection and choose Frame Selection, then drag an edge inward. Anything past the boundary disappears from view, though it is still sitting in the layer panel if you expand the frame again later. Building one is covered in how to make a frame in Figma.

Clip content is on by default, and that setting is what does the actual cropping. Turn it off and the overflow spills past the frame edges, which is useful when you want to preview bleed.

Frames also crop groups of layers rather than a single image, which is the real advantage over the Fill panel. Stack five images inside one frame and a single resize crops all of them together.

Fill, Fit, Crop, and Tile: How Figma’s Image Scale Modes Differ

Each scale mode decides how an image behaves inside its container, and only one of them is a manual crop.

Fill is the default for good reason. It covers the container without stretching, and it trims whatever spills over the edges on its own.

Fit refuses to crop anything. The tradeoff is empty space whenever the image and the container disagree about proportions.

When someone says they cropped an image in Figma, Crop is usually the mode they mean. It behaves close to Fill, except the visible window is yours to place instead of Figma centering it for you.

Tile skips cropping entirely and repeats the source image. Fine for seamless patterns. Photos look awful.

How to Crop an Image to a Specific Aspect Ratio or Fixed Size

Lock the proportions before you start dragging, or plan on redoing the crop later.

Figma keeps the crop box’s aspect ratio locked by default as you drag a corner handle, so no modifier is needed to preserve it. Holding Control (Windows) or Fn (Mac) does the reverse and frees the ratio for a free-form crop.

Square format (1:1) is the usual pick for avatars and grid-based layouts, while 16:9 stays the widescreen standard for banners and video thumbnails. Then there is 4:5, the tall portrait shape that shows up across mobile feeds.

Once the crop is set, entering exact width and height values in the right-hand panel locks the frame to a fixed pixel size on top of the ratio.

That is a separate setting from the crop box itself. Resizing the frame afterward can restretch the image unless the fill mode is still set to Crop.

How to Round or Smooth the Corners of a Cropped Image

Corner radius rounds the point where two straight edges meet, and it stacks on top of any crop already applied.

Select the shape or frame holding the cropped image, then find the corner radius field in the right-hand panel. Full steps are in rounding corners in Figma, including how to set each corner independently rather than pushing one value into all four. Independent values are what you want for asymmetric cards or tabs.

Corner smoothing sits next to the radius field and does something else entirely. It changes the character of the curve, not its size, and it shows no effect until a radius already exists.

At 0 percent you get a plain rounded rectangle with a hard transition where the curve meets the straight edge. Figma marks 60 percent as its iOS preset, matching the squircle geometry Apple uses on its own app icons, which sit at a corner radius near 22.37 percent of the icon’s width.

Smoothing works on frames, rectangles, polygons, and stars. Shapes drawn or edited with the pen tool are out.

How Auto Layout and Frame Resizing Change a Cropped Image

A crop set inside a fixed frame stays exactly where you left it. Wrap that same image in an auto layout frame and a resize can quietly undo the work.

Auto layout also reuses the word Fill for something unrelated. Here it is a resizing mode that controls how an object fits inside its parent frame, separate from the Fill scale mode for image fills covered earlier.

Fill stretches the object to match the parent and ignores the image’s own proportions. Hug sizes it to its content, which for a cropped image usually means the crop’s own dimensions.

Fixed locks the size regardless of what the parent frame does.

A Figma community thread from November 2023 documents this exact problem. A designer trying to set a logo image to fill vertically inside auto layout ran into visible distortion once the outer frame was resized. Another community member (not Figma staff) explained that filling the image on that axis could cause it, and suggested switching to Hug.

Hug on whichever axis keeps distorting is the usual fix, though the image then stops stretching with the rest of the layout.

Guidance on the wider feature is in using auto layout in Figma, worth reading before you combine it with cropped images.

How to Replace an Image Without Losing Its Crop

Swapping an image keeps the crop only when the replacement lines up closely enough with the original.

Right-click the image, choose Swap Image, then pick the new file from your computer or a connected library.

Similar dimensions and the existing crop and fill mode usually carry over untouched. Different proportions and Figma often falls back to the frame’s width or height constraint instead of your saved crop.

Figma’s own community forum reported a related inconsistency in Figma Slides in March 2026: after resizing an image, the fill setting sometimes reverted from Fill back to Crop on its own, squashing the image, according to the thread.

If a swap resets the framing, reopening Crop mode and repositioning by hand is faster than fighting the fill settings afterward.

How Cropping Affects Export Size and Image Quality

The crop boundary decides what gets exported, not the full original image sitting behind it.

A few numbers are worth having in your head before you hit export.

• WebP lossless images run about 26 percent smaller than PNG at equivalent quality (Google Developers, 2025)
• WebP lossy images run 25 to 34 percent smaller than comparable JPEGs (Google Developers, 2025)
• Exporting at 2x scale produces a file tagged at 144 DPI, which is why re-importing a 2x export does not visually double in size (Figma Help Center)
• SVG and PDF exports only support 1x scaling, regardless of the scale value set on other formats (Figma Help Center)

None of that changes the crop itself. Cropping tighter reduces the exported pixel dimensions, and a smaller image compresses down almost automatically.

Format still matters more than the crop for final size. A PNG export of a tightly cropped photo can outweigh a WebP export of the uncropped original.

Saving the result works the same way regardless of format, covered in downloading an image from Figma.

For the raster-versus-vector distinction specifically, see the difference between SVG and PNG, since a cropped photo and an SVG icon behave nothing alike on export.

Should You Crop in Figma or in Photoshop First?

For most interface work, Figma’s crop tool is enough on its own.

Photoshop still wins on anything that needs the image repaired or extended rather than just framed differently. Adobe’s own documentation describes Content-Aware Fill working directly inside the crop tool, generating new pixels when a crop rotates or expands past the original canvas (Adobe Helpx, updated February 2026).

Figma has no equivalent. Its crop repositions a window over pixels that already exist, and it never invents new ones.

What you get in Figma is fast, non-destructive, and stays in the same file as the rest of the design. Rectangular, circular, and custom-shape crops are all covered through fill and masking. Repairing damaged areas or generating new image content is not.

Photoshop crop tool:

• Content-Aware Fill repairs edges and extends canvases during the crop itself
• Full resampling and retouching control over the pixel data
• Requires exporting from Figma and reimporting afterward, which adds a round trip to the workflow

Reach for Photoshop when a rotated photo leaves blank corners, or when a subject needs more room than the original file provides. Everything else, from UI mockups to marketing frames with straightforward photos, stays faster inside Figma.

When Cropping in Figma Does Not Work

Figma’s crop tool only touches image fills. Everything else in a file follows different rules.

Where Figma’s Crop Tool Has Structural Limits

A vector shape or a text layer carries no image fill, so the crop tool has nothing to adjust.

Reshaping a vector layer means editing its path directly, or cutting the shape with a boolean operation. Crop mode is not part of that.

• Text layers resize by changing the box or the font size, never by cropping
• Layer properties set by a main component can block crop edits on individual instances
• Detail lost outside a bad crop cannot be recovered, since Figma has no resampling or content-generation tools

When the image fill sits inside a component, editing the component itself is sometimes the only way to change the crop rather than the instance.

Swapping an image for one with different proportions can also disturb a saved crop, covered above in the section on replacing an image without losing its crop.

Common Cropping Mistakes That Cause Distortion

Most distortion traces back to resizing an object after a crop without keeping the aspect-ratio lock in place.

• Holding Control or Fn by accident while dragging a corner handle, which frees the aspect-ratio lock and can stretch the image unevenly
• Switching from Fit to Crop and forgetting to reposition the image inside the new window
• Resizing a frame around a Fill-mode image without resetting the fill mode to Crop first

The first one is the most common and the easiest to sidestep. Leaving the default lock alone while dragging costs nothing and saves a redo later.

FAQ on How To Crop In Figma

Should You Use a Mask or a Frame to Crop an Image?

Masks handle non-rectangular results like circles and custom shapes.

A frame is the better call when several stacked layers need to crop together, since resizing the frame clips them all at once. For a simple rectangular crop, neither one is necessary. Use the Fill panel.

How Do You Undo a Crop in Figma?

Pressing Command Z (Mac) or Control Z (Windows) right after cropping reverses it instantly.

Later on, since the crop only adjusts the image fill, reopening Crop mode and dragging the handles back out restores the original view with no separate backup file needed.

Does Cropping Work the Same Way Inside a Component Instance?

Not always. If the main component locks the image fill’s properties, an instance cannot open Crop mode on it directly.

Overriding the fill first, or editing the crop inside the main component, is often the only way around a locked instance.

What Should You Standardize First in How To Crop In Figma?

Standardizing the Figma crop tool means locking a consistent aspect ratio and scale mode into a component before a team starts filling it with different photos. That single decision prevents most cropping inconsistencies before they happen.

Order matters more than people expect.

1. Lock the scale mode and aspect ratio inside the component
2. Set corner radius and smoothing as shared values
3. Document the image swap workflow for everyone else

You are trading per-image flexibility for consistency across the file. A component built this way resists loose, one-off crops, which does slow down anyone who genuinely needs an unusual composition on a single instance.

Once cropping is standardized, applying Figma component best practices is the next step, since a crop standard only holds up inside a component built to survive edits and reuse.