## Recommended Plugin **Icons8 Background Remover** is your best bet. It's free for unlimited basic use, handles soft shadows reasonably well, and runs entirely inside Figma. As a backup, **Remove BG** (remove.bg's official plugin) gives slightly cleaner edges on complex subjects but limits free users to 50 previews/month at full resolution (watermark-free lower-res is unlimited). ## Step-by-Step Instructions 1. Open your landing page file in Figma and locate the frame containing your 12 product photos. 2. Go to the top menu: **Resources** (or **Menu → Plugins → Manage plugins**) and search for "Icons8 Background Remover." 3. Click **Run** to install and launch it. 4. Select the first product image on the canvas. 5. In the plugin panel, click **Remove Background**. Processing takes 3–8 seconds per image. 6. The plugin replaces your selection with a transparent PNG in place—review the result. 7. Repeat for each of the 12 images. (Icons8 processes one at a time; batch selection isn't supported in the free tier.) 8. Drag each cut-out image onto your colored hero section and reposition as needed. 9. If a shadow was lost, re-add it via **Effects → Drop Shadow** in the right sidebar (try X:0, Y:8, Blur:16, 20% black). ## Tips & Troubleshooting - **Preserving soft shadows:** Icons8 often clips subtle shadows. For critical shots, try Remove BG instead—it has a "keep shadow" detection that's more forgiving—or manually re-create shadows in Figma afterward. - **Tricky edges (hair, fur, transparency):** Upscale the source image to at least 1500px on the longest side before running the plugin; AI models produce cleaner mattes on higher-res inputs. - **White-on-white subjects:** If edges look rough, duplicate the original, run the plugin on the copy, and mask-blend the two for smoother transitions. - **Free limits:** Icons8 is free but requires a (free) account after ~5 uses per session. Remove BG's free tier is 50 HD credits/month—save it for your most detailed shots. - **Cleanup:** Use Figma's **Crop** tool (double-click image → crop handles) to trim excess transparent padding before placing on the hero.
How to Remove Image Backgrounds Inside Figma with AI Plugins
Tested prompts for remove background from image in figma compared across 5 leading AI models.
BEST BY JUDGE SCORE
Claude Opus 4.7
8/10
Figma does not have a built-in background removal tool. If you are dropping a product photo, headshot, or logo into a Figma frame and need a clean cutout, you have to go outside the app, strip the background somewhere else, re-export the file, and re-import it. That context-switching kills momentum on a design sprint.
AI plugins solve this directly inside Figma. Tools like Remove.bg, Clipping Magic, and several others integrate into the plugin panel, process the selected image layer, and return a transparent PNG without you ever leaving the canvas. The whole operation takes roughly ten seconds on a clean photo.
This page covers how those plugins work, which scenarios they handle well, where they fall short, and how to get the best results the first time so you are not running the same image through a plugin twice.
When to use this
AI background removal inside Figma is the right move when you need quick, production-ready cutouts while actively working in a design file. It fits best when the subject has clear edges and contrasts reasonably well against the background, and when you want to stay inside one tool rather than jumping between Photoshop, a web app, and Figma.
- Placing product photos on e-commerce mockups where the white or studio background needs to disappear
- Dropping team headshots into a website or pitch deck template and needing consistent transparent portraits fast
- Prototyping an app UI that uses real photography and you need to test how subjects look over colored or gradient backgrounds
- Creating social media or ad templates where multiple images need cutouts applied in bulk across a single Figma page
- Quickly isolating a logo or brand asset from a screenshot when you have no access to the original vector file
When this format breaks down
- Fine hair, fur, or translucent fabric with complex edges will produce jagged or blobby masks that look unprofessional in final deliverables and need manual cleanup in Photoshop or Affinity Photo instead.
- If the subject and background share similar colors or tones, most AI plugins will eat parts of the subject along with the background. A blond subject against a beige wall is a common failure case.
- For print-resolution work at 300 DPI or higher, plugin-processed images often return a compressed or downscaled result that will look soft or pixelated when the file goes to a printer.
- When the image contains legally sensitive or confidential content, uploading it to a third-party plugin that sends data to an external API may violate your client's data agreement or company policy.
The prompt we tested
You are a Figma workflow expert who helps designers remove image backgrounds efficiently using AI plugins inside Figma. Follow these instructions: Respond in a structured format with three sections: 'Recommended Plugin', 'Step-by-Step Instructions' (numbered list, starting from opening the Figma file), and 'Tips & Troubleshooting' (3-5 bullet points). Keep the total response under 350 words and assume the user is working directly inside the Figma desktop or browser app. Here is the user's situation and image details: I'm designing a product landing page in Figma and have 12 product photos on white backgrounds that I need to cut out so I can place them over a colored hero section. Some photos have soft shadows I'd like to preserve, and I'd prefer a free plugin if possible since this is a personal project. Based on the input, recommend the best Figma plugin(s) for removing the background, provide clear step-by-step instructions for installing and using the plugin inside Figma, and include tips for handling tricky edges, hair, or transparent areas. Mention free vs. paid limits where relevant.
Model comparison
| Model | Quality | Cost | Latency | Tokens |
|---|---|---|---|---|
| Claude Opus 4.7 | 8 | $0.0654 | 16.4s | 373 / 798 |
| Claude Haiku 4.5 | 7 | $0.0029 | 6.2s | 261 / 518 |
| GPT-5.4 | 7 | $0.0088 | 11.6s | 227 / 552 |
| Gemini 2.5 Pro | 6 | $0.0028 | 20.7s | 233 / 493 |
| Grok 4.1 Fast Reasoning | 6 | $0.0002 | 13.0s | 375 / 330 |
Outputs
# Background Removal Workflow for Product Photos in Figma ## Recommended Plugin **Remove.bg** (Free tier available) This is the best choice for your use case. It's specifically designed for product photography and preserves soft shadows exceptionally well. Free tier allows 50 API calls/month, sufficient for 12 images. Premium ($9.99/month) offers unlimited removals if you need it for future projects. Alternative: **Cleanup.pictures** (also free-friendly) if Remove.bg hits limitations. --- ## Step-by-Step Instructions 1. **Open your Figma file** containing the 12 product images 2. **Install Remove.bg plugin:** - Click "Plugins" (top menu) → "Browse plugins" - Search "Remove.bg" → Select official plugin → "Install" 3. **Select your first product image** on the canvas 4. **Run the plugin:** - Plugins → Remove.bg → "Remove background" - Wait 3-5 seconds for processing 5. **Review the result:** - The plugin creates a new layer with transparent background - Soft shadows should be preserved automatically - Hide or delete the original image layer 6. **Batch process remaining 11 images:** - Repeat steps 3-5 for each product photo - Remove.bg processes sequentially without interruption 7. **Place cutouts over colored hero section** once all backgrounds are removed --- ## Tips & Troubleshooting - **Shadow preservation:** Remove.bg excels at keeping soft drop shadows intact—no manual cleanup needed for your use case. - **Free tier limits:** You have 50 free removals monthly. Since you need 12, you'll have 38 remaining for future updates. - **Hard edges on products:** If edges appear jagged, try exporting the Figma file as PNG, processing externally on remove.bg website for higher quality, then re-importing. - **Transparent halos:** Rare with products on white, but if visible, use Figma's eraser tool (E key) to manually refine transparent edges before placement. - **Batch efficiency:** Process all 12 images in one Figma session to avoid reaching monthly API limits across multiple sessions.
## Recommended Plugin **Best choice: Remove BG (via remove.bg)** - Best overall for quick, clean cutouts directly in Figma. - Usually gives strong results on product photos and often preserves soft shadows better than simpler masking tools. - **Free with limits**: free preview/low-res results are common; high-resolution exports or larger batches may require credits/payment. **Free-first alternative: Photopea plugin** - Useful if you want a more manual, fully free workflow inside Figma. - Better when you need to refine edges, transparency, or tricky details yourself. - Slower than Remove BG, but good for a personal project with 12 images if budget is the priority. --- ## Step-by-Step Instructions 1. **Open your Figma file** in the desktop app or browser. 2. Select one of your product photos on the canvas. 3. Open the plugin browser: - **Right-click** the image → **Plugins** - or use **Resources / Actions** and search for a plugin. 4. Search for **“Remove BG”** and install/run it. 5. With the image selected, run **Remove BG**. 6. Let the plugin process the image and generate the cutout. 7. Review the result on a colored frame/background to check for white fringing or lost shadow detail. 8. If the result looks good, repeat for the remaining 11 photos. 9. If a photo has edge issues, transparent packaging, or difficult shadows, try **Photopea**: - Install/run **Photopea** from Plugins. - Open the selected image in Photopea. - Use **Select Subject** or **Magic Cut/Quick Selection**, refine the mask, and keep soft shadow areas where possible. - Save/apply the edited result back into Figma. 10. Place the finished cutouts over your hero section and align them as needed. --- ## Tips & Troubleshooting - **Soft shadows:** Remove BG may keep them, but test each image on your hero color; if shadows disappear, use **Photopea** for manual masking. - **Hair/tricky edges:** Zoom in and check for halos; manual refinement in Photopea is usually better than one-click tools. - **Transparent or glossy objects:** Auto-removal can fail on glass/plastic; expect to manually adjust masks. - **White fringe on colored backgrounds:** Add a slight mask refinement in Photopea or scale the image down a touch to hide edge artifacts. - **Free vs paid:** For 12 photos, you may hit **Remove BG** resolution/credit limits; use it for the best quick results, then switch to **Photopea** for fully free cleanup.
Of course! Here is a guide to efficiently remove backgrounds from your product photos directly within Figma. ### Recommended Plugin **Remove BG** This is the official plugin from the popular remove.bg service. It's the best choice for your situation because it excels at creating clean, precise cutouts and is particularly skilled at identifying and preserving soft, natural shadows against white backgrounds. While it has a paid component, its free offering is perfect for testing and smaller projects. ### Step-by-Step Instructions 1. **Open your Figma file** containing the 12 product photos. 2. Navigate to the main menu or use the shortcut `Shift + I` to open the **Resources** panel. 3. Select the **Plugins** tab, search for "**Remove BG**," and click **Run**. 4. The plugin may ask you to sign up for a free account on the remove.bg website to get an API key. Paste this key into the plugin window in Figma. 5. **Select one or multiple images** on your canvas that you want to process. 6. With your image(s) selected, click the **Run** button inside the plugin window. 7. The plugin will automatically remove the background and create a new image layer without the background. You can now place this new, transparent image over your colored hero section. ### Tips & Troubleshooting * **Preserving Shadows:** `Remove BG` is excellent at retaining shadows cast on the white background. If a shadow is partially removed, you can add a subtle, feathered **Drop Shadow** effect in Figma's right-hand panel to enhance it. * **Batch Processing:** To work faster, select all 12 images at once before clicking "Run." The plugin will process them as a batch. Note that high-resolution exports beyond your first free credit will require purchasing a plan. * **Imperfect Edges:** For any minor imperfections around sharp corners or complex details, you can apply a layer mask to the new image in Figma and use the Pen or Brush tool to manually refine the edges. * **Free vs. Paid:** Your free account includes one high-resolution background removal. After that, you can either process unlimited images at a smaller preview resolution (often sufficient for web design) or purchase credits for more high-res cutouts.
### Recommended Plugin **Remove Background** by remove.bg (free tier: ~50 credits/month for personal use; preserves soft shadows via AI transparency; ideal for product photos on white BGs. Pro upgrade for unlimited/batch). ### Step-by-Step Instructions 1. Open your Figma file in the desktop or browser app and navigate to the frame with your 12 product photos. 2. Right-click empty space > Plugins > Browse plugins in Community. Search "Remove Background" > Install (takes ~10s). 3. Select one image layer (or multi-select up to ~5 for batch; repeat for all 12). 4. Right-click selection > Plugins > Remove Background. Plugin opens in sidebar; click "Remove" (AI processes in seconds). 5. Review preview (adjust edge feather if needed) > Apply. Mask auto-creates; image now has transparent BG ready for colored hero. 6. Duplicate/position cutouts; delete originals. Repeat for remaining photos. ### Tips & Troubleshooting - **Soft shadows/hair**: AI retains semi-transparency; use Figma's "Refine edge" in mask editor for tweaks. - **Tricky edges**: If fuzzy, rasterize layer first (Layer > Rasterize) or manually erase with eraser tool post-removal. - **Batch limits**: Free tier caps ~50 images/month; export extras via remove.bg site if exceeded. - **Transparency issues**: Ensure images are PNG; plugin outputs vector-friendly masks. - **Performance**: Works offline after first use; clear cache if plugin lags (Figma > Help > Clear cache). *(Total: 248 words)*
What makes these work
-
01Use PNG source files when possible
Starting with a PNG instead of a JPEG gives the plugin cleaner data to work with because JPEGs introduce compression artifacts around edges that confuse edge-detection models. If you only have a JPEG, run it at the highest quality export setting before bringing it into Figma. The output mask will be noticeably sharper.
-
02Match image resolution to your frame
Plugins process the image at the resolution it is stored in Figma. If you placed a 400px thumbnail but your frame is 1200px wide, the cutout will look soft when stretched. Always import source images at the size you actually need before running the background removal plugin.
-
03Use the plugin on a duplicate layer
Most Figma background removal plugins overwrite the selected fill in place. Duplicate the image layer before running the plugin so you keep the original. This takes two seconds and saves you from re-importing the source file if the cutout needs to be rerun with different settings or a different tool.
-
04Combine with Figma masks for fine control
When the AI cutout is close but not perfect, you do not have to reprocess the whole image. Place the returned transparent PNG inside a Figma vector mask and adjust the mask shape manually to correct problem areas like stray pixels along a collar or clipped hair. This is faster than running the plugin again.
More example scenarios
#01 · E-commerce product shot on a mockup
Input
A JPEG of a white sneaker photographed on a light grey studio backdrop. The designer has placed it inside a Figma mobile app mockup and needs the grey background gone so the shoe sits cleanly on a coral-colored product card component.
Expected output
The plugin returns a transparent PNG of the sneaker with clean edges along the rubber sole and mesh upper. The coral card background shows through correctly. Minor fringing is visible near the white lace tips but is acceptable for a prototype presentation.
#02 · Team headshot for a website section
Input
A professional headshot of a person in a dark blazer against a plain cream wall. The designer is building a team section in Figma and wants the portrait isolated so it can sit over a dark navy background panel.
Expected output
The plugin removes the cream wall cleanly and returns the subject with a transparent background. Hair edges along the top of the head are smooth. The collar and shoulder lines are accurate. The cutout drops into the navy panel without visible artifacts at normal viewing size.
#03 · App UI prototype with real photography
Input
A lifestyle photo of a coffee cup on a wooden table. The designer is building a food-ordering app prototype and wants only the cup isolated so it can float over a parallax background layer inside a Figma component.
Expected output
The coffee cup is extracted with the handle and steam wisps roughly preserved. The wooden table surface is removed. Some shadow underneath the cup base is retained, giving the object a grounded look on the new background layer, which works well for the prototype.
#04 · Pitch deck with a speaker photo
Input
A candid conference photo of a keynote speaker against a blurred auditorium crowd background. The designer needs the speaker isolated for a title slide in a Figma presentation deck with a white and blue brand color scheme.
Expected output
The blurred crowd background is removed. The speaker's outline is clean along shoulders and head. Some soft bokeh bleed near the jacket edges is slightly irregular but not distracting at slide scale. The transparent figure layers correctly over the blue brand gradient on the title frame.
#05 · Logo rescue from a screenshot
Input
A PNG screenshot of a partner company logo sitting on a white website header. No vector or original brand file is available. The designer needs the logo isolated to place it in a partner section of a Figma file with a dark background.
Expected output
The white header background is removed. The logo mark and wordmark are preserved. Because the original had white internal letterforms, the plugin retains them correctly as part of the subject. The result is a usable transparent logo suitable for dark-background placement in the Figma layout.
Common mistakes to avoid
-
Running the plugin on a low-res placed image
Designers often scale a small image up inside a Figma frame before running background removal. The plugin can only work with the pixels that exist. The result will have jagged edges and the cutout will look pixelated in the final design. Always check image resolution in the right panel before processing.
-
Not testing on a colored background
A cutout that looks clean on Figma's default white canvas can show white fringing or grey haloing when placed over a dark or colored background. After removing the background, immediately place the layer over a colored rectangle to inspect the edges before sharing the file with a client or team.
-
Assuming one plugin covers all image types
Different plugins use different underlying models and some perform better on people while others handle objects or flat graphics more accurately. If your first plugin produces a poor result on a specific image type, try a second plugin before spending time on manual fixes. The difference in output quality between tools on difficult images can be significant.
-
Forgetting to flatten or detach before handoff
Some Figma background removal plugins produce their output as a plugin-managed component or a linked asset rather than a plain image fill. When you hand off the file to a developer or another designer who does not have the plugin installed, those layers can appear broken or empty. Rasterize or detach the result to a standard image fill before sharing the file.
Related queries
Frequently asked questions
What is the best Figma plugin to remove image backgrounds?
Remove.bg is the most widely used option because it handles people and products accurately and integrates directly into the Figma plugin panel. Unscreen and AI Image Cutout are solid alternatives. For bulk processing or complex edges, running images through a dedicated tool like Adobe Express or Photoshop's Remove Background before importing into Figma often produces better results than any in-app plugin.
Is background removal in Figma free?
Most Figma background removal plugins offer a limited number of free credits per month and then require a paid subscription or per-image pricing. Remove.bg, for example, gives free previews at low resolution but charges for full-resolution exports. Check the plugin's pricing page before committing to it for a client project.
Can Figma remove backgrounds natively without a plugin?
No. As of 2024, Figma does not have a built-in background removal feature. You must use a third-party plugin from the Figma Community, or remove the background in an external tool and reimport the resulting PNG. There is no native magic eraser or cutout tool in the Figma editor.
Why does the background removal look bad on hair or fine details?
AI edge detection models struggle with semi-transparent or highly detailed edges like hair, fur, or motion blur because those pixels blend with the background rather than forming a clean boundary. For those cases, use Photoshop's Select Subject plus Refine Edge workflow, or a dedicated tool like Topaz Gigapixel, and then bring the clean cutout into Figma.
Does removing a background in Figma affect the original image file?
No. Figma stores images as fills inside a frame or shape. When a plugin removes the background and replaces the fill with a transparent PNG, the original image file on your computer is untouched. The change only exists inside the Figma document unless you manually export the new layer.
How do I keep the removed background result editable in Figma?
After the plugin returns the transparent PNG, it is stored as a standard image fill on that layer. You can place it inside a vector mask, adjust opacity, add effects, or recolor it using Figma's blend modes just like any other image layer. There is nothing special to unlock. Treat it as a normal PNG fill from that point forward.