Use Figma for UI image cropping when speed, layouts, and teamwork matter. Use Photoshop when the image itself needs serious repair. Figma is best for cards, avatars, hero sections, app screens, and quick resizing. Photoshop is best for retouching skin, removing objects, fixing color, or making a photo print-ready.
TLDR: In Figma, you can crop an image in about 10 to 20 seconds by selecting it, opening the image fill, choosing Crop, and dragging the handles. For example, a product designer making 24 app cards can crop all images inside the layout without leaving the file. Photoshop gives more power, but it often adds extra export steps. For most UI work, Figma is faster and less annoying.
How to crop an image in Figma
Table of Contents
Figma gives you a few simple ways to crop images. The easiest method uses the image fill settings. It feels a bit hidden the first time. After that, it is quick.
- Select the image on your canvas.
- Go to the right sidebar.
- Find the Fill section.
- Click the small image thumbnail.
- Open the mode menu.
- Choose Crop.
- Drag the crop handles.
- Move the image inside the frame.
- Click outside when done.
That is it. No export. No giant photo editor. No “where did my file go?” moment.
The super quick Figma crop trick
You can also double-click many images in Figma. This opens crop mode. Then you can drag the image around inside its visible box. Pull the handles to change what shows.
This is great for profile photos. It also works well for thumbnails, banners, product shots, and blog cards.
Say you have a team page with 12 faces. Some heads are too high. Some are too low. One person is somehow 80% forehead. Classic. In Figma, you can fix each crop in place. The layout stays intact.
Crop with a shape mask in Figma
Sometimes you want the image inside a custom shape. Maybe a circle. Maybe a rounded rectangle. Maybe a weird blob because someone said the page needs to feel “friendly.” Fine. Figma can do that too.
Here is the mask method:
- Place your image on the canvas.
- Draw a shape over it.
- Put the shape above the image.
- Select both layers.
- Right-click and choose Use as Mask.
The image now shows only inside that shape. You can still move the photo inside the mask. You can also adjust the shape later. This makes it very useful for UI design.
Figma fill modes explained
Figma has several image fill modes. They sound boring. They are not. They decide how your image behaves inside a frame or shape.
- Fill: The image fills the whole shape. Some edges may get cut off.
- Fit: The full image stays visible. Empty space may appear.
- Crop: You choose the visible part yourself.
- Tile: The image repeats like a pattern.
For UI design, Crop is usually the best choice. It gives control without making a separate file.
Why Figma is often better for UI image editing
Figma is built around screens. That matters. You are not just editing one image. You are placing it inside a card, frame, section, or component.
This is where Figma wins:
- You crop in context. You see the button, text, spacing, and image together.
- It is non-destructive. The original image is not ruined.
- It is fast. You do not need to open another app.
- It works with components. Great for repeated UI cards.
- It is team-friendly. Other designers can see and edit the crop.
Honestly, it feels like Photoshop asks for a small ceremony before you can do a tiny crop. Open file. Crop. Save. Export. Import. Check size. Repeat. That gets old after the fifth app card.
Where Photoshop still wins
Photoshop is not weak. Not even close. It is just not always the right tool for UI cropping.
Use Photoshop when you need to change the image itself. Figma can crop and place images. Photoshop can repair them.
Photoshop is better for:
- Removing a person or object from a photo.
- Fixing shadows and highlights.
- Advanced color correction.
- Detailed skin retouching.
- Cutting out hair or complex edges.
- Preparing high-quality print images.
If a hero photo has a trash can in the background, use Photoshop. If the photo just needs to fit inside a 320-pixel card, use Figma.
Figma vs Photoshop: the simple comparison
| Task | Best Tool | Why |
|---|---|---|
| Crop an avatar | Figma | Fast and easy inside the layout. |
| Crop a product card image | Figma | You see the full UI while cropping. |
| Remove background clutter | Photoshop | It has better image repair tools. |
| Fix photo color | Photoshop | More control over tones and color. |
| Build a screen mockup | Figma | It is made for interface design. |
A real UI workflow example
Imagine you are making a landing page. You have a hero image, three feature cards, six customer logos, and eight profile photos. That is 18 image placements.
In Photoshop, you might crop each image, export it, then place it into the design. If each image takes 90 seconds, that is 27 minutes. And that assumes nothing goes wrong. Of course something goes wrong.
In Figma, you place the images directly. Then you crop them in the design. If each crop takes 20 seconds, that is about 6 minutes. That saves over 75% of the time. Nice.
Best practices for cropping images in Figma
- Crop around the focal point. Keep faces, products, or key details visible.
- Use consistent ratios. Cards look cleaner when images match.
- Check mobile sizes. A crop that works on desktop may fail on a phone.
- Avoid tiny source images. They can look blurry when stretched.
- Name your layers. Future you will be grateful.
- Use components. This keeps repeated image layouts tidy.
Common Figma cropping mistakes
The most common mistake is using Fill and expecting perfect results. Fill is automatic. It may chop off heads, products, or important text. Use Crop when the image needs a careful position.
Another mistake is cropping without checking the full design. A photo might look fine alone but terrible beside a heading. UI is about the whole screen.
Also, watch image weight. Huge photos can slow files down. If a photo is 6000 pixels wide and your card is 300 pixels wide, that is overkill. Resize heavy images before bringing them into Figma if performance gets bad.
So, which tool should you use?
Use Figma for everyday UI image cropping. It is quicker. It keeps the image inside the design. It helps teams work together without passing files around.
Use Photoshop when the image needs real editing. Fix the photo there. Then bring the cleaned-up image into Figma for layout and cropping.
The simple rule is this: crop for layout in Figma, edit pixels in Photoshop. That split keeps your work fast, clean, and much less frustrating.
