How to Remove a Background in Figma — Transparency, Plugins & PNGs
“I want to make an image’s background transparent and can’t find how.” “I just want the subject, not the background.” “Does Figma even have a background-removal button?” Background work trips people up in Figma for one reason: “transparent background” actually means three different things. Do you want to use an already-transparent PNG, fade the whole image, or keep the subject and erase everything else? Which one you mean completely changes the feature you reach for.
And that last one — keeping the subject and removing the background — can’t be done with Figma’s built-in features alone. This guide separates the three cases, walks through each, and explains why background removal needs a plugin. It closes with what to watch for when your file comes from an Adobe XD migration.
Up front: Figma has no 'remove background' button
Figma has no built-in feature that detects a subject and erases the background the way Photoshop does. If you want to use a transparent PNG, just place it; to fade an image, use Opacity; to keep the subject and remove the background, use a background-removal plugin or process it externally. Sorting your goal into one of these three is the fastest route.
What you’ll get from this article
- How to tell the three “transparent background” cases apart (PNG, Opacity, background removal)
- How to handle transparent PNGs correctly in Figma
- Adjusting Opacity to fade an image — and the common mix-up it causes
- Why removing a subject’s background needs a plugin, and when to process externally instead
- Why image transparency and masks break after an XD → Figma migration, and how to prevent it
🗺️ Which one do you actually need?
People who search “remove background in Figma” are often after very different operations. Start by pinning down which case is yours.
| What you want | Feature | Difficulty |
|---|---|---|
| Use an already-transparent image | Place a transparent PNG | Easiest, most reliable |
| Fade the whole image | Opacity | Just change a number |
| Keep the subject, erase the background | Background-removal plugin / external | Not built-in |
| Show only a shape’s area | Mask (covered below) | Medium |
The key point: “transparent” can mean “already transparent,” “faded overall,” or “background erased.” The easy mix-up is between fading the whole image with Opacity and erasing only the background — those two use completely different features. Let’s take them in order.
🖼️ Use a transparent PNG (most reliable)
If you already have an image with a transparent background (a PNG or SVG with an alpha channel), just placing it in Figma keeps the transparency. Figma honors the image’s transparent pixels, so no special step is needed.
- Drag and drop the transparent PNG / SVG onto the canvas, or place it with
Shift+Ctrl/⌘+K. - The transparent areas stay transparent, showing whatever is behind them (lower layers or the canvas).
- If you want, put a color or shape behind it to check how the subject reads.
JPG has no transparency
If the background stays white and won’t go transparent, the image is most likely a JPG. JPG can’t store transparency (an alpha channel), so a white or black background is baked into the picture itself. To make it transparent, get a transparent PNG instead, or create the alpha with background removal (below).
For logos and icons where the source provides a transparent PNG, this is the most reliable route and keeps image quality stable.
🌫️ Make an image semi-transparent — Opacity
Sometimes “make the image transparent” really means fade the whole image (make it semi-transparent) — for laying an image behind text to keep it readable, or stacking it like a watermark. That’s not background removal; it’s Opacity.
- Layer opacity: Select the image and lower the Opacity value in the right panel. With the layer selected, press a number key to set it fast (
5for 50%,0for 100%, press0twice quickly for 0%). - Fill opacity: If the image is used as a fill, you can lower each fill’s opacity individually.
'Lowering opacity' is not 'removing the background'
Lowering opacity fades the subject and the background together. If you want the subject to stay crisp while only the background disappears, opacity won’t do it — you need background removal (next section). Decide up front whether you want to fade everything or erase only the background.
🪄 Removing the subject’s background needs a plugin
This is the goal for most people: keep the subject (a person, a product) and make the rest transparent. This kind of background removal can’t be done with Figma’s built-in features alone. Opacity only fades the whole thing, and masks or crops only cut to a shape you draw yourself — none of them detect a subject’s outline to erase the background automatically.
To get a background removed along the subject’s outline, you have two routes:
- Use a background-removal plugin. The Figma Community has several plugins that detect the subject with AI and make the background transparent (some are free). Select the image, run the plugin, and it replaces the image with a background-removed version. Handy when you want to stay inside Figma.
- Process it outside, then place it. Make a transparent PNG in Photoshop or an image-editing service, then place it in Figma. When edges and outlines matter, this route gives you finer control over the result.
Plugin vs. external processing
For a quick check or speed, a Figma background-removal plugin; when edge quality matters (print, hero images), process externally → place the transparent PNG. Either way, what ends up in Figma is a “background-removed image,” so once it’s placed you handle it exactly like the transparent PNG above.
⭕ Show only a shape with a mask
If you don’t want to erase the background so much as show the image only within a circle or custom shape (a round avatar, for instance), that’s a job for a mask, not background removal. A mask reveals the image only within the shape placed beneath it — it won’t auto-detect a subject, but it’s great for fitting an image to a set shape.
The step-by-step for masks and crops (rectangular trimming) lives in how to crop an image in Figma. If you just want to shape the background rather than erase it, start there.
Converts the transparent images and masks from your XD file into Figma's structure. Try the Free version on your own file to check the fidelity before you decide.
🔄 Image transparency and masks from an XD migration
Files migrated from Adobe XD need one extra layer of care around image transparency. Images you made transparent in XD — transparent PNGs, or designs where a shape mask hid the background — need to carry their transparency and mask structure over to Figma. If this is off, the background can reappear after migration, or a mask comes loose and the whole image shows.
- A transparent PNG stays transparent on Figma’s side as long as its alpha information is preserved through the migration.
- A shape mask (where a shape hid the background) needs to be rebuilt as a Figma mask group.
Note that Pixel Fine Converter is not a tool that auto-erases backgrounds — it converts the transparency and mask structure you already built in XD straight into Figma. By cutting down on rebuilding masks one image at a time, it helps prevent transparency from breaking during migration. For the overall migration workflow, see the XD → Figma migration playbook; for shape and path conversion specifics, see converting XD shapes to Figma.
💬 FAQ
Q: Can I make an image’s background transparent in Figma?
Not with Figma’s built-in tools alone — you can’t keep the subject and erase the background. Use a background-removal plugin, or make a transparent PNG externally and place it. If you already have a transparent PNG, just place it and it stays transparent.
Q: I placed a transparent PNG but the background is still white.
The image is probably a JPG. JPG can’t hold transparency, so the white background is baked into the picture. Get a transparent PNG instead, or create the transparent area with background removal.
Q: I just want to fade the image (make it semi-transparent).
That’s Opacity, not background removal. Select the image and lower Opacity in the right panel, or use a number key (5 for 50%, etc.). Note that the subject and background fade together.
Q: What’s a free way to keep the subject and remove the background?
Some Figma Community background-removal plugins are free. Select the image and run one, and the AI detects the subject and makes the background transparent. For finer edges, you can make a transparent PNG in external image editing instead.
Q: I want to crop to a circle or custom shape.
That’s a mask’s job. See how to crop an image in Figma for the steps. It shows the image within a shape rather than erasing the background.
Q: My XD image lost its transparency after migrating to Figma.
The XD transparent PNG or shape mask didn’t carry over correctly. Use a migration-focused converter that brings the transparency and mask structure across, or rebuild the masks after migrating.
🎯 Recap
The trick to “removing a background” in Figma is to first sort out which thing you actually want. The four takeaways:
| # | What you want | Feature |
|---|---|---|
| 1 | Already-transparent image | Place a transparent PNG (JPG won’t work) |
| 2 | Fade the whole image | Opacity (number keys) |
| 3 | Keep subject, erase background | Not built-in — background-removal plugin or external |
| 4 | Show within a shape | Mask (covered in a separate article) |
Fading everything? Opacity. Erasing only the background? A plugin. Keep that distinction in mind and removing a background in Figma stops being a guessing game. And if your file starts in Adobe XD, migrating with the transparency and mask structure intact is the most reliable way to avoid the background breaking.
One-click install from Figma Community
Related pages
- How to crop an image in Figma — detailed steps for crops and masks
- XD → Figma migration playbook — the full migration workflow
- Converting XD shapes to Figma — shape and path conversion details
- Converting XD shadows and effects to Figma — migrating image decoration