Cropping images into custom shapes is an essential skill for any Figma user. Whether you’re designing a social media post, logo, or website mockup, knowing how to crop shapes will give your designs a polished, professional look. Don’t worry – with a few simple steps, you’ll be cropping circles, triangles, and unique shapes like a pro in no time. So, let’s learn how to crop a shape in Figma.
How to Crop a Shape in Figma:
Step 1: Add an Image to Your Canvas
First, drag and drop an image onto your canvas. It can be a photo, illustration, texture – anything you want to crop. Ensure the image layer is selected in the layers panel on the left side of the screen.
Step 2: Draw a Shape to Crop To
Use the shape tools in the toolbar on the left to draw a shape over your image. It will be the custom crop area. For a circle, use the ellipse tool while holding the shift. For a triangle, use the polygon tool. Use the pen tool to get creative with stars, hexagons, or freeform shapes.
Position and size the shape so it frames the part of the image you want to keep.
Step 3: Mask the Image to the Shape
Here comes the magic! With the image and shape layers selected in the layers panel, use the keyboard shortcut Ctrl/Cmd + Shift + M. This masks the image to the shape, cropping it instantaneously. The unwanted parts of the image outside the shape will disappear.
Step 4: Adjust the Crop
You can click and drag the shape layer to adjust the crop area if needed. The image will update in real-time, letting you tweak the framing until it’s just right.
And that’s it! With these four simple steps, you can crop images into any shape imaginable. It opens up so many creative possibilities for your Figma designs. The options are endless for circular profile pictures, triangular page banners, or even a custom-cropped logo.
Common Mistakes to Avoid when Cropping Shapes in Figma:
Here are some common mistakes to avoid when cropping shapes in Figma:
- Not using vector shapes – Make sure to use the shape tools to draw vectors for cropping rather than trying to crop with rectangle frames. Vectors will give you clean, smooth edges.
- Forgetting to mask – After drawing a shape over your image, don’t forget to right-click and select “Mask with Shape” to actually apply the crop.
- Positioning the shape incorrectly – Take care to precisely position and size your shape layer to frame the part of the image you want to keep.
- Not adjusting the crop – Don’t be afraid to reposition or resize the shape layer to tweak the framing until the crop looks perfect.
- Mixing up shapes and images – Make sure the shape layer is above the image layer in the layers panel before masking. It ensures the shape will crop the image.
- Using low-resolution images – Crop and export at 2x or 3x to maintain image quality, especially for print projects.
- Forgetting to expand strokes – If your shape has a stroke, right-click and select “Expand Stroke” before masking to get the stroke in the crop.
- Not simplifying shapes – Boolean operations like subtraction can sometimes result in complex shapes. Simplify them for easier editing.
- Assuming cropping is destructive – Cropping in Figma is non-destructive, so you can adjust crops later without losing quality.
Avoiding these mistakes will help you crop shapes in Figma smoothly and efficiently. Pay attention to the layer order, mask properly, and take time to refine the crop for professional results.
The Bottom Line:
Next time you need to crop an image, don’t settle for a boring square or rectangle. Follow these tips to crop like a pro and take your Figma skills to the next level!
