How to Crop in Figma: Step-by-Step Guide on Cropping Images

Figma is a powerful web design tool. Image cropping or masking in Figma is a helpful technique that allows designers to hide or reveal parts of an image using shapes. Using masks, designers can create beautiful compositions, crop images, and blur backgrounds. Let's explore three ways to crop in Figma by masking images with shapes.

Option 1: Masking an image with a shape

From the Shape tools dropdown menu, select Place image/video...

After placing your image in Figma on the canvas, return to the Shape tools menu and select a shape of your choice. We are using the Ellipse tool for our example.

Now let's rearrange the order of the image and shape by right-clicking on the shape and choosing Send to Back.

Select both the image and shape by clicking and dragging across them.

Click the Use as Mask icon in the toolbar with the items selected.

Finally, make adjustments to either the image, the shape, or both.

Option 2: Filling a shape with an image

In this example, we will start with the Polygon shape from the Shape tools dropdown menu.

With our shape on the canvas, select the Fill color from the Design panel on the right-hand side. In the top left corner of the popup panel, open the dropdown menu by clicking Solid. Let's change this to Image.

Click Choose image and browse for a picture.

You are finished if you are happy with how your picture appears inside the shape. However, if you'd like to adjust the image or the shape, change the Fill option to Crop.

Use the edges of the image to change its dimensions. Remember to hold Shift while dragging to keep the proportions the same. Use the blue Crop handles to make adjustments to your shape.

Finally, resize your image in a shape by closing the popup panel, clicking on the group, and dragging the edges and/or corners.

Option 3: Filling text with an image

This example is very similar to filling a shape with an image. We will start by clicking the Text tool in the main menu. Click and drag a box on your canvas and add some text.

With our text in place, select the Fill color from the Design panel on the right-hand side. In the top left corner of the popup panel, open the dropdown menu by clicking Solid. Let's change this to Image.

Click Choose image and browse for a picture.

You are finished if you are happy with how your picture appears inside the text. However, if you'd like to adjust the image or the text, change the Fill option to Crop.

Use the edges of the image to change its dimensions. Remember to hold Shift while dragging to keep the proportions the same. Use the blue Crop handles to make adjustments to your text.

The best part about adding images this way is that the text is still editable!

Masks in Figma Wrap-up

There you have it! Three easy ways to add images to shapes and text for your designs. Figma is a powerful design tool that can significantly improve our design processes on individual and team projects.

Looking for a keyboard shortcut? You can check out more tips and tricks on our Figma UI UX Cheatsheet to help you develop quicker workflows and produce more consistent designs.

Go farther with Figma through my Figma Essentials course, which covers the ins and outs of this great web design tool for just $12. The courses will teach you how to create wireframes, implement colors and images in your designs, as well as create icons, buttons, and other UI components. Plus, so much more. You also gain access to all of my 30+ other courses, priority support from the BYOL team, design challenges, and more. 👉 Get started here.

See you inside! 😃