How to crop a shape in Figma

When you’re creating professional quality designs in Figma, it helps to have high quality images in your design file. But sometimes you’ll find a great image and discover that it’s not the right size or shape to suit your needs. Fortunately, you don’t have to take the image to another manipulation tool; you can perform all of the cropping you could possibly need inside of Figma.

Whether your need is simple, like turning a square avatar photo into a circle, or more complex, like cutting out the shape of a person’s body, you can handle any of these tasks by mastering the cropping techniques that already exist in Figma.

• Basic cropping in Figma
• Understanding shape cropping in Figma
  • A simple shape cropping example
  • A complex shape cropping example

Basic cropping in Figma

Before we get to more advanced techniques, we should start with the basic ways to crop an image in Figma. To begin, I like to use the Unsplash plugin to generate a random, high-quality, open-source image of a person.

How do you crop a square in Figma?

For many user interfaces, I might need this image to have a square aspect ratio, so to do this, I can perform a simple crop operation by opening the image details from the Fill section of the Design panel and selecting Crop from the dropdown menu.

This will expose the eight cropping handles that I can click and drag as desired. As a shortcut, you can also start from the original image on your canvas and hold down Ctrl while dragging any corner of the image to quickly crop while you drag:

Since I want this final image to be a precise square, I can also use the Width and Height properties to set equal values and then hold shift while dragging a corner handle to maintain that exact 1:1 ratio while resizing the image:

How do you crop a circle in Figma?

If I’m turning this image into an avatar for a user profile UI, I’ll want to further crop it into a circle, since that’s more common for avatars and profile pictures. To do this, I’ll simply set a corner radius that’s at least half the height of the image, or drag the corner radius handles from the image until it becomes a circle:

Now my image is ready to go.

Understanding shape cropping in Figma

Sometimes you won’t start with the image first. What if you already have a handful of assets in Figma and you need to make your images fit into those assets?

That’s where shape cropping can help. Let’s walk through the steps together.

A simple shape cropping example

First, I’ll want to make a duplicate of my original image; that way I’ll still be able to refer back to the original later if I want. Then I’ll place that copy on top of the placeholder ellipse on the profile card:

Using Ctrl while I click to select multiple layers, I select both the ellipse layer and the image layer. Then at the top of the screen, I select Use as mask. This immediately creates a group containing both original layers:

How do you crop a complex shape?

One of the main benefits of this method is that I can always go back to the original ellipse and manipulate the shape. As I make changes, the overlaid image continues to crop accordingly. This can be helpful anytime you need to crop an image into a more complex shape:

A complex shape cropping example

Sometimes your task isn’t simply to change the size or shape of the image, but to extract a specific portion of the image itself. Often this requires you to step beyond basic geometric shapes and create an abstract mask.

Let’s pretend we need to mock up some virtual backgrounds for a photobooth app. How will we demonstrate what each background will look like against the same head? The best way to do this is to crop only our foreground and then copy and paste it on top of each of our backgrounds.

First, use the pen tool to trace the outline of our foreground subject. Because this is such a complex shape, the edge detail of the final crop will depend on how many points you choose to add to this shape. If you zoom in on your image, it is easier to capture those details with additional vector nodes. For a smoother mask shape, you can add a corner radius to the vector:

As you finish tracing your foreground subject, make sure it is a closed loop. Masking will not work properly without an enclosed shape.

Then, just as you did before with a simple shape crop, select both the vector layer and the image, then at the top of the screen select Use as mask. You will be left with just the foreground subject you traced:

From here, you can now place your cropped image in front of any background you want:

Conclusion

There was a time when image manipulation required several different pieces of software, and designers would need to tediously work across each one to achieve their desired outcome. Fortunately, Figma continues to deliver an all-in-one tool that excels at most of these tasks.

Figma makes it particularly easy for designers to crop and mask images without relying on any third party tools. For UX designers, image manipulation is only a small part of the job, but getting each image just right is critical to deliver visually appealing interfaces. Once you master cropping and masking in Figma, you can return your focus to the big picture.