4 Ways to Remove Background in Figma

Introduction

Removing backgrounds from images is a fundamental skill for any designer working in Figma. Whether you're creating mockups, designing product displays, or preparing assets for development, knowing how to isolate subjects from their backgrounds efficiently can dramatically improve your workflow. Figma offers multiple approaches to background removal, each suited to different scenarios and complexity levels.

Understanding when to use each method is key to working efficiently. Simple, solid-color backgrounds might only require a quick selection, while complex edges and intricate subjects often need the precision of the Pen Tool or the convenience of dedicated plugins. By mastering all four approaches, you'll be equipped to handle virtually any background removal challenge that comes your way.

LogRocket's comprehensive guide to Figma background removal provides detailed insights into optimizing your design workflow.

Method 1: Using the Pen Tool for Precise Selection

The Pen Tool in Figma provides the most control when removing backgrounds, making it ideal for complex images with intricate edges. This manual approach allows you to trace around your subject with pixel-perfect accuracy, ensuring clean cutouts even for hair, fur, or detailed product photographs.

When to Use the Pen Tool

The Pen Tool excels in situations where automated methods struggle. Use it when you're working with subjects that have fine details like wispy hair, intricate patterns, or complex silhouettes that automatic selection tools might miss. It's also the preferred method when precision is paramount, such as when preparing product images for e-commerce where clean edges directly impact perceived professionalism.

While the Pen Tool requires more time investment than automated alternatives, the results justify the effort for high-stakes visuals. Many professional designers use this method as their go-to for hero images for landing pages, marketing materials, and any asset where imperfect edges would be immediately noticeable.

Step-by-Step Pen Tool Workflow

Begin by importing your image into Figma and selecting it with the Move Tool. Switch to the Pen Tool from the toolbar or press P on your keyboard. Start tracing along the edge of your subject, clicking to create anchor points that follow the contour. For curved sections, click and drag to create Bezier curves that smoothly follow the shape.

Work your way around the entire subject, placing anchor points strategically at corners and curves. The density of your points affects both precision and ease of editing--more points allow for detailed tracing but can make modifications more complex. Once you've closed the path, right-click and choose "Create Outline" to convert your selection into a vector shape.

Tips for Better Pen Tool Results

Zoom in significantly when working on detailed areas to ensure your points align precisely with the edge. Take your time on transition zones where background meets subject, as these areas often determine whether the final result looks professional or amateurish. For challenging sections like hair or fur, you may need to create multiple smaller paths that follow individual strands rather than attempting to trace the entire mass as one shape.

LogRocket's Pen Tool techniques demonstrate how to achieve professional results with practice and patience.

Method 2: Rectangle Select for Simple Backgrounds

When your image features a solid-color background or a background that contrasts sharply with your subject, Figma's Rectangle Select Tool offers a remarkably fast solution. This method works best when background and subject colors don't intermingle, making clean separation straightforward.

Ideal Scenarios for Rectangle Selection

Rectangle selection shines in product photography with plain white or colored backgrounds, headshots against solid backdrops, and graphics with clear geometric boundaries. It's also excellent for removing simple rectangular elements like borders or frames within larger images. The speed of this method makes it invaluable when you need to process many images quickly for e-commerce product displays.

However, this method has limitations. Any background color that appears within or touches your subject will be incorrectly removed or retained. Shadows, gradients, and subjects with complex silhouettes are generally poor candidates for this approach.

Executing Rectangle Selection

Select the Rectangle Select Tool from the toolbar or press R. Draw a selection that encompasses the background while excluding your subject. You may need to make multiple selections to capture all background areas--Figma's ability to add to selections using Shift+click or subtract from them using Option/Alt+click provides flexibility.

Once your background is selected, press Delete or Backspace to remove it. Depending on your image, you might need to fill the resulting gap with a new background color or leave it transparent. For transparent PNG export, ensure no background remains and that your subject has clean edges where it was previously touching the selection boundary.

LogRocket's Rectangle Select guide shows how this technique can dramatically speed up your design process when applied to appropriate images.

Method 3: AI-Powered Background Removal Plugins

Figma's plugin ecosystem offers several powerful solutions for automated background removal, with Icons8 Background Remover emerging as a standout free option. These tools leverage artificial intelligence to analyze images and separate subjects from backgrounds in seconds, dramatically reducing the time investment required compared to manual methods.

