How to Make a Background Transparent in Figma (2026 Guide)

Figma is built for interface design, not photo editing, so "remove the background" means something different there than it does in a photo tool. If you just need your frame or artboard background to disappear on export, Figma can do that natively. But if you have a photo with a busy background - a product shot, a headshot, a placed image - Figma has no built-in way to detect the subject and cut it out; you either need a plugin, a lot of patience with the Pen tool, or a dedicated background remover before the image ever reaches your file.

Why transparent backgrounds matter in Figma projects

Transparent PNGs let you layer a logo, product photo, or icon over any color, screenshot mockup, or gradient without a visible box around it. That matters for UI kits, marketing decks, app store screenshots, and any design system where the same asset needs to sit on multiple backgrounds.

Method 1: Export a frame with a transparent background

Step 1: Select your frame, group, or component in Figma.

Step 2: In the right-hand panel, remove or hide the frame's background fill (click the fill swatch and delete it, or toggle its visibility off).

Step 3: Open the Export section at the bottom of the right panel, choose PNG, and export. PNG supports alpha transparency, so anywhere the background fill was removed will export as transparent instead of white.

This works well for logos, icons, and UI mockups where the "background" is just a fill color you added in Figma, not a photographed scene.

Method 2: Removing the background from a placed photo

If the transparent-background need is a photo - a product shot, a portrait, a screenshot of a physical object - Figma's export settings can't help, because the background isn't a Figma fill, it's part of the pixels in the image itself. Inside Figma, your realistic options are a community plugin that calls an external API, or manually masking the subject with the Pen tool, which is slow and rarely produces clean edges around hair, fur, or fine detail.

The faster path: remove it before you import

The simplest workflow for most designers is to remove the background from the photo first, then drag the resulting transparent PNG straight into Figma. Upload the image to nobackground, let the on-device AI cut out the subject in a few seconds, download the PNG, and place it on your canvas - no plugin permissions, no account, and no image ever leaves your browser in the process.

Tips for clean transparent exports

• Export at 2x or 3x scale for anything that will be used on a high-density display, then downscale if needed - this avoids soft, blurry edges around the cutout.
• Preview transparent PNGs against a checkerboard or a dark background before handing them off, since a light gray edge halo is easy to miss on a plain white canvas.
• If you're placing the same cutout on multiple mockups, keep the original transparent PNG as a shared asset in your Figma library instead of re-exporting it from each frame.

Figma transparency questions

Does Figma have a built-in background remover? No. Figma can export frames or shapes with a transparent fill, but it can't automatically detect and cut out a subject from a photo without a plugin or an external tool.

Will a transparent PNG from nobackground work directly in Figma? Yes. Just drag and drop the downloaded PNG onto your canvas like any other image asset; the transparency is preserved.

Why your Figma export still has a white background

This is the most common Figma transparency problem, and it almost always comes down to one of four causes. First, the frame still has a fill: hiding a fill with the eye icon in some older files leaves it in the export, so delete the fill rather than toggling it. Second, you exported JPG instead of PNG; JPG has no alpha channel and will flatten transparency to white every single time. Third, there is a second frame or a white rectangle behind your content that you forgot about, which is easy to miss inside a deeply nested Auto Layout. Fourth, the image itself has a white background baked into its pixels, in which case nothing in Figma's export panel will help, because Figma is faithfully exporting exactly what is there.

A fast way to diagnose this is to temporarily set the page canvas colour to a bright magenta. Anything that is genuinely transparent will show magenta; anything that is white will stay white and immediately reveals itself.

Image fills versus placed images

Figma treats a photo as a fill on a shape rather than as a separate object, which surprises people coming from Photoshop. That distinction matters here: because the photo is a fill, you cannot erase part of it, and the Pen tool does not cut into it. What you can do is draw a vector shape and use it as a mask, which clips the fill to that shape. This works well for geometric cutouts such as a rounded product card, and badly for organic outlines such as a person, because you are hand-drawing every curve of the silhouette.

If your subject has hair, fur, feathered edges, or any semi-transparent region, a vector mask is structurally the wrong tool. A vector path is a hard boundary; hair needs partial alpha, meaning pixels that are 40% opaque. That is why the practical answer is to bring in an image that already has an alpha channel rather than trying to create one inside Figma.

Keeping cutouts crisp in components and variants

Once a transparent PNG becomes part of a component, a few habits save a lot of rework. Place the image inside its own frame with the fill set to transparent, so the component can be resized without the image fill re-cropping unexpectedly. Prefer Fit over Fill for cutouts, because Fill crops to the frame and will happily slice off the top of a head when someone resizes an instance. If the same cutout appears at several sizes across a design system, publish it once as a component and use instances, rather than pasting the PNG repeatedly; a single re-export then updates every screen at once.

Export settings that quietly break transparency

Beyond the JPG trap, three settings cause avoidable problems. Exporting at 1x for a retina mockup produces soft edges that look like a bad cutout when they are really just an under-scaled export, so use 2x or 3x for anything that will be viewed on a high-density display. Applying a background blur or a layer blur to a frame forces Figma to rasterise a larger area and can introduce a faint rectangular boundary in the exported PNG. And a drop shadow applied at the frame level rather than the object level will render as a shadow of the rectangle, not of the cutout silhouette, which is an instant giveaway that the asset was assembled rather than photographed.

PNG, SVG, and WebP for handoff

For a photographic cutout, PNG is the correct export in nearly every case: it is the only widely supported raster format that preserves per-pixel alpha without compatibility questions. SVG is only appropriate if the artwork is genuinely vector, such as a logo drawn with shapes; exporting a photo as SVG simply embeds the raster data inside an SVG wrapper and makes the file larger for no benefit. WebP produces meaningfully smaller files with transparency intact and is a good choice for production web assets, but hand off PNG to teammates and keep the WebP conversion as a build step, since some design and print tools still handle WebP inconsistently.

File weight and shared libraries

Transparent PNGs are larger than the equivalent JPG because the alpha channel adds data and PNG compression is lossless. In a large Figma file with dozens of full-resolution cutouts, this shows up as slow file loading for the whole team. The practical fix is to keep one high-resolution master of each cutout outside the working file and place a reasonably sized version, roughly twice the largest display size you need, inside Figma. You keep the quality where it matters and stop paying for it on every file open.