How to export animated PNG (APNG) images from Figma using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your images from Figma into an animated PNG file using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and search for TinyImage. If you click on the plugins item and then click on the TinyImage result, you can run the Figma plugin by either clicking on this little run button here, or I’d recommend clicking on the save button over here. That’s going to save it to your plugins list for easy access later.

I’ve already clicked on the save button, which is why it says “remove.” I’m just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on the TinyImage item. That’s going to run the Figma plugin we saved a second ago.

For today’s Figma tutorial, we’re not going to be focusing on any of the regular compression features of the Figma plugin. We’re going to be specifically focusing on how to export a number of selected layers out to an animated PNG file, sometimes called an APNG file, and export that directly from Figma. You can use it on a website or different application just like you would with a GIF file.

All you need to do is select the layers you want to export to an animated PNG. Select your Figma layers, I’m just selecting these six for now. Then you want to click on this button in the Figma plugin called “Create GIF/MP4.” By default, you’ll see that it’s selecting the animated GIF option up here. What we want to do is change this animated GIF option. Click on the drop-down list and change it to animated PNG. That’s going to set the export to APNG.

Now you can animate or customize the animation of your Figma frames. You can change the timing per frame, this is currently at half a second per frame. Adjust that to be longer or shorter, depending on your needs. You can change the scaling, for example, doubling the size or reducing it to half size compared to the current Figma layers.

You can also add transitions if you want some transition effects, but for today I’ll keep it simple and leave it as instant. There’s also a quality setting down here, which I’ll leave as default.

Next, click on the “Export APNG” button up here. That will go through my six Figma images, export those, generate an animated PNG file, and then allow me to save it directly to my computer. You can see it’s just finished exporting that PNG file. I’ll save it to my desktop, and you’ll notice it’s saving as a regular .png file. If I preview it on my computer, you can see we’ve got this PNG file animating just like a GIF.

The added benefit is that PNG files have a much larger color range. With GIFs, you’re limited to 256 colors, which can look washed out. Animated PNG files give you all the benefits of a regular PNG file along with animation.

Another benefit of PNGs is transparency. For example, if we wanted to export these icons, we can highlight our icon layers, click on the “Create GIF” button again, and by default, it has a black background. That’s coming from the default setting down here. You can change it to different colors, but in this case, we want transparency. Enable the transparent background option, and you’ll notice the previews change to show transparency.

Click on the “Export APNG” button again, save the file (for example, icon.png), and open it. Now we’ve got a transparent animated PNG file exported directly from our Figma layers. This is great because it gives us sharp-edge transparency. With transparent GIFs, you often get artifacts around the transparent areas. The animated GIF format isn’t ideal for transparency, whereas PNG maintains color range and sharpness.

That’s basically it, I just wanted to run through that process for you. You can use this with your own files. As I said, there are a bunch of settings you can tweak down here. For example, if you want lossless quality, you can enable that. It won’t apply any compression, giving you the full color range for your exported animated PNG files.

If you turn that off and adjust the slider, that changes the quality level by limiting the number of colors included in the PNG. At lower quality, it might set it to 256 colors, the same as a GIF color range. If you increase it, the file size will grow, but you’ll also increase quality with more colors included.

Feel free to play around with all those settings, but we’ll leave it there for today. I hope that’s been helpful. If you’ve been wondering how to create an animated PNG file directly from Figma, you can do that using the Export APNG feature in the TinyImage Figma plugin.

Again, all you have to do is go to the image format settings, change it from GIF to animated PNG, and export your animations just like you would a GIF, but in an animated PNG format instead. That might be more useful depending on your use case.

Feel free to try out the animated PNG feature, and hopefully it helps with your workflows and the assets you’re exporting from Figma. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.