How to crop an image in Figma

Double click on the image. Select crop from the menu in the pop up and crop the image.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 12/12/2022 at 07:43
Last Updated on 07/14/2023 at 17:16
A flower that represents Figma with the text "Crop Images" beneath it.

Double click on the image. Select crop from the menu in the pop up and crop the image.

The following tutorial walks you through how to crop an image in Figma. If you are interested in other Figma tutorials, please consult our links below.

SubscribeHow to use a mask in FigmaHow to create and use image styles in Figma for image design systemsHow to use Auto Layout in FigmaSearch blog for all Figma tutorials

Step One: Double click the Image

A screenshot of Figma with the Image fill menu pop up highlighted.

Select the image you wish to crop and double click it. This will open up the image menu in a pop up.

Alternatively, after selecting it select image under fill in the design inspector on the right side.

Step Two: Select Crop

A screenshot of Figma with Crop highlighted in the image pop up menu dropdown which is initially titled fill.

In the image pop up menu, click on the drop down menu which is set to Fill and select Crop.

Step Three: Set the crop area

A screenshot of Figma with a highlight over our image which is being cropped in preview mode.

Set the crop area using the handles provided by Figma. It will provide a preview of your final crop.

Step Four: Finish

A screenshot of Figma with the image cropped.

Once you have set the crop area, press Enter to crop the image.

Looking to learn more about the basics behind text, shapes and media in Figma ?

Consult the list below to learn more about the basics behind text, shapes and media in Figma.

How to add text to a Frame in FigmaHow to resize a Text Frame in FigmaHow to add shapes to a Frame in FigmaHow to use Boolean Groups in FigmaHow to use the Pen tool in FigmaHow to add images to a Frame in FigmaHow to use a mask in FigmaSearch blog for all Figma tutorials

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe