Do you want to remove a background in Figma? This is a simple guide on how to remove 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.
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.
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 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.
For complex images, you need to mask the foreground and delete the background. Removing the background only works on simple images (which have a clean background). I’ll explain below.
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 image 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 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 background layer then press the Delete button on 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.