How to Crop in Figma: Simple Image Editing

You found the perfect image for your design. But it’s the wrong size, wrong focus, wrong everything.

Learning how to crop in Figma fixes that in seconds.

Figma’s crop tool is non-destructive. Your original image stays intact while you adjust what’s visible on the canvas.

This guide walks you through four methods: the standard crop tool, fill mode settings, mask layers, and Boolean operations for vector cropping.

You’ll learn the exact steps, keyboard shortcuts, and troubleshooting fixes for common problems.

Whether you’re trimming a header image or fitting photos into UI frames, these techniques work for any project.

Takes about 2 minutes to master. Let’s get into it.

Prerequisites

You need a Figma account (free or paid plan works).

Access Figma through the desktop app or any modern browser like Chrome, Firefox, Edge, or Safari.

Import your image file before starting. Figma supports JPEG, PNG, GIF, SVG, and WebP formats.

Basic familiarity with the layer panel and selection tools helps but isn’t required.

Time estimate: 2 to 5 minutes per image depending on complexity.

Step One: How Do You Access the Crop Tool in Figma?

Select your image layer on the canvas by clicking it directly or through the layers panel on the left sidebar.

Double-click the image. Or click the image thumbnail in the Fill section of the right sidebar.

Choose “Crop” from the Fill mode dropdown menu.

Blue crop handles appear around the image boundary. You’re now in crop mode.

Action

• Layers panel (left sidebar) → Click image layer
• Fill section (right sidebar) → Click image thumbnail
• Dropdown menu → Select “Crop”
• Result: Blue crop handles visible around image edges

Purpose

This activates the crop boundary controls for adjusting which parts of your image stay visible in your design.

Step Two: How Do You Adjust the Crop Area?

Drag the blue corner or edge handles to define the visible portion.

The faded area shows what gets hidden. Not deleted, just hidden.

Hold Shift while dragging to constrain proportions and maintain the original aspect ratio.

Hold Option (Mac) or Alt (Windows) to crop from opposite sides at the same time.

Action

• Corner handles: Drag to resize crop area diagonally
• Edge handles: Drag to resize single side
• Shift + drag: Maintain aspect ratio
• Option/Alt + drag: Adjust opposite sides together
• Result: Crop boundary reflects desired visible area

Purpose

This defines which portion of the image remains visible in your user interface design.

Step Three: How Do You Reposition an Image Inside the Crop Frame?

Hover over the faded (cropped) area until the move cursor appears.

Click and drag to shift the image position within the crop boundary.

The visible frame stays fixed while the image moves underneath. Think of it like sliding a photo behind a window.

Action

• Hover over faded image area: Move cursor icon appears
• Click and drag image: Shifts image position
• Result: Different portion of image now visible within crop frame

Purpose

Adjusts your focal point without changing the crop frame dimensions.

Step Four: How Do You Apply or Cancel the Crop?

Click anywhere outside the image on the canvas to apply changes.

Press Enter to confirm. Press Escape to cancel and revert.

The cropped image updates immediately. This is non-destructive editing, so you can always adjust later.

Action

• Apply crop: Click outside image OR press Enter
• Cancel crop: Press Escape
• Result: Image displays with new crop settings (or reverts if cancelled)

Purpose

Confirms or discards your crop adjustments. Need to undo changes in Figma? Use Ctrl+Z (Windows) or Cmd+Z (Mac).

Alternative Method: Cropping with Masks

Masks in Figma let you crop images into custom shapes beyond rectangles.

Standard cropping only gives you rectangular results. Masks open up circles, polygons, and custom paths.

Standard Crop Method vs Mask Method

Choose standard crop for simple rectangular adjustments. Choose masks when you need circular or custom shape cropping.

How Do You Create a Mask for Custom Shape Cropping?

Draw a shape over your image using Rectangle (R), Ellipse (O), or the Pen tool.

Position the shape over the desired image area you want to keep visible.

Select both layers by Shift-clicking each one.

Right-click and select “Use as Mask” or press Ctrl + Alt + M (Windows) or Cmd + Option + M (Mac).

Action

• Shape tools (toolbar) → Select Rectangle, Ellipse, or custom shape
• Draw shape over image area to keep visible
• Select both layers: Shift + click each layer
• Right-click → Use as Mask OR Ctrl/Cmd + Alt/Option + M
• Result: Image displays only within shape boundaries

Purpose

Creates non-rectangular crop boundaries for creative layouts. Perfect for profile avatars and decorative hero images.

Alternative Method: Boolean Operations for Vector Cropping

Boolean operations crop vector objects and shapes rather than raster images.

These work differently from the standard crop tool. You’re combining or subtracting shapes mathematically.

How Do You Use Boolean Subtract for Shape Cropping?

Create two overlapping shapes on your design canvas.

Select both shapes by Shift-clicking.

Click the Boolean operations dropdown in the toolbar.

Choose “Intersect” to keep overlapping area or “Subtract” to remove the top shape from the bottom.

