How to compress SVG images in Figma using TinyImage

Video Transcript

Today, I'm going to be showing you how to export compressed SVG files directly from Figma.

We're going to do this by installing a Figma plugin called TinyImage; if you haven't already installed it, you can go to the top left, click on the Figma icon in the toolbar and you just want to search for the term "TinyImage" in the search bar. You'll see "TinyImage Compressor" pop right up. If you haven't actually installed it, you'll see a button that says "install" over here; I've already installed it and that's why mine says "installed", but if you haven't installed it you can just click "install" and when it says "installed" and you're ready to go. Once you've installed TinyImage, click back into your project.

These are the three images that we want to export to SVG. Now, the normal way we would do this is by clicking on the export settings in Figma down here, if I don't have any on that, I would click on the image or the frame, go over to the right hand side, and click on "export" and then I would change the export format to "SVG"; then if I click on "export" that'll export it straight to my desktop, or wherever I want it, as an SVG. If I save that and then open it, you can see there that Figma exported it; that's the original one that we were exporting, I'll just name that this "original".

We want to export a smaller version of that; the way you can do that is by running TinyImage. If you right-click, go down to plugins go down to "TinyImage Compressor" and click on that; that's going to run the Figma plugin that we just installed, and once that loads you'll see that it will load in all of the images that contain export settings already. If the images don't contain export settings, for example if I remove this export setting of SVG and then refresh in TinyImage, you can see that it's saying we don't have any export settings on this particular frame. If I click off that frame and go back to the full list, you'll see that this particular frame has been removed from the list and that's because it doesn't have export settings, whereas these two still have SVG as export settings.

So, we want to re-add the export setting of SVG; that TinyImage can pick it up. I'll click on "export", change that to SVG, click "refresh" and we can see it's popped back up into the list. To export a compressed version, what we have to do is select the layers that we want to export from TinyImage; in this case I'm just going to export the one layer that we just exported using Figma's native export settings and I'm going to use this quality slider to determine how much compression or what quality I want the image to be saved at us. Lower quality will result in smaller file sizes but potentially lower image quality and all the way up the other end you have larger file sizes but better image quality; it's up to you to figure out what that balance should be.

In this case, I'm going to make it fairly low quality because these are SVG images and the quality differences compared to something like a JPEG or a PNG is very different and usually you can get away with pretty aggressive compression in SVG images and not really have any detrimental effects on the quality. I'm going to actually put it down to "20" and click on "Compress".

It's it's extremely quick; in this case it's just done it instantly, and it's saving it out as this file name here, and that's because I've configured it to use the image dimensions in the file name which I can show you in a second. I'll click on "Save", that's just saved it to my desktop, and you can see there it's just exactly as you'd expect. The difference between the two is very slight, but the file size as you can see here in the summary the file size has been reduced by 74%. I know that we're dealing with very tiny file sizes, we started off with 5.6 kilobytes and we've reduced it down to one point four nine kilobytes 74%, it's understandable why that doesn't seem like much, but these are very small simple icons. If you're dealing with SVG images that are much bigger and the original file sizes are much bigger, that seventy four percent increase is going to mean much bigger absolute file size savings for your SVG files from Figma.

I'm just going to re-run TinyImage, and the way we can do that more easily, because we've already run it through right clicking, once we've run it once in a page it'll show up in the right-hand side under the Figma plugin column, and you can see here I've got the little TinyImage icon with the milk bottle icon; I'll click on that and that will relaunch the plugin for me immediately. I don't have to kind of go through the few steps of right clicking this will just do it really quickly from the sidebar.

This time I'm just going to show you why the file name came out the way that it did. The reason is, if I click on this little "Settings" icon you can see here that I've got a custom image file name format setup to follow the convention of the layer name and the width and the height; you can see here when I update that it gives you an example of what that file names going to look like. I could remove all these things here and and and just update that, I'll do that now I'll just leave it as the name; I can actually just remove that and it'll it'll default to that if I remove it, click out of that.

This time I want to export all three of my icons. The way I do that is just by selecting them in the list here, I'm just clicking on them to make sure they're all checked and when they're all checked, you can again pick the quality; I could do something like leave the default quality at 20 but maybe for this third icon I want the quality to be like really low; I'm just going to make that one 5 and then a sushi one for some reason I want it to be 35; you can actually override the quality settings, and any that you don't override with these text boxes will inherit the global compression quality up here; because we've only got one with no value over here you can see on the right the placeholder is defaulting to whatever the global compression value is for those for those SVG images.

I'll leave that as 20 and then I can click on "Compress" again. It's extremely quick with SVG images in particularm it's just basically instant. I'll click on "Save" and this time you'll see that we've saved 64 percent in total, which is almost 14 kilobytes, and it's showing us here that we've been using different qualities per frame or per SVG, because we added an overwrite to this one and this one; that one was at 35, this one was at 5 and that one was at 20; you can see that the percentages are a little bit off; because this one was set to 35, the quality might be better but the file size reduction is also less, but that's okay, we still saved 64 percent which is great.

You'll get a zip file if you compress multiple images at the same time, and it just names that by defaults as whatever the project name is in your Figma; we've got "TinyImage Compression" and that's reflected in the the project title and then today's date. If I double click on the zip file, it'll give me this folder containing all three SVG images and because I updated the file naming convention, we no longer have the "512 by 512" suffix, it's just the layer name as you'd expect from the native Figma exports for SVGs.

They all look really, really good; the quality is great, you can't tell that that we've used more aggressive compression on this one. This one was set to quality 5 out of 100, and you wouldn't be able to tell that there's any loss; the paths are potentially slightly different, but at a glance it's it's very difficult to tell and it looks really good.

That's a fairly good summary of how you can compress SVG files directly from Figma using TinyImage; as I said this is this is a really basic example of just using small icons, which is really handy, but you're going to see huge savings if you're exporting much more complex SVG images like illustrations, much bigger sorts of images or more detailed paths; TinyImage is really good at doing that. If you do need to export SVGs from Figma and you don't want to manually re-run them through some third-party service or command-line tool or website, you can just use the TinyImage Figma plugin, and as you've seen here it just immediately does it directly from a Figma and gives you those nice compressed SVG images.

We'll leave it there; I think this is a really short and sharp use case for using TinyImage, and I just wanted to give you all the different ways you could actually use it for compressing SVG images in Figma.I hope it's been really helpful if you've come here looking for a Figma tutorial for this, an I hope that you get some benefit from it and can use it in your own projects. Thank you, as always, for watching and we'll see you soon for more Figma tutorials just like this one.