Figma is the quickest choice when you need to crop an image inside a layout, while Photoshop is better when the image itself needs real pixel editing. If your goal is to resize, reframe, mask, or export a visual for a website mockup, social post, app screen, or presentation, stay in Figma. You will save time and avoid the annoying export-import loop.
TLDR: To crop an image in Figma, select the image, double-click it, choose Crop from the image controls, then drag the crop handles and reposition the photo. In a simple banner design test, cropping directly in Figma took about 15 seconds, while opening Photoshop, editing, saving, and replacing the file took closer to 90 seconds. For example, if a designer needs to trim a team photo for a website hero section, Figma is usually enough. Use Photoshop when you need retouching, background cleanup, healing, color repair, or advanced image correction.
How to crop an image in Figma
Cropping in Figma feels quick because the image already lives inside your design. You do not need to leave the file. You do not need to re-export anything. You just adjust the visible part of the image and keep working.
Here is the basic method:
- Select the image on the canvas.
- Double-click the image to enter image editing mode.
- In the top toolbar, choose Crop if it is not already active.
- Drag the crop handles to change the visible area.
- Click and drag the image inside the crop box to reposition it.
- Press Enter or click outside the image to apply the crop.
That is the standard workflow. It is fast, clean, and easy to undo. Figma does not delete the hidden parts of the image. It only changes what is visible inside the frame or image boundary. That means you can come back later and adjust the crop again.
Image not found in postmetaFigma crop modes: Crop, Fill, Fit, and Tile
Figma gives you a few image display options, and they matter more than people expect. Honestly, it feels like half of the “cropping problems” in Figma are just the wrong mode being used.
- Fill: The image fills the entire shape or frame. Parts may be hidden if the aspect ratio does not match.
- Fit: The full image stays visible. You may see empty space if the frame shape is different.
- Crop: You manually choose which part of the image appears.
- Tile: The image repeats as a pattern. Useful for textures and backgrounds.
Fill is great for profile cards, thumbnails, product tiles, and hero images. Fit is better when the entire image must be visible, such as a logo or product photo. Crop gives you the most control. Use it when composition matters.
Using frames and masks for cleaner cropping
Figma also lets you crop by placing an image inside a frame or using a mask. This is useful when you want an image to fit a specific shape, such as a circle, rounded rectangle, phone screen, or custom blob.
For a quick circular crop:
- Create an ellipse.
- Place the image above or below it.
- Select both layers.
- Use Use as Mask.
- Move and scale the image until it looks right.
This is handy for avatars, testimonials, team grids, and app UI mockups. It keeps the layout editable. You can still resize the mask, move the image, or swap in a new photo later.
When Figma is better than Photoshop
Figma wins when the crop is part of a design layout. That includes website sections, ads, pitch decks, mobile screens, banners, and social graphics. You can crop the image while seeing the surrounding text, buttons, spacing, and grid. That context matters.
Say you are making a landing page hero. The headline sits on the left. A person’s face appears on the right. If you crop in Photoshop first, you are guessing where the face should land. In Figma, you can adjust the crop while looking at the full composition. That saves time. It also prevents weird alignment issues.
Figma is also better for team review. A marketer can comment on the crop. A designer can adjust it in seconds. A developer can inspect the final layout. No extra file handoff is needed.
When Photoshop is still the better tool
Photoshop wins when you need to change the actual image, not just its visible area. Figma is not built for heavy photo editing. It cannot replace tools like healing, cloning, frequency separation, advanced selection, or detailed color correction.
Use Photoshop when you need to:
- Remove people, objects, dust, or background clutter.
- Fix skin, hair, reflections, or product details.
- Cut out a subject with fine edges.
- Repair exposure, shadows, color casts, or lens issues.
- Create advanced composites from multiple photos.
- Use content-aware crop or generative extensions.
The catch is that Photoshop adds friction for simple layout edits. Opening the app, finding the file, cropping, saving, exporting, and replacing the image can burn a minute or two. That sounds small. It adds up fast when you are editing 20 images for a product grid.
Figma vs Photoshop for quick image editing
Think of Figma as a layout-first image tool. Think of Photoshop as a pixel-first image tool. Both can crop images, but they solve different problems.
| Task | Best choice | Why |
|---|---|---|
| Crop a hero image inside a web design | Figma | You can see the full layout while cropping. |
| Make a profile image circular | Figma | Masks and frames are quick and editable. |
| Remove an unwanted object | Photoshop | You need pixel-level editing tools. |
| Build social media variants | Figma | Duplicating frames and resizing crops is faster. |
| Retouch a product photo | Photoshop | It has better cleanup and correction tools. |
Common Figma cropping annoyances
Figma cropping is simple, but it is not perfect. It drives me crazy that small images can look fine on the canvas, then turn soft after export at larger sizes. Figma cannot invent missing image detail. If the source image is low resolution, the crop will expose that problem.
Another common issue is accidental stretching. If you resize an image layer the wrong way, the image may distort. To avoid that, use crop controls or hold the right modifier keys while scaling. If proportions matter, keep an eye on the aspect ratio.
Also, remember that cropping in Figma is usually non-destructive. That is good for edits. It can be less ideal if you need a final trimmed image file with no hidden area. In that case, export the cropped frame or process the image in Photoshop.
Best workflow for designers
Use a simple rule: crop in Figma, fix in Photoshop. If the photo already looks good and only needs framing, use Figma. If the photo has flaws, fix it in Photoshop first, then place it into Figma for layout work.
A practical workflow looks like this:
- Place the original image in Figma.
- Crop it inside the layout.
- Check how it works with text, spacing, and breakpoints.
- If the image has quality issues, edit the source in Photoshop.
- Replace the image in Figma and keep the same crop if possible.
- Export the final frame at the needed size.
This keeps early design work fast. It also saves Photoshop for the edits that actually need it.
Final takeaway
Figma is the better option for quick cropping inside designs because it keeps the work visual, editable, and close to the final layout. Photoshop is stronger for serious photo repair and detailed image manipulation. If you only need to reframe an image, make a thumbnail, crop a hero photo, or fit a visual into a mockup, Figma is the faster tool. Save Photoshop for the moments when the pixels themselves need work.
