How to Crop a Shape in Figma Like a Pro
As Seen On
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!
Konger
Up until working with Casey, we had only had poor to mediocre experiences outsourcing work to agencies. Casey & the team at CJ&CO are the exception to the rule.
Communication was beyond great, his understanding of our vision was phenomenal, and instead of needing babysitting like the other agencies we worked with, he was not only completely dependable but also gave us sound suggestions on how to get better results, at the risk of us not needing him for the initial job we requested (absolute gem).
This has truly been the first time we worked with someone outside of our business that quickly grasped our vision, and that I could completely forget about and would still deliver above expectations.
I honestly can't wait to work in many more projects together!
Disclaimer
*The information this blog provides is for general informational purposes only and is not intended as financial or professional advice. The information may not reflect current developments and may be changed or updated without notice. Any opinions expressed on this blog are the author’s own and do not necessarily reflect the views of the author’s employer or any other organization. You should not act or rely on any information contained in this blog without first seeking the advice of a professional. No representation or warranty, express or implied, is made as to the accuracy or completeness of the information contained in this blog. The author and affiliated parties assume no liability for any errors or omissions.