Cropping
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
- Select an object with an image fill.
- In the Properties panel, find the image in the fill section.
- Click the Adjust image crop button (crop icon).
- 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.
Related
- Layout — positioning and sizing objects
- Components — using cropped images in reusable components