How to export animated WebP images from Figma using TinyImage

Video Transcript

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

The first thing we need to do to get started is just go up to the “Resources” icon in the Figma header toolbar up here and click on that, and if you search for the word “TinyImage” you’ll see TinyImage compressor pop up and all you need to do is click on that result and then click on either the “Run” button here to run the Figma plugin, or you can go over to this “More options” icon and click on that, and you’ll be able to add that to your Saved plugins to make it a bit easier to access again later.

Because I’ve already got the TinyImage Figma plugin saved, I’m just going to right click on my Figma canvas, I’m going to go down to “Plugins” and then just go down to “Saved plugins” and click on TinyImage and that’s just going to open up the Figma plugin that we just saved a second ago; for today’s example I’m just going to create a really simple WebP animation from Figma using these three images, and all I need to do to get started while the Figma plugin is open is just click on the images you want to include in your animation; I’ve just clicked on those three layers, and now I’m going to go ahead and click on this button in the TinyImage Figma plugin called “Create GIF”.

If I click on that button, that’s going to allow us to load up the three images that we just selected in Figma, and you can see here that we’ve got all these other options as well. This allows you to sort the frames by their order on the page; if you wanted to change the order based on how they’re ordered on your page you can easily do that, but I’m just going to leave it as the default for now. You can also do things like change the duration, so the default duration between the frames you can change down here, or you can actually override these per frame.

For example, if you wanted this middle frame to only flash up for 200 milliseconds, you can override that in the Figma plugin settings per image or per frame as well; that’s something you can do there. I’m just going to leave that at 500 and I’m just going to change the default delay to one second, and I’ve got that set to infinite and I’ve just got it set to the default size, but you can also scale that up or down based on these settings as well. If you wanted to do it at half size, you can scale that down, I’m just going to leave that at 1x for today. Then I’m just going to set the quality a bit higher; I’m just going to pop it at the default which is about 90, and that’s pretty much it.

I’m fairly happy with how the playback’s looking. You can pause this and jump between your frames if you wanted to get a bit of a more detail on how that animation is looking, but I’m pretty happy with that for now. To export this from Figma to animated WebP image, all we need to do is change the default export format from GIF; instead of doing “Animated GIF”, I’m actually going to change that to the “Animated WebP” option and I’m going to click on that and then click on the “Export WebP” button. If I go ahead and click on “Export WebP” that’s going to add my frames from Figma to the WebP image and render it out as a special animated WebP image file from Figma.

I’ve just got this prompt to save my file, I’m going to click on “Save” and just pop that on my desktop. Then to view the file, the easiest way to do it is just to open up your browser and drag the image file in to the browser, so I’m just going to do that now. You can see here that our WebP image is animated, so this is just one file containing our animated frames and it’s allowing us to use this in the browser as a much more optimized file size compared to a GIF. If you’re tossing up between GIFs or WebP, WebP may actually be better in some cases depending on what compatibility you’re looking for.

If we jump over to the “Can I Use” website we can get a bit of a sense of what support the WebP image format does have. As you can see, it’s fairly well supported across most browsers these days, which is great, and there’s some partial support here for not supporting two animated WebP images. As you can see, those are actually pretty much just all the versions of Chrome and older versions of Opera, so if you don’t need to support those older versions then WebP actually might be a really good option for you to be able to get that better image quality compared to GIFs. GIFs only have 256 colors in the image, so that’s why they tend to look a bit washed out sometimes, whereas with WebP you get that PNG level looking image with all of the compression savings of WebP as well.

WebP is a very good format for compressing the file size down, so if you’re comparing a WebP image versus a GIF image, just from the file size alone you’re always going to get a better quality and better optimized file size from a WebP file. In terms of the use cases for WebP animated images this is perfect for adding to your website; if you wanted to share this on your website or add an animated image into your social media, then WebP is probably going to be a really good way of doing that. As I said, you just got to weigh up the pros and cons of WebP versus GIF, for example.

Anyway, that’s a pretty quick Figma tutorial for today. As I mentioned, there’s some extra settings you can play around with in the GIF creation settings, but I’m not going to go through all of those today, so you can have a play around with them yourself. For example, if you wanted to change the way that the image fit works, you could make a image fit instead of fill; containing the images, instead of automatically covering the entire size of the the GIF; you can totally do that. You can change the dimensions to be different from what the first image is, which is what the default image size is, and you can also obviously change the delay and all that sort of stuff down here; that’s what that looks like in the Figma plugin.

I think we’ll keep it there for today, and I hope if you’ve been wondering how to export animated WebP images from Figma, as far as I know this is the easiest way to do it. If you’re interested in trying it, I hope that you give it a go and best of luck with creating your animated WebP images from Figma. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.