Do you want to remove a background in Figma? This is a simple guide on how to remove the background from an image step by step in Figma.
It includes two different methods. In Figma, the background can be removed using two different methods. One way is to install a plugin called “Remove Bg” and another is to use masking.
Both methods have their own advantages and disadvantages.
We will show you both methods in this post. Please follow along.
Removing the background can help to reduce visual clutter and distractions, enabling the viewer to focus on the essential elements of the design. By creating a clean and unobtrusive canvas, the designer can highlight the key aspects of the design and create a more impactful visual experience.
See More: How to Make Circular Text in Figma
The Ultimate Figma UI kit & Design System
Untitled UI is the largest Figma UI kit and design system in the world. Kickstart any project, save thousands of hours, and level up as a designer.
How To Delete Background In Figma
As i mentioned early, You can remove or cut out the background using two different methods.
Eliminating the background is crucial for achieving minimal and contemporary designs. To create transparent backgrounds, web designers opt for .png files, which enhance the overall aesthetic and coherence of the designs.
If you want a quick and easy way, then go with the plugin method. However, the quality of the output will be affected. For higher-quality background removal you need to subscribe to a pro plan.
The next method is free and the quality of the output will not be affected. By using masking we can remove a background from an image. This takes time, though.
How To Remove Background Using a Plugin
Step 1: Install Remove Bg Plugin
The first step is to install a free plugin called Remove Bg. Which allows you to remove the background instantly and seamlessly.
The web version of Remove Bg is also available. It detects and removes the background quickly.
Visit this link to install the plugin or search the community to find it.
Step 2: Set API Key
After installing the plugin, open your image in Figma.
Remove Bg requires an API key integration for background removal. For this
Right-click on the image and head over to plugins from there select Remove BG and Set API Key.
You’ll see a box with information, follow those instructions and set your API key.
The process is one-time only, you can continue using this plugin with this free API key.
Step 3: Run the Plugin
The next step after saving the API key is to run the plugin.
Right-click on the image and choose Plugins > Remove BG
Done. It will take some time to remove the background from your image, depending on its size. However, the end result will be great.
Without selection or masking the background of your image has now been removed.
You need to mask the foreground and delete the background for complex images. Removing the background only works on simple images (which have a clean background). I’ll explain below.
Figma Remove A Background By Masking
Remove BG is not helpful in all cases, When the images don’t have a clean background we need to mask the image using the shape tool or pen tool. It requires some effort and patience.
#1: Open the Image
Firstly, Open Figma and create a new file by clicking create a new design.
Import your image by clicking file > place image or simply drag and drop your photo to Figma.
#2: Using Pen Tool
Choose the pen tool from the toolbar. You can also make it with the Shape tool.
Then trace your foreground using the pen tool. For beginners, the pen tool may look challenging. Watch Youtube videos on the Pen tool. It is basically the same as Photoshop and Illustrator. Once you get the hang of it, it’s very easy.
After selecting the foreground layer, tap on Fill on the right-side panel (above the Stroke).
Then a color will be applied to the selected layer. Additionally, a new vector layer will be automatically created in the layers panel.
#3: Use as Mask
Once you have created the vector layer, move your vector layer under the image layer. Then select both layers using the move tool.
Choose Use as Mask from the menu. It will be displayed in the middle of the top bar.
Now your background layer has been separated. The only thing left is to delete the background layer.
For deleting the background layer, select the background layer then press the Delete button on the Keyboard.
That’s it, The background is removed and the transparent layer is free to use.
Furthermore, there’s an option to save this layer as PNG, SVG, JPG, and PDF. It’s a very useful feature of Figma.
You can do so by selecting all the layers, then tapping on the Export button at the bottom right. After selecting your desired file format, click Export mask group.
How Do I Make An Image Transparent In Figma?
You can make any image transparent by using the plugin Remove BG. It is a free plugin for Figma. Alternatively, the background can be removed using masking and deleting the background layer.
Overall, the use of transparent backgrounds through the .png file format is an important tool in the arsenal of modern web designers.
By carefully selecting and removing the background, designers can create clean, minimal, and aesthetically pleasing designs that capture the essence of their brand or message.