How to remove image backgrounds in Figma (100% local AI) using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically remove backgrounds from any images in your Figma layers using the TinyImage Figma plugin. To get started, all we need to do is go to our Figma file, then go down to the actions icon down at the bottom here. If you click on that and search for TinyImage, under the Figma plugins tab, if you click on the TinyImage item, you can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon next to that. That’ll let you run the Figma plugin from your Figma plugins list. I’ve already clicked on that save icon, so I’m just going to go back to my Figma canvas and right-click anywhere. Then go down to plugins and go down to saved plugins. Then go down to TinyImage and click on open TinyImage. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, it has a bunch of different features, including compressing images and exporting those from Figma, creating GIFs and PDFs, and other features as well. But today, we’re just going to be focusing on this editor tab. If you go to your Figma plugin header and just click on editor, that’ll switch into this photo editor or image editor mode, and that’s going to be where we remove the backgrounds from these few sample images. All you need to do is select the image layer in your Figma file that has a background you want to remove, or you can upload an image from your computer. If you click on open image from computer, you can actually browse for an image on your desktop or computer instead. But today I’ve just got all three of my images in Figma. I’m just going to click on this image here and then click on use selected Figma layer. That is going to load in the image into the TinyImage editor here.

Again, I’m not going to be covering all these other editor features here. I covered those in a different tutorial if you’re interested. Today, we’re just going to be going all the way down to the bottom left here under the local AI option. If you click on that local AI option in the navigation menu on the left here, you can see that we’ve basically got an option for removing backgrounds. What you want to do is click on the remove background tab over here. This is going to remove the background locally. It’s 100% local on your computer. It’s not getting uploaded anywhere. It’s going to use a small local AI model to automatically detect the background and remove that to make it transparent. You can do this with one click. All you need to do is click on the remove background button here. I’m going to click on that. Now, you can see that it is downloading the model. It’s a very small model, about 99 megabytes all up. Once that finishes loading one time, it’s going to then use the background removal process to determine the foreground and split that up from the background and remove it. It’s just doing that now, and you can see that it’s done. It’s basically removed the background part of the image, and you can see it’s cut out all of the detail of the foreground. We can see that in our preview here.

Now that we’ve done that, we’ve basically got a few options to either insert this into Figma or replace the existing Figma fill, or we can actually download it as a PNG as well. The first option is just to click on insert image. That is going to render the full resolution image with the background removed in your Figma file. It’s a transparent image fill. You can see that over here in the image fill; it’s got a transparent fill where the background used to be. Again, we can also replace the fill. If you just wanted to replace it because you didn’t need the original anymore, you could just click on replace fill. That will just replace the existing fill on an existing layer. In this case, I’m just going to leave that one as it was. Finally, you can also click on download. If you click on the download button down here, that will bring up the file browser, and then you can just click on save and save it anywhere to your computer. When you open that up, you can see here we’ve got the full file saved as a PNG on the computer.

That’s the three different ways you can actually use the background image removed asset. Again, I’m just going to go through these a couple more times just to show you some different results. If we want to change it to a new one, we just select a different Figma layer. Click on the use selected Figma layer again. That is going to ask you to discard the current file. That’s fine; we’ll just click okay. That’s going to load the new one up. Again, we’re just going to go ahead and click on the remove background button because we’re still inside of the remove background tab in the local AI option. Just click remove background. This time it doesn’t need to redownload the model because we’ve already loaded it once this run. It’s now separating the background from the foreground. That took about six seconds, and we can see here that it’s done a pretty good job of cutting out that foreground item. I’m just going to insert that into Figma. You can see here that because we had some extra area, we could just go through and crop that if we wanted to. You could basically just crop out that external part, and that’ll automatically add that in. We may actually just automatically do this in a future update to make it a bit easier. In the meantime, that’s one way that you can go about it. You can see that it’s pretty good in terms of disconnecting the foreground from the background, and now we’ve got that item just cropped out.

Finally, we’ll do this one last one. Again, I’m going to select the layer in Figma, click on use selected layer, discard the old edits, and one more time, I’m just going to click on the remove background button again. Again, we didn’t have to redownload the model on this Figma plugin run. Every time you rerun the Figma plugin, you will have to hit that initial model download to load it into the memory of the Figma plugin. Once it’s loaded up, every other background removal you do in that same Figma plugin session will just keep doing the detection part rather than the model download part. You can see that it’s removed that outline as well. One more time, I’m just going to click on insert image, and that’s going to insert the full resolution image into Figma. You can see that it’s done a fairly good job of cutting out the edges there. There are a couple of bits here where it’s not detected the pink sort of background a little bit between the hair. I think it’s getting a little bit confused with where the hair is and the background that’s showing through there. Overall, quite a good job of removing the background outlines as well.

You can try this with any images in your Figma file. Depending on the image style and resolution, the bigger the resolution or the higher the resolution, the better quality you’re going to get just because of that pixel density. It’s going to have an easier time figuring out where those foreground and background dividers are. In any case, you should definitely give it a try on your own images and see how you go. We’ll keep improving this over time, making the results a bit more consistent and easy to use. In the meantime, this is a really quick way of automatically removing backgrounds from your Figma images without having to manually cut them out in Photoshop or something like that. I hope that’s useful. If you’ve been wondering how to remove background images with one click in Figma, you can now do that in the TinyImage Figma plugin under the editor tab and using the local AI models that we just went through. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.

Read as Markdown · Related resource index · Site index for AI agents