To crop in Figma, double-click the image, select the Fill section in the dropdown menu, and choose Crop. To make changes, click and drag an image inside the crop field after adjusting the shape with the blue handles. Then, press the Enter key to save the results.
Hi, my name is Yana, and I have been using Figma regularly for the past year to create graphics and edit images for websites. I am very familiar with the image editing tools in Figma and I can provide valuable insights on how to effectively use this design software.
Today, I will share a quick guide on how to crop an image in Figma. You can choose between cropping it freely or placing it within a specific shape. I will also answer some of the most frequently asked questions and provide you with some tips along the way.
Contents
Key Takeaways
- For precise cropping edits, use the grids and rulers to help you.
- You can crop images in an irregular shape to create more complex and appealing projects by using the vector objects.
- If you switch the image property from Crop, back to Fit or Fill, all of the previous changes will be removed.
Step-by-Step Guide to Cropping in Figma
Cropping is a useful tool that helps designers change the layout and focus the user’s attention on a specific area. It comes in handy especially if you need to edit images to ensure consistency across multiple versions of your design.
Here’s how to crop in Figma quickly and easily. This method works for images, videos, and illustrations.
Step 1. Enter the Image Settings
Select the image you want to crop and double-click it to open the image settings. Next, click on the Fill button and choose the Crop option in the drop-down menu.
You also can access the image settings by clicking on your image, under the Fill section in the toolbar on the right side.
Step 2. Change the Crop Area
Once you are in crop mode, you will see blue handles located on the sides of your image. Click and drag any of them to change the shape of the crop area.
Step 3. Relocate the Image
To change the image position, click and drag the image on any of the corners. To keep the original ratio, press and hold the Shift key.
Step 4. Save the Result
Once you are happy with the outcome, press the Enter key or just click on the screen to save the result. You also can undo a crop edit by using the keyboard shortcuts Command+Z for Mac or CTRL+Z for Windows.
How to Crop a Shape in an Image in Figma
Figma allows you to place an image or video into a shape such as a circle, triangle, or square. Let’s take a look at how you can do it.
Step 1. Add the Shape
First, choose the shape you want to use for your design. Select a rectangle, circle, triangle, or star shape. You also can design your own shape by switching to vector mode.
Step 2. Place the Image Inside the Shape
To copy an image, simply use the Command+C keyboard shortcut for Mac or CTRL+C for Windows. Then select the shape, and press the Command+V shortcut for Mac or CTRL+V for Windows to paste it.
You also can add an image by using the Unsplash plugin, so you can have access to free images from Figma. This is a Figma Community plugin.
After installing the plugin, select a shape in Figma. Next, right-click your mouse and choose Plugins. Locate the Unsplash option within the plugins menu and run it to search for the perfect image.
Step 3. Edit the Image Position and Save the Results
You can change the image position after you insert it inside the shape. To do this, use the crop feature in the image settings and move the image.
You also can make it smaller or bigger by dragging any of the corners. Hold down the Shift key to keep the ratio and press the Enter key in the end to save the results.
FAQs
Here are the answers to some of the frequently asked questions about cropping in Figma.
How Do You Delete Part of an Image in Figma?
To remove an object from an image, select it by using the Pen tool. Then fill the vector object with any color and place it behind the image. Select them both and apply the “Use as Mask” option to delete a part of the image. If you need to remove the background of an image, you can use the free PixCut plugin.
How Do I Resize an Image in Figma Without Cropping?
To resize an image without cropping, double-click the picture to open the image settings. Then, select the crop option from the drop-down menu and drag the blue handles to adjust the ratio. Next, go to the Fill mode, so the image is placed in the new dimensions without it being cropped.
Final Thoughts
There are a few simple ways you can crop an image in Figma. You have the option to crop it freely or by placing your image, video, or illustration within a shape.
To ensure accuracy when cropping or replacing an image, you can utilize grids or rulers. It is important to stay in crop mode throughout the process to achieve the desired results.
Do you have any other questions about how to crop in Figma? If so, feel free to leave your questions in the comments section below.