Icons8 Background Remover

Icons8 Background Remover has gained popularity as the leading free option for Figma background removal. The plugin uses machine learning to intelligently detect subject boundaries and remove backgrounds with impressive accuracy. Unlike some alternatives that require API keys or account setup, Icons8 works immediately after installation.

The plugin handles a wide range of image types, from product photographs to portraits, with results that often rival manual selection in quality. Its speed makes it particularly valuable for batch processing multiple images or quickly prototyping designs without getting bogged down in detail work.

Remove BG Plugin

Remove BG offers another plugin option, though it operates differently from Icons8. This tool connects to the remove.bg API and requires an account with API credits to function. While the integration provides consistent results, the requirement for paid API access makes it less accessible for casual users or those processing limited numbers of images.

The quality from Remove BG is generally excellent, particularly for product photography and straightforward portraits. If you're already using remove.bg for other workflows or have an account with credits available, the Figma plugin provides a convenient extension of that toolset into your design environment.

Toolfolio's Icons8 tutorial provides additional insights into maximizing plugin efficiency for various image types.

Method 4: Working with Images That Already Have Transparency

Some images you work with in Figma may already include transparency information, either from PNG files with alpha channels or from images prepared in other software. Understanding how to leverage and maintain this existing transparency is essential for efficient workflows.

Identifying Images with Transparency

When you import an image into Figma, transparency is preserved if it exists in the source file. PNG files with transparent areas will display those areas as transparent in Figma. You can verify transparency by selecting the image and checking layer properties or by viewing it against a contrasting background.

If you're sourcing images from photography sessions or other design software, consider whether transparency is already present before attempting to remove a background. Saving work by maintaining existing transparency prevents redundant effort and preserves any quality that might be lost through additional processing.

Exporting with Transparency

When exporting images from Figma for web or app use, transparency preservation is often critical. PNG formats naturally support transparency, while JPG does not. Configure your export settings to ensure transparency is maintained through the export process.

For transparent images destined for web use, consider the file size implications. Large PNG files with transparency can impact page load times. Optimization tools can reduce file sizes while maintaining visual quality, though some compression may affect edge smoothness in transparent regions. When preparing assets for responsive web design, consider exporting at multiple sizes to balance quality and performance.

Choosing the Right Method for Your Project

Selecting the appropriate background removal method depends on several factors including image complexity, quantity of images, required quality, and available time. Understanding these factors helps you work more efficiently without sacrificing results.

For single high-impact images where quality is paramount, the Pen Tool provides the control needed for perfect results. When processing large batches of similar images, plugins offer speed that makes comprehensive edits feasible within project timelines. Simple images with clear subject-background separation benefit from quick selection methods that require minimal tool switching.

Professional workflows often combine these methods, using plugins for initial removal and the Pen Tool for refinement where needed. This hybrid approach maximizes both efficiency and quality, applying effort where it makes the most difference to final results.

Common Challenges and Solutions

Background removal frequently encounters specific challenges that require targeted solutions:

• Hair and fur: Fine strands require manual Pen Tool selection. Some AI plugins offer specialized portrait modes, but manual refinement often produces the cleanest results.
• Shadows and gradients: Decide upfront whether to preserve or remove. Making an intentional decision before beginning helps maintain consistency throughout your project.
• Low-resolution images: Consider sourcing higher-quality alternatives when possible, as detail that doesn't exist in the source can't be recovered through any selection technique.

Best Practices for Consistent Results

Develop consistent background removal practices to improve both quality and efficiency. Establish a standard workflow for your most common use cases, selecting preferred methods and tools for each scenario. Quality check before final export to catch edge issues that preview might miss.

Maintain original images alongside processed versions when possible. Originals provide backup if adjustments are needed later and enable reprocessing if improved tools become available. This practice is particularly valuable when building design systems where assets may need updates over time.

LogRocket's workflow tips emphasize the importance of developing systematic approaches that balance quality with efficiency.

Sources

1. LogRocket Blog: 4 ways to remove a background in Figma - Comprehensive guide covering pen tool, rectangle select, and plugins
2. Toolfolio: How to Remove Image Background in Figma - Icons8 plugin tutorial and alternative methods