On this page

Cropping lets you trim an image fill to show only the part you need — without replacing the image or masking it manually.

## How to crop

1. Select an object with an image fill.
2. In the Properties panel, find the image in the fill section.
3. Click the **Adjust image crop** button (crop icon).
4. The crop dialog opens with your image and a crop rectangle.

## The crop dialog

The dialog shows your image with an adjustable crop area. The area outside the crop is darkened, and a rule-of-thirds grid overlays the crop rectangle.

### Resizing the crop

Drag any of the **8 handles** to resize the crop area:

- **Corner handles** (top-left, top-right, bottom-right, bottom-left) — resize from that corner.
- **Edge handles** (top, right, bottom, left) — resize along that edge only.

The minimum crop size is 10 pixels in each dimension.

### Moving the crop

Click and drag **inside** the crop rectangle to reposition it without changing its size. The crop stays within the image bounds.

### Aspect ratio

Use the **aspect ratio dropdown** in the bottom toolbar to lock the crop to a specific ratio:

| Ratio | Common use |
| --- | --- |
| Freeform | No constraint |
| 1:1 | Square (avatars, icons) |
| 4:3 | Standard photo |
| 3:2 | Classic photo |
| 16:9 | Widescreen |
| 16:10 | Widescreen (desktop) |
| 2:1 | Panoramic |
| 3:4, 4:5, 2:3, 9:16 | Portrait orientations |
| 5:4 | Large format |

When a ratio is locked, resizing any handle maintains the proportion.

### Confirming or canceling

- **Done** — Applies the crop and closes the dialog.
- **Reset** — Clears the crop, reverting to the full image.
- **X** or **Escape** — Closes without saving changes.
- **Enter** — Same as Done.

## What can be cropped

Cropping applies to **image fills**, not to objects themselves. Any object that has an image paint (frames, rectangles, ovals, text, etc.) can have its image cropped.

**SVG images cannot be cropped.** The crop button is disabled for SVG fills with a tooltip explaining the limitation.

## Crop and Figma import

When importing from Figma, image transforms are converted to Moio crop data automatically. The crop is preserved as part of the image fill.

## Troubleshooting

### The crop button is grayed out

The selected object doesn't have an image fill, or the image is an SVG. Cropping only works on raster image fills (PNG, JPG, etc.).

### My crop disappeared after replacing the image

Uploading a new image clears the previous crop. Recrop after replacing.

### The crop looks different at different zoom levels

Crop coordinates are stored in image pixel space, not canvas space. The crop is consistent — what changes is the rendering resolution at different zoom levels.