Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Export animated WebP images from Figma - This tutorial shows how to use the TinyImage Figma plugin to create an animation from selected Figma layers and export it as an Animated WebP file. It also demonstrates adjusting playback settings like delay, size, and quality before saving and viewing the final WebP in a browser.. Machine-readable page: /tinyimage/tutorials/export-animated-webp-images-from-figma.md.

Export animated WebP images from Figma

This tutorial shows how to use the TinyImage Figma plugin to create an animation from selected Figma layers and export it as an Animated WebP file. It also demonstrates adjusting playback settings like delay, size, and quality before saving and viewing the final WebP in a browser.

← Back to TinyImage Video Tutorials

What this video covers

This tutorial shows how to use the TinyImage Figma plugin to create an animation from selected Figma layers and export it as an Animated WebP file. It also demonstrates adjusting playback settings like delay, size, and quality before saving and viewing the final WebP in a browser.

Things you'll need

  • Figma
  • TinyImage Figma plugin

Steps

  1. Open Figma, go to the Resources icon, search for TinyImage, and run the TinyImage compressor plugin or add it to Saved plugins.
  2. Open TinyImage from Plugins > Saved plugins, then select the image layers you want to include in the animation.
  3. Click Create GIF to load the selected frames and review the animation settings such as frame order, duration, per-frame overrides, size, and quality.
  4. Change the export format from Animated GIF to Animated WebP.
  5. Click Export WebP, then save the file when prompted.
  6. Open a browser and drag the saved WebP file in to view the animated image.

Useful links