Action

• Create base shape and cutting shape
• Position cutting shape over base shape
• Select both: Shift + click
• Toolbar → Boolean operations dropdown → Intersect or Subtract
• Result: Combined shape with cropped areas

Purpose

Crops vector shapes and creates complex cutouts. Useful when you need to cut shapes in Figma for logos or abstract icons.

Keyboard Shortcuts Reference

Learning these shortcuts speeds up your image editing workflow significantly. Most designers I know use Shift + drag constantly.

Verification

Confirm your crop worked correctly with these checks:

1. Click away from the image and re-select it
2. Check that only the intended area is visible
3. Double-click to re-enter crop mode and verify boundary positions
4. Export a test version (Ctrl/Cmd + E) to confirm final output

The export step matters most. What you see on canvas should match what you get in the exported file.

Troubleshooting

Crop Option Not Appearing in Dropdown

Confirm the layer is an image fill, not a vector shape.

Check the Fill section in the right sidebar shows an image thumbnail. If you see a solid color instead, re-import your image.

Image Appears Distorted After Cropping

Hold Shift while dragging handles to maintain original aspect ratio.

Check that Constraints aren’t forcing unexpected scaling. You can scale elements in Figma properly by adjusting constraint settings.

Cannot Select Image for Cropping

Check if the image is locked. Press Ctrl/Cmd + Shift + L to unlock.

Verify the image isn’t nested inside a locked group or frame.

Use the Layers panel to locate and select the correct layer directly.

Cropped Area Reappears After Export

Ensure you selected the correct layer before exporting.

Check export settings match intended frame boundaries.

Group the masked image before exporting if using the mask method. This bundles everything together properly.

Related Processes

Once you’ve mastered cropping, these related Figma skills expand your design capabilities:

• How to rotate elements in Figma
• How to apply blur effects in Figma
• How to round corners in Figma
• How to create gradients in Figma
• How to download images from Figma
• How to use components in Figma

Building a solid user experience requires combining multiple techniques. Cropping is just one piece of the puzzle.

For complete website projects, learn how to design a website in Figma or explore prototyping in Figma to bring your designs to life.

FAQ on How To Crop In Figma

What Is the Keyboard Shortcut to Crop in Figma?

Figma doesn’t have a dedicated crop shortcut. Double-click any image to enter edit mode, then select “Crop” from the Fill dropdown in the right sidebar.

Hold Shift while dragging handles to maintain aspect ratio.

Can You Crop Multiple Images at Once in Figma?

No. Figma requires cropping each image individually.

Select one image, adjust the crop area, apply changes, then move to the next. Batch cropping isn’t supported in the current version.

Is Cropping in Figma Destructive?

No. Figma uses non-destructive editing. The original image stays intact.

Cropped areas are hidden, not deleted. Re-enter crop mode anytime to adjust boundaries or restore the full image.

How Do You Crop an Image Into a Circle in Figma?

Use a mask layer. Draw an ellipse over your image using the Ellipse tool (O).

Select both layers, then right-click and choose “Use as Mask.” The image now displays within the circular boundary.

Why Is the Crop Option Greyed Out in Figma?

The layer isn’t an image fill. Crop mode only works on raster images, not vector shapes or frames.

Check the Fill section shows an image thumbnail. Re-import if needed.

Can You Crop Vector Shapes in Figma?

Not with the standard crop tool. Use Boolean operations instead.

Select two overlapping shapes, then choose Intersect or Subtract from the toolbar dropdown. This cuts vectors mathematically.

How Do You Reset a Crop in Figma?

Double-click the image to enter crop mode. Drag the crop handles outward until the full image is visible again.

Click outside to apply. The complete original image reappears.

Does Cropping Affect Image Quality in Figma?

No. Cropping only changes visibility, not resolution.

The original pixel dimensions remain unchanged. Export quality depends on your export settings, not crop adjustments.

How Do You Crop to a Specific Size in Figma?

Place your image inside a frame with exact dimensions. Select the image, change Fill mode to “Fill” or “Fit.”

Then switch to Crop mode to fine-tune positioning within those boundaries.

Can You Crop Imported PDFs or SVGs in Figma?

PDFs import as vector groups. Use masks or Boolean operations to crop them.

SVG files behave similarly. The standard image crop tool won’t work on vector-based imports.

Conclusion

Now you know how to crop in Figma using four different methods.

The standard crop tool handles quick rectangular adjustments. Mask layers give you circles, ellipses, and custom shapes. Boolean operations work for vector cropping.

Each technique is non-destructive. Your original files stay safe.

Start with the Fill mode dropdown for basic crops. Move to masks when your designs need creative shapes.

The keyboard shortcuts save time. Shift constrains proportions. Option/Alt crops opposite sides together.

Practice on a few images and the process becomes automatic. Most designers get comfortable within a single session.

Your mockups and UI layouts depend on clean image composition. Cropping in Figma gives you that control without leaving the design canvas.

Open Figma and try it yourself.