Cropping images in Figma is a simple way to improve our designs by focusing on the important parts of an image. We can crop, resize, reposition, and even rotate images easily without losing the original content. This means we can adjust images anytime without starting over.
Using Figma’s built-in tools, anyone with edit access can quickly make precise changes. Whether we want to crop an image into a specific shape or just trim the edges, Figma offers flexible options to fit our project needs. It’s a handy skill that can save us time and make our designs look cleaner.
Let’s explore how to crop images effectively and some tips for managing them so our work stays smooth and professional.
Key Takeaways
- Cropping in Figma is quick and doesn’t delete any part of the image.
- We can adjust size, position, and rotation after cropping.
- Using the right crop method helps keep our designs clean and easy to edit.
Basic Cropping Methods in Figma
When we crop images in Figma, we can use several simple tools to change the visible part of the image without losing any data. We can also move or resize the image inside the crop area to get the perfect look.
Using the Crop Tool
The Crop Tool lets us quickly select just the part of the image we want to show. First, we click on the layer that contains the image fill. Then, we find and click the Crop image button in the right sidebar.
Once cropping is active, blue handles appear on the edges of the image. We drag these handles to cut out unwanted areas or focus on a specific part. After adjusting, we click outside the image or press Enter to apply.
Because cropping in Figma is non-destructive, we can come back and adjust the crop anytime without losing the hidden parts. This makes it easy to try different crops without starting over.
Image Fill and Crop Option
Figma also allows cropping through the image fill settings. We select the layer with the image, then click the color swatch in the Fill or Stroke section of the sidebar.
Inside the fill settings, we change the Fill mode to Crop. This opens the same crop handles so we can adjust the visible area. This method is helpful when the image is part of a shape or design element, giving us flexible control over how the image fits the shape.
We can also hold the Command (Mac) or Ctrl (Windows) key while dragging the handles to keep the aspect ratio. To adjust both sides at once, hold Option (Mac) or Alt (Windows).
Resizing and Positioning Images
After cropping, Figma lets us reposition the image inside the crop box to get the perfect framing. If we hover over the faded part of the crop, a reposition icon appears. Then, we click and drag to move the image within the crop.
We can also resize the image by dragging the edges or corners while holding keys like Command or Ctrl. This lets us zoom in or out inside the crop area.
For rotation, hovering outside the image corner shows a rotate icon. Dragging it with the Shift key lets us rotate the image in 15-degree steps for precision.
These tools give us control to create clean, focused images in our designs with ease. For complete guidance, see how to crop an image in Figma.
Advanced Cropping Techniques
When working with images in Figma, there are ways to crop that go beyond the basic trim. We can use shapes to control what part of the image is visible, and do it without losing any data. These options give us more control over image placement and help keep our designs flexible.
Masking an Image
Masking is a great way to crop images using shapes. We create a shape on top of the image, select both, and then apply a mask. The image will only show inside the shape’s boundaries.
To mask an image in Figma:
- Draw the shape you want (circle, rectangle, or custom).
- Place it over the image.
- Select both the shape and the image.
- Right-click and choose Use as Mask or press
Ctrl+Alt+M(Windows) /Cmd+Option+M(Mac).
Masks are editable. We can move, resize, or change the shape or image independently. This lets us adjust which part of the image shows without re-cropping. Masking is especially useful for creating unique image shapes in our designs.
Cropping to Custom Shapes
We can crop images into any shape by combining Figma’s fill options with a mask. Instead of just cropping rectangles, we use custom shapes like stars, polygons, or hand-drawn forms.
Steps to crop an image into a custom shape:
- Create or select the shape.
- Fill the shape with the desired image using the Fill section.
- Change the fill type to Image.
- Use the crop handles within the shape to adjust the visible area.
- Move or resize the image within the shape to get the right framing.
This method keeps the original image intact but limits what we see to the shape. It’s perfect for creative presentations and complex layouts. To learn more about cropping images into shapes, we can check how to crop images into shapes in Figma.
Non-Destructive Cropping
Figma’s cropping is non-destructive. That means when we crop an image, no pixels are deleted. The cropped part is hidden but still available if we want to adjust or undo the crop later.
We crop by dragging blue handles around the image in the Fill settings or using the Crop image button. After cropping:
- We can reposition the image by dragging inside the crop area.
- Resize or rotate the image with handles outside the crop area.
- Restore the original image anytime by resetting the crop.
This flexibility allows us to experiment with framing without risking image loss. Holding keys like Ctrl (Windows) or Command (Mac) helps us keep the aspect ratio or adjust opposite sides of the crop simultaneously. More tips on non-destructive cropping are found in the Figma Help Center.
Tips for Managing Cropped Images
When we crop images in Figma, it’s important to keep control over how the crop fits our design. Adjusting the crop and making sure our images don’t get stretched weird are key to keeping things looking sharp and professional.
Editing and Adjusting the Crop
In Figma, cropping is non-destructive, so we can always go back and change the crop area without losing any part of the original image. To adjust the crop, we click on the image layer and drag the blue handles to resize or move the cropped section.
If we want to reposition the image inside the crop, we hover over the faded area until the reposition icon shows up, then drag the image to change what’s visible. We can also rotate the image by dragging outside corners or hold Shift to snap rotation in 15-degree steps.
Holding Command (Mac) or Ctrl (Windows) while dragging helps keep the aspect ratio locked. This keeps our crops balanced and avoids stretching the image unevenly.
Stretching Images Responsibly
When resizing the cropped image, it’s important not to stretch it too far. Stretching can make the image look blurry or pixelated, especially if we scale beyond its original size.
We can resize by dragging edges, but letting the aspect ratio stay locked protects our image from distortion. If we need to adjust both sides evenly, holding Option (Mac) or Alt (Windows) while dragging resizes the image symmetrically.
If we want to undo a crop or resize, we just release the Command or Ctrl key before letting go of the mouse button. This makes it simple to experiment without damaging the image quality.
For more detailed help on cropping and adjusting in Figma, check out this step-by-step guide on cropping images.
Frequently Asked Questions
Cropping images and shapes in Figma is straightforward once you know the right tools and shortcuts. We can adjust crop areas, create masks, and work with different file types easily.
What are the steps to crop an image in Figma using a Mac?
First, select the image layer you want to crop. Then, click Crop image or select the fill swatch and choose the Crop option.
Drag the blue handles around the image to set your crop area. Hold the Command key while dragging to keep the aspect ratio.
Press Enter or click outside to apply the crop.
How can I use Figma to cut out a shape from an image?
We can use masking to cut out shapes from images. First, place your shape on top of the image.
Select both the shape and image, then right-click and choose Use as Mask. This shows only the part of the image inside the shape area.
Can you explain how to crop images for free in Figma?
Figma allows cropping images directly without any extra cost. Anyone with edit access can crop images using the built-in crop tool.
No plugins are needed. Simply select the image, use the crop tool, adjust handles, and click to apply.
What is the process to crop a shape in Figma?
To crop a shape, we often create a mask. Draw a shape over the area you want to keep.
Select the shape and the object(s) to crop, then use the Use as Mask option. This hides everything outside the shape.
How do I crop an image into a circle within Figma?
Start by drawing a circle shape that covers the image area you want. Place it above the image.
Select both the circle and the image, then right-click and pick Use as Mask. The image will now appear cropped in a circle.
Is it possible to edit and crop SVG images directly in Figma?
Yes, SVGs can be edited and cropped in Figma just like regular images. We can apply masks or use the crop tool on SVG layers.
Because SVGs are vector-based, we can also adjust individual points for more precise edits.