How to downsize Figma image fills to their layer size using TinyImage

Video Transcript

Today I'm going to be showing you how to downsize your Figma image fills in order to fit the content layer that they're actually being used on. This is going to optimize your image sizes, it's going to speed up your Figma file performance, and it's just going to save you a whole bunch of extra megabytes and image size that would otherwise be taken up unnecessarily.

The first thing we need to do to get started is just go to the Figma Community and search for the word "TinyImage", as we're going to be installing a Figma plugin to do this. If you type "TinyImage" into the Figma Community search, go to the "Plugins" tab and you'll see "TinyImage Compressor" pop-up. All you need to do is click on the "Install" button on the right-hand side over here and then you're good to go.

I'm going to jump back into my Figma file here, I've just taken a handful of images using the Unplash Figma plugin; that's just a Figma plugin that allows you to grab stock images directly into Figma, you can just add them like this, and these are typically very high resolution images. You can see this one's 1280 by 1920 which is great if you actually want those images to be at that size, but very often you'll drag these images into your design and you'll actually end up rescaling them to be much smaller.

For example, if we scale all of these down instead of being at 1200 or 1900 pixels, if we scale them all down a little bit to a smaller size, let's say in our design we actually only need them to be three or four hundred pixels wide because we're designing a mobile screen or something like that, the problem is it looks really good, it visually looks correct; we've got these 400 pixel width images, but behind the scenes the Figma image fill that we got from Unplash, the super large high res one, which is four or five times the resolution of this, is still actually being stored and loaded every single time in Figma.

If you've got a lot of these, it can tend to slow the file down and you're just using up a whole bunch of space that you don't actually need. The way we can solve this is just by right-clicking anywhere, going down to "Plugins" and clicking on "TinyImage Compressor", the Figma plugin that we just installed, and to solve this problem we're going to be using a brand new feature called "Downsizer". I've got another tutorial on all the other features in this Figma plugin, but for today I'm just going to be focusing on the new feature of the Figma image downsizer. To get started, we just click on the "Downsizer" button in the header of the Figma plugin, and this is going to load up all of the Figma image fills in your Figma page. You can see in mine I've only got a few layers, and each of those layers only has one Figma image fill; if you have multiple Figma image fills it'll load those in, too. We can select them by either just un-checking the ones we don't want, or you can actually filter this really quickly just by clicking on multiple layers, and if they contain Figma image fills they'll get filtered down here, and that's just an easy way of filtering a couple of images if you don't want to do the whole batch.

For today, I'm just going to make it really simple and do them all at once. Just to explain what's going on here, this interface basically just gives us one option; we can downsize Figma images to match two times the layer size; what that means is if our layer is 427 by 640, but the original image is five or six times that. What it's going to do is it's going to scale down the original Figma image fill to be two times the size of this content layer and it's going to proportionately shrink that down to make sure it's only a maximum of two times this size. It's going to keep that retina 2x sharpness, but it's not going to be the original image which is just way, way too big.

For this case I'm just going to leave it at that, you can actually uncheck that and that will downsize Figma images to 1x of the layer size, so it would downsize Figma images to exactly match the 427 by 640 proportionally, but it's not going to look as sharp. For now, I'm just going to leave it checked at 2x, and I'm going to click on the "Downsize Figma Fills" button; I'm just going to do all the images and click on "Downsize Figma Fills @2x", so you can see here it's now going through and downsizing all of these six images, and we can see here, what's going on is we've got the original file size, so that's the original file size from Unplash, and then we've got the a list of optimized file sizes. You can see that it's gone ahead and it's downscaled all of those images; it's replaced the Figma image fills, so these are brand new downsized Figma image fills that have been replaced behind the scenes.

You probably didn't notice them briefly flashing, but they were flashing and getting replaced; and if we zoom in, so if we zoom to 100 percent, they're still retina sharp; they're still very, very sharp. The reason for that is it's scaled proportionally to be exactly two times the size of the content layer. Even if we zoom in to 200 percent, it's still extremely sharp at 200 percent as well because of that 2x retina scaling. There's also a little bit of compression going on as well behind the scenes, so not only does it downscale the Figma image, it also does compress the Figma images very slightly; just enough to save a bit of image data without being a noticeable quality difference. You're really getting two sides of optimization there; the Figma downsize itself of the image dimensions, and also a bit of image compression going on behind the scenes, too. We can see here just from running that on these six images that we've saved a total of four megabytes. You can see all the originals here; for example, this one was one and a half megabytes, now down to 433 kilobytes, this one we saved 80 percent; so at least 70 percent saved for all six of these Figma images. You can imagine what kind of savings you get at a much bigger scale.

If I jump into a different Figma file, I'm just going to use this other design that I duplicated from the Figma Community. I'm just going to run the TinyImage Figma plugin on here as well, and I'm going to do exactly the same thing; I'm going to click on that "Downsizer" button once again, and that's going to load up all of the Figma image fills that are found on the page. Some of these might actually have multiple Figma image fills behind the scenes, too. If you're struggling to see what image actually relates to, or what part of the design, you can really quickly jump to any of them as a preview just by clicking on the little image icon here. You can see here that this image relates to that Figma fill, and I can keep jumping around if I want to preview what all these different fills relate to; that's just a quick way of doing that.

I'm just going to leave it at 2x, and I'm going to click on "Downsize Figma Fills" at 2x, and once again it's going to go one by one through every single one of our Figma image fills because I've left them all selected, and you're going to see all of the savings for all of these images. In particular you can see that these layers here are actually very small; the size of these layers compared to the original image is quite different; this is 164 pixels by 164 pixels, but the original image behind the scenes there is much, much larger, as we can see by looking at the statistics over here; this Figma image has been downsized to be 200 kilobytes, but that's from an original file size of three megabytes, so that's a 93 percent saving just from that one layer alone.

Again, the more of these larger scale images you've got in your design, and the more that they're actually being shrunk down, the more you're going to save; as a concrete example of that, you can see just from this one page alone, which actually isn't a super large page, that's actually relatively small, there's only a handful of frames here; but just from optimizing and downsizing this one page alone, we've saved 44 megabytes in total. There's not even that many Figma images on here, it's barely even scrolling further down the list, but again we can see that we've saved a minimum of 90 percent on all of these images, because they're more vector based, and they're much more optimizable.

Just as another example, I'm just going to do one more landing page and I'm going to re-run the Figma plugin by right-clicking, going down to "TinyImage Compressor" again, and this time I'm just going to show you what it looks like with the 1x option. If I click on "Downsizer" and load up all the Figma image fills, this time you can see that we've got some very large target sizes, and I'm assuming the images behind the scenes are actually even bigger, but this time instead of doing 2x, I'm going to do 1x just show you what that looks like, too. I'm going to un-check that click on "Downsize Figma Fills" at 1x, and this is going to downsize all the Figma image fills on the page to be 1x of their of their size. You can see here it's just going through and doing all those, and because these are already quite large already, these are fairly large frames, the 1x option in this case is probably going to be fine because the images are so big. Usually, if you've got smaller images you want to keep the 2x option turned on for sure, but sometimes if you've got a really big image and the image is slightly bigger than this one, but it's not 2x bigger the original image, then maybe the 1x option is actually going to be better for those sorts of scenarios. You can see here they're still looking quite good even with the 1x option, but typically you'd basically want to keep the 2x option turned on anyway, but again, this is just showing you that you do have that option if you did want to use it.

That's essentially the overview of how to downsize and optimize images in Figma on your canvas. You can use the TinyImage Figma plugin's downsizer function to do this, it's brand new plugin featur, and I think it's going to make a huge difference to performance, and a huge difference to file sizes in your Figma files. If you're using a whole bunch of images, it's going to mean your Figma files are going to open up faster, they're going to be smoother to zoom around in, and also when you're doing exports sometimes, if you've got really big images, the exports take a while to load; and if they haven't loaded completely when you do go to export a PDF or export certain images, sometimes you can actually catch them still trying to load in the background, and you'll get a low resolution image. I'm not sure if you've ever come across that, but it actually happens more often than you would imagine, especially in files with lots and lots of Figma images, hundreds of megabytes worth of images trying to load up in the background; this can unfortunately happen more than you would want in bigger Figma files.

As always, thank you for watching, and I hope it's been helpful if you've been trying to optimize your Figma files for speed or performance, or downsize your Figma images in the way that we've seen in this Figma tutorial today. We'll be back soon with more Figma tutorials just like this one, and thank you again for watching.