How to Remove a Background in Figma — 4 Routes: Built-in, Plugin & External
“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 — has a built-in feature: Figma AI’s Remove background (though the plan requirement the docs state is a paid plan, and it spends AI credits)12. This guide separates the three cases, walks through each, and shows when to use the built-in feature, a plugin, or external processing. It closes with what to watch for when your file comes from an Adobe XD migration.
Up front: sort your goal into one of three
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 Figma AI’s Remove background (paid plans per the docs, spends AI credits) or a background-removal plugin / external processing. Sorting your goal into one of these three is the fastest route.
🔴 Updated 2026-08-20: Figma now removes backgrounds natively
This article originally said Figma had no built-in feature for detecting a subject and erasing the background. That no longer describes current Figma. The official docs list Remove background as a Figma AI feature: select an image and click Remove background in the secondary toolbar. You can select more than one image at a time1.
There are conditions, though. That same page states the requirement as a paid plan with edit access, and running it spends AI credits1. ⚠️ Meanwhile the AI credits page says credits are included with every seat on every plan (Starter gets 500 a month, capped at 150 a day)2 — so the docs alone don’t settle whether it works on a free plan. Select an image and see whether Remove background appears in your toolbar. If it doesn’t, the plugin and external routes below still apply.
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 | Figma AI Remove background / plugin / external | Built-in (paid plans per the docs, spends credits) |
| Show only a shape’s area | Mask (covered below) | Medium |
| Play the background down without erasing it | Layer blur / Background blur (covered below) | Easy — with one common snag |
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. How it sits in the layer is adjustable from the Fill swatch in the right sidebar — the official docs list four Fill modes: Fill / Fit / Crop / Tile3. If a transparent image looks unexpectedly stretched, check there first.
- 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 — 4 routes (built-in, plugin, external)
This is the goal for most people: keep the subject (a person, a product) and make the rest transparent. Opacity only fades the whole thing, and masks or crops only cut to a shape you draw yourself, so neither will do it — you need something that detects the subject’s outline.
You now have four routes:
- Use Figma AI’s Remove background (built-in). Select one or more images and click
Remove backgroundin the secondary toolbar1. In FigJam it’sAI tools > Remove background; in Figma Buzz,Edit > Remove background. The plan requirement the docs state is a paid plan with edit access, and it spends AI credits12. - Use Figma AI’s Select area to lift the subject out (built-in). Instead of erasing the background, you can extract just the part you want: drag the lasso around the object, then click
Isolate, and that area becomes a new image layer1. Useful as the manual route when automatic detection doesn’t cooperate. - 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. This is the route when you’d rather not spend AI credits, or when the built-in feature isn’t available on your plan.
- 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.
Built-in vs. plugin vs. external processing
If it’s available on your plan, the built-in Remove background is the shortest path. For a quick check when you’d rather not spend credits — or when the built-in option doesn’t show up — reach for 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. See how to mask in Figma for the full walkthrough of mask types.
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.
🌁 Blur the background instead of erasing it
If the goal is not transparency but simply playing the background down, blurring is often faster than erasing. Think of text sitting over a photo, or a panel that softens whatever is behind it.
The first snag here is that Figma has two different blurs, and they are easy to mix up.
- Layer blur blurs the selected layer itself. Use this when you want the image to look blurry.
- Background blur blurs whatever sits behind the layer. Use this for a translucent panel that frosts the content underneath.
Add either one from the + in the Effects section of the right sidebar.
| What you want | Effect |
|---|---|
| Make the image itself blurry | Layer blur |
| Frost what sits behind a panel | Background blur |
| Ramp the blur in one direction, e.g. toward the bottom edge | Progressive (below) |
🔴 Background blur doing nothing? Check the fill opacity
“I added a background blur and nothing happened” is the single most common way to get stuck here. The official docs state that to see a background blur you need the layer’s fill opacity set between 0.10% and 99.99%4. With the fill at a full 100%, the layer hides everything behind it, so there is nothing left for the blur to show. Knock the panel’s fill back a little, then look again.
Uniform vs. Progressive. When you add a blur, you can choose Uniform or Progressive. Uniform applies evenly across the layer; Progressive lets you control the blur’s size, direction and intensity, and where it starts and ends4. A photo that fades into blur toward its bottom edge so text stays readable is a Progressive job.
One of each blur per layer
The documented limits allow one layer blur and one background blur per layer4 (drop shadows and inner shadows go up to eight each). To combine blurs of different strengths, split them across layers or use Progressive to vary the falloff.
To blur only part of an image, pair a blur with a mask: duplicate the image, mask the copy down to the area you want, and apply a layer blur to that layer. Masking itself is covered in How to mask in Figma.
🔄 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. If you are still mapping out the migration, the step-by-step XD → Figma migration guide sets the order up front, which makes it clear at which stage you head off broken transparency. For shape and path conversion specifics, see converting XD shapes to Figma.
💬 FAQ
Q: Can I make an image’s background transparent in Figma?
Yes. Figma AI’s Remove background is built in — select an image and click it in the secondary toolbar1. The plan requirement the docs state is a paid plan, and running it spends AI credits12. If it doesn’t appear in your toolbar, 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. ⚠️ The built-in Remove background spends AI credits, and the plan requirement stated on the official page is a paid plan1.
Q: I added a background blur and nothing changed.
The layer’s fill opacity is most likely still at 100%. The official docs require a fill opacity between 0.10% and 99.99% for a background blur to be visible4. A fully opaque fill hides everything behind it, leaving the blur nothing to act on. Knock the fill back slightly and check again.
Q: I only want to blur part of an image.
A blur alone can’t do that — pair it with a mask. Duplicate the image, mask the copy down to the area you want blurred, then apply a layer blur to that layer. The masking steps are in How to mask in Figma.
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 | Figma AI Remove background (paid plans per the docs, spends credits) / plugin / external |
| 4 | Show within a shape | Mask (covered in a separate article) |
Fading everything? Opacity. Erasing only the background? Figma AI’s Remove background, or 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
Everything in this article about how Figma behaves is sourced to Figma’s official documentation, cited below. Everything about how Pixel Fine Converter converts transparency and masks is first-hand: it comes from our own source code and hands-on testing.
Sources
-
Make or edit an image with AI — Figma AI covering image generation, background removal, resolution boosting and expansion; the Remove background steps (select the image, then the secondary toolbar /
AI tools > Remove backgroundin FigJam /Edit > Remove backgroundin Buzz) and multi-image selection; Select area’s lasso-then-Isolate producing a new image layer; and the stated requirement of a paid plan with edit access plus AI credit consumption (checked 2026-08-20) ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 -
How AI credits work — AI credits being included with every seat on every plan, Starter’s 500 per month with a 150 daily cap, and credits resetting monthly without rolling over or transferring (checked 2026-08-20) ↩ ↩2 ↩3 ↩4
-
Adjust the properties of an image — reaching image properties via the Fill or Stroke swatch, and the four Fill modes (Fill / Fit / Crop / Tile) (checked 2026-08-20) ↩
-
Apply effects to layers — the effect types, the per-layer limits (eight drop shadows, eight inner shadows, one layer blur, one background blur), the requirement that a layer’s fill opacity sit between 0.10% and 99.99% for a background blur to be visible, and the Uniform / Progressive blur variants, where Progressive controls the blur’s size, direction and intensity and where it starts and ends (checked 2026-08-28) ↩ ↩2 ↩3 ↩4
Related pages
- How to crop an image in Figma — detailed steps for crops and masks
- The step-by-step XD → Figma migration guide — the full migration workflow
- Converting XD shapes to Figma — shape and path conversion details
- Converting XD shadows and effects to Figma — migrating image decoration