How to export WebP images from Figma using TinyImage

Video Transcript

Today, I'm going to be showing you how to export Google's WebP image format directly from Figma.

We're going to be taking these images here and exporting them; instead of exporting them to JPG and PNG, we're going to export them to Google's WebP image format, which Figma doesn't natively support, but we're going to use a Figma plugin to help us out with that.

The first thing you want to do is go up to the main menu and click on the Figma icon in the top left here, and you want to go to a search or community, either one, and in the search bar we just want to type in the word "TinyImage", that's just one word; and when you do that and go to the plugins tab, you'll see this Figma plugin called TinyImage Compressor" pop right up. Because I've already got it installed, my button on the right here looks like this, and it's got this little check mark with "installed" on it, but yours might just say "install" if you haven't already installed it; if you click on "install" it'll install it straight away, and you'll see it changed to say "installed" like mine does.

Once you've installed it, you can jump back to your project in Figma, then to run the Figma plugin that we've just installed, you can just right click anywhere, go down to "plugins", and then go down to "TinyImage Compressor"; that will run the Figma plugin that we've just installed.

The first thing to know, is that TinyImage bases the images that it exports from the native Figma export settings on any of your frames or any of your layers. What I mean by that, is if we click on - let's just click on this this matcha photo here - you'll see in the right hand side, we've got this this little section called export, and at the moment I've got two export settings, I've got two different JPG exports. If I remove those, and then click on the "refresh" icon in TinyImage, you can see that it'll warn us, saying that we don't have any export settings on this layer. If you're running the Figma plugin and you're not seeing any images pop up, it's because you need to apply export settings from this little sidebar in Figma, and that way TinyImage will understand what exports you want to be making for all of these different images.

To do that, you can just click on an image layer, go to the "export" tab over here in the right hand Figma colum, click on that and then it's really up to you to set the formats. By default, it's PNG, but I want to use JPG because these are more photo based, there's no transparency, there's really no need for me to use PNG for these ones. On the other hand, these little icons here do contain transparency; I do want to export those as PNGs; at the moment they're set to SVG, what I can do is I can just go down here to my export setting, click on where it says SVG and change that to PNG in my case. I can do that to multiple images at the same time just by holding down shift and clicking on more than one, and then changing that down here to add to PNG; now if I refresh you can see there it's changed to PNG. That's just a brief intro to how these little images pop up in the TinyImage plugin, they're directly correlated to the export settings that you put in to the Figma column.

Now that we've got those set up, we've got JPGs and we've got PNG setup, if we do this normally what's going to happen is it's going to export them just as those formats, it's going to export PNG's and export JPGs. Just to show you what that looks like, I will click on the "Compress" button up here and TinyImage is going to run through all the selected images that we just told to compress, and it's going to compress all of them to JPG and PNG, depending on which layer had which setting attributed.

If I'll double click on that and then open it up, you can see that it's exported exactly what we've asked for, it has given us PNGs and has given us JPGs, and because we've got the quality moderately aggressively set to 50, we've saved 93 percent, but in my case that's too low quality; I want higher quality images, but I also want really small file sizes. If we just keep in mind what the total output is at the moment; we've got 7.6 megabytes for these images and quality 50, but to get better file size savings but also better quality at the same time, what we can do is export these images to a totally different format called WebP.

I'm just going to click out of the plugin and rerun it; I can rerun the TinyImage Figma plugin from the sidebar now that I've already run it once. If you go over to the right hand side and click on the TinyImage icon, that will fire up the plugin again without you needing to right-click anything.

To enable WebP - Figma does not support Google's WebP image format natively - so what we need to do is enable it via the TinyImage plugin. To do that, we can click on the little "Settings" icon up in the the Figma plugin toolbar up here, when you click on that, you'll notice this option here that says "Convert all JPG and PNG images to WebP"; by default that is turned off, but in our case. because we want the WebP image format, Google's WebP image format, to be exported from Figma, we can click on this little toggle and that will enable it.

If we just click out of the settings again, you can see here that it's actually flagged a little update in our list that says in brackets: "WebP". So, WebP is in brackets next to it, we can still see the original format, we've got PNG exports here, but in brackets it's telling us that the WebP setting has been enabled in our settings here; that's why why that looks like that, if we turn that off you can see that that removes it, but when it's on it's telling us that the export setting is for PNG, but that's going to get converted into WebP.

To see what that looks like, we can for example, bump up this this quality slider; let's make it 75 and we're just going to leave all the checked images to the ones that we just did a moment ago. We can compare the outputs, now we've got all these selected to export WebP from Figma instead of JPG and PNG, and I've got the quality selected as 75, we could override these but for now let's just make them all 75. Then we jt simply click on "Compress" once again with that WebP setting checked, and this time it's not going to give us JPG and PNG, it's going to give us WebP.

Now, I'm going to save this zip file and you can see here that even though we increased the quality to 75, from 50 to 75, the savings are still in a really high range. We've just saved 90 percent, 7.43 megabytes in total have been saved from the exact same image set.

If we go to our desktop where the images was saved and then open that up, we can see here that if I just open up that in a new tab compare that, we've got our new exports here which are all the WebP image files; you can see here it's got "Google's WebP" as the format compared to the export that we just did a moment ago, which just exported the original PNG and JPGs.

If we compare the sizes, even though we've increased the quality to 75 from 50, the image sizes are still quite good even though we've bumped up that quality. If we open those up here you can see that we've got these reasonably good looking images, but the file sizes are still really really low, and that's the whole idea behind Google's WebP image format; it's a brand new format and there's not a lot of people using it yet, but I know that if you're a website that gets heaps of traffic and you want to really save on the amount of data that people are consuming, and the amount of traffic that's going through your server, but still have really good quality images, WebP is just a really good alternative to the original PNG and JPG.

The thing you'll notice as well is that TinyImage supports transparency. We've got these little icons here that have transparency, and you don't have to worry about whether you you can't do it, because you need a PNG or an SVG because you have transparency; this exports transparency just fine, as long as you've set the original format for those images as as PNG. For example, we've got this one set to PNG because it has transparency, as long as you've got that selected as PNG. the transparency is going to get picked up in the WebP compression and the WebP file is going to automatically get that transparency. That won't happen for a JPG; JPGs will never have that transparency, but JPG is perfect for photos just like this.

That's how you can export WebP image files directly from Figma. As I said, WebP from Figma is not supported natively, but using the TinyImage Figma plugin and enabling this option that we enabled before to convert all PNG and PNG images to WebP from the Figma exports that will enable you to do it, even though it's not natively supported. And finally; to turn it off, you just simply click on the "Convert all JPG and PNG images to WebP" toggle in the TinyImage Figma plugin settings once again.

I hope that has been interesting for anyone who's trying to figure out how to get this WebP image format out of Figma directly, without having to export JPG and PNG files first, then find an online converter or find some command line tool to do this for you every time. If you do need to export a bunch of WebP image files directly from your Figma project, then at the moment TinyImage is the the only way to do it; but as you can see, it does it really quickly and efficiently, and you don't need to worry about any other terminals or scripts that need to be run after exporting other files from Figma. I hope that you have some success with it, and as always, thank you for watching the Figma tutorial; I hope you learned something from it, and thank you again for watching!