Can You the Remove the Background in Figma?
Yes, just like how you can crop an photo with custom shapes, you can completely remove the background of an image.
It’s possible to remove the background of an image in Figma. One important factor to note when removing a back from image that’s true not just in Figma but other programs is that the image matters.
This technique will work best if the subject you want to remove from the image is in focus and has sharp, clear lines. When I say sharp I mean nothing is blurry, fuzzy or has very fine details like hair.
Below is a guide on how to remove the background and also the best practices to use so you can become more proficient at doing this for any image. This does take some time and a bit of practice but is a invaluable skill to have and will transfer over to other design aspects.
Mastering the Pen tool would allow you to draw new objects as well, like what I dd in creating custom arrow shapes.
Complete Guide on How to Remove the Background From an Image
Import and Setup the Image
First import your image and drop the opacity down on it by click on the 100% number in the image Fill section. I set mine to 25%. The goal here is to have it just bright enough to sure the edges in image and also be able to see the lines you are creating with the Pen tool.
If you are using a dark theme setup then create a solid white shape the size of the image and place it in back.
Select the Pen Tool
We are going to use the Pen tool to trace around the object we want to remove the background from, in this case a person.
You first want to zoom in really close to image. Whatever allows you to see the edges most clearly.
Now hit ( P ) for the Pen tool or click the pen icon at the top.
Start at the Bottom of the Image
Starting at the bottom of the image with the first point. Make the next point where the either the curve ends or gets intersected by something else. For me it’s the shirt wrinkle. Drag out the handle until you match the edge as best as possible, you can always come back to edit it so don’t worry if it’s not perfect.
This is what will take practice to get the hang of, where to placing points/nodes. Sometimes it’s obvious like the end of crease roll of a shirt but other times you may need to place multiple points within a curve. You want to avoid adding unnecessary points.
IMPORTANT TIP – The Corner Node
This tip will make your life so much easier when tracing shapes and avoid unwanted curving in your next point. Before you have let go of the click and after you have matched the edge hold down ( Alt ) and bring the handle of the point back to it’s node, then unclick. Doing this will prevent the next node from making a curve you don’t want to have in most cases, like a hard corner.
I’m calling this a ‘corner node’ and it’s used constantly in this image.
You can avoid doing this by placing nodes and not curving them at all, you will come back edit them once you have traced the shape roughly. I show how to do this below.
Trace Around the Image Completely
Because you are so zoomed in you will need to move the viewing field around as you progress tracing. To do this just hit the ( Space ) bar and click and drag where you want to focus on.
Trace around completely until you have come back to the first point and closed the vector path.
How to Edit the Traced Vector
This will apply to any section you are not happy with or if you did a rough trace.
First make sure you have selected the vector you have drawn.
Go to the top bar and select Edit Object on the left.
While you have the move selected ( happens automatically ) hit and hold ( Ctrl ) to switch to the Bend tool.
This will allow you to bend the paths between the nodes however you want and adjust the node handles. Also if you let go of ( Ctrl ) you can move any of the actual nodes if you like.
Once you are happy with the edits just hit ( Enter ) on the keyboard or the Done button in the right hand corner.
Fill Vector and Create Mask
Click on the completed vector and select a fill color for it. Send it to the back by hitting ( [ ) or manually moving it in the layer stack.
If you have the white background object, delete that.
Select the image and the drawn vector together and click on the mask icon at the top ( looks like a quarter moon ) or ( Ctrl Alt M ) for the shortcut.
You now have the background completely cropped out and ready to be placed anywhere within your design.
Conclusion
That’s it! Hopefully you have now learned how to remove the background from an image using only Figma and no plugins. It will take time at first but once you get the hang of it, you will be able to remove any background in no time. More importantly you now have these skills that will translate to other programs like Photoshop or Inkscape which is completely free to use.
Please comment below to let me know if you have any questions or suggestions on other topics you would like covered.
Thank you for reading!
