How to bulk export original image files from any Figma layer fills from Figma using TinyImage

Video Transcript

Today, I'm going to be showing you how to automatically download the original image files that are being used in your Figma image fills using the TinyImage Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "TinyImage", you'll see TinyImage pop up under the "Plugins" tab.

If you go ahead and click on that, you can then run the Figma plugin by either clicking on this run button here, or, I'd recommend, clicking on this little more options icon here and just clicking "Save plugin". That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that. I'm just going to go to my canvas, I'm just going to right-click anywhere and go down to "Plugins", and then I'm going to go down to the "Saved Plugins" item. Then I'm just going to go down to the TinyImage option and that's just going to run the Figma plugin we saved a second ago.

For today's Figma tutorial, I really want to show you how to export the original images that are being used in your Figma file. I've just got this Figma file from the Figma Community which is a mock-up of the Spotify app, and you'll notice here that we've got an image fill on each of these layers.

Unfortunately, we can't extract that original image easily from here. Sometimes there's a way to do it through the inspect panel, usually there'll be a little link down here where it says background and then the jpeg file, usually you can click on that and it'll let you download it individually, but it's quite time-consuming to go through all of the layers and do it manually.

So, I'm going to be showing you how to extract all of the original image fields that are being used on your layers automatically in one go. The way we can do that is by going to the downsizer function in the TinyImage Figma plugin. If you click on this little "Downsizer" button here, that's basically going to open up a new panel which shows all of the image fills on your page.

We can narrow this down by frame. If you just wanted to find them all for this Frame one, we can just click on that frame, click on the refresh icon, and that will just find all of the image fills in this particular frame. If we were to rename that, you can see we'll change that one to album cover and just refresh the selection.

Now we've got those selected, and I want to export all these image fills. All I need to do is go down here to the bottom of the Figma plugin and click on this button that says "Export Figma Image Fills". I'm going to click on that now, and that's basically going to export all of the fills to a zip file.

I'm going to save that zip file onto my desktop. I'm just going to open up the zip file now, and if I open up the folder you can see here that I've got all of my image fills exported.

We can do the same thing over here. If we wanted to export this Frame, we can just jump back in to the downsizer feature, click on the "Export Figma Image Fills" button again, and that's just going to export that next batch of images.

For example, this top image here, which is quite a large image. If we actually track that down in the design, you can see here that it's quite small, the image layer itself is actually very tiny. But because we're exporting the original image that was used, that was dragged into the design from somebody's computer, it's exporting that original image. The original image is much larger in this case and that's why it's getting exported.

That's basically it. If you want to do it for the whole file, you can definitely do that as well. Just click on the "Downsizer" button again, and if you don't have any layers selected, click on the refresh icon, it'll say refresh all of the fills on the page.

I'm just going to click that, and then you can either export everything or just check the ones you want to export. In this case, I can show you what it looks like to export them all. I'm just going to click on "Export Figma Image Fills" again, and this is basically going to go through and automatically export 76 images.

These are all the image fills from the entire Figma file, and we can basically go through those and use them or reuse them. You can do whatever you want, but this is going to be the quickest way to get all of those original image fills out of the file if you do need to use them.

Then, if you want to avoid doing it manually, or as I showed you before, sometimes it just doesn't show up in the inspect panel, that is another way you can do it, normally manually, but in this case, it doesn't seem to be wanting to give those up.

Hopefully, this helps if you've been wondering how to export the original images or the original image files from your Figma file, they're definitely in there, it's just a bit tricky to get them out. Hopefully, this will help you get them out much easier with one click using the TinyImage Figma plugin.

We'll leave it there for today, thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.