How to export AVIF images from Figma using TinyImage

Video Transcript

Today I’m going to be showing you how to export AVIF images from Figma using the TinyImage Figma plugin.

The first thing we need to do, if you haven’t already done so, is just go up to the top left corner of your Figma application and click on the little Figma icon; and if you go down to “Community” and just type in the search word “tinyimage”, you’ll see a Figma plugin called “TinyImage Compressor” pop right up. If you haven’t already clicked it, there’ll be an “Install” button over here on the right hand side, just click on that and it’ll change to look like mine with a little checkbox; once you see that you’re ready to go.

Now we can jump back into our Figma file; I’m just using a few images that I took from Unsplash, but you can use any layers in your file for this Figma to AVIF example. If you right click anywhere, go down to “Plugins”, and then just click on “TinyImage Compressor”, that will fire up the Figma plugin that we just installed a moment ago. The first thing to note is this Figma plugin will basically look for any images or layers in your Figma file with export settings, and what I mean by that is if you click on a layer and go over to the right hand side of the Figma layout, you’ll see a little column called “Export”, and you can see on mine I’ve got a couple of export settings already set on this image. If you don’t have an export setting set on your layer, the TinyImage Figma plugin won’t pick it up, so just be sure to add any export settings to your layers and that’s what TinyImage is going to use to determine what formats and what sizes you want to export per image. If I just deselect that image, you can see all of these other layers in my file have export settings on them. I’ve already gone through and added those but you can do that yourself depending on what images you want to export.

Now that I’ve got that set up, I’m just going to deselect all of my images because I don’t want to export any SVGs today, I just want to export my photos in Figma from JPG to AVIF. To do that, we just have to click on this little settings icon, you’ll see it in the little toolbar here, if you click on that, there’s an option at the top called “Image Conversion”. At the moment we don’t have any image conversion selected, but if you click on that drop down you’ll see a few options: we’ve got “Convert JPG and PNG to WebP”, “Convert JPG to AVIF” and “Cconvert JPG to Progressive JPEG”. Today we’re just going to be looking at this middle option, which is “Convert JPG to AVIF”. I’m going to click on that, and now that has selected the image conversion option to “Convert JPG to AVIF” from Figma.

If I just close off the settings panel now, you can see here if I enable a couple of images that I want to compress you can see that the JPG setting has now changed, and it has brackets next to it saying “AVIF”, so that’s just going to indicate to me that I’ve selected the AVIF conversion option and any JPG layers or any layers that you’ve got export settings with the JPG format set are now going to be converted from JPG to the AVIF image format. I’m just going to show you what that looks like by converting the three images I’ve got set up here. Of course, you can change the quality, so you can change the quality slider to be whatever you want, and you can also of course add in overrides here, so if you wanted this to have much more compression; if we wanted this one to be at “30” quality and leave the other ones at “75”, then we can just put that in there and that will override that particular image.

Now that I’ve got everything set up to export AVIF from Figma, I’m just going to click on the “Compress Selected” button in the top toolbar of TinyImage, and this is going to go through my three images that I’ve selected and convert or compress our images from Figma to AVIF. The AVIF image format is a very new format, it’s actually only supported by Chrome and Firefox I believe at the moment, but this is a format that is really, really good as far as image compression goes, and really good at maintaining quality for lower file sizes; I believe it’s about 50% smaller than JPG, and roughly 20% smaller than WebP.

Okay, it has finished converting all of our images in Figma from JPG to AVIF for us and compressing them. I’m just going to save it to my desktop as a zip file, and just briefly I’ll go over the savings that we’ve got here; you can see that the two images that we set at “75” quality, we’ve saved 39% on those and the one that we put down all the way down to “30”, we’ve actually saved 96% file size savings on that one, so that’s a total of 54% savings across the board.

Now I’m just going to go to my desktop, I’m going to unzip the file that we just exported, and you can see here we’ve got our AVIF files. Now, Mac doesn’t have a in-built AVIF viewer, so if you do want to see what this looks like, the quickest way is probably just to drag it into your web browser, or if you’re building a website or using this in production, you could just drop this into your code base and hook them up to an image tag, but in my case I’m just going to preview it in Chrome; I’ll do that now. I’ve just dragged that image into Chrome, so that’s the first image that we exported, that’s the “Kyoto” AVIF image from Figma, I’ve also got the “Matcha” AVIF image from Figma, which has also been exported, and then we’ve got the “Mount Fuji” AVIF image as well; that was the one that we exported at quality “30”.

So, you can see there it’s just reduced that file size like crazy; that’s a 69 kilobyte file, and as you can see here the image quality is actually still relatively good; you can’t really tell any pixelation or blurriness, just at a glance anyway. That is a really good looking image for something that is 69 kilobytes; the same with these ones, these look really good considering that they’ve been compressed down to 1.4 megabytes. Okay, so that’s what they all look like, and if we go back to Figma, we can just close our Figma plugin now, and that’s all there is to it; you just have to run the TinyImage Figma plugin, make sure you’ve got that conversion setting selected in the Figma plugin settings to “Convert JPG to AVIF” image files from Figma, and you’ll be ready to go.

You can use these AVIF images exported from Figma on your website, you can use them for your web applications, or anything like that. I hope this has been a helpful tutorial if you’ve been wondering how to export your images from Figma to AVIF, or if you’ve only just discovered the AVIF image format in this Figma tutorial, then I hope you can go ahead and try it out in your own projects and on your own production sites. Hopefully it all works out for you, and thank you again as always for watching. We’ll be back very soon with more Figma tutorials just like this one.