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: Edit animated GIFs directly in Figma - Learn how to edit, combine, trim, transform, and export animated GIFs directly in Figma with TinyImage.. Machine-readable page: /tinyimage/tutorials/edit-animated-gifs-directly-in-figma.md.

Edit animated GIFs directly in Figma

Learn how to edit, combine, trim, transform, and export animated GIFs directly in Figma with TinyImage.

← Back to TinyImage Video Tutorials

What this video covers

This tutorial shows how to load an existing animated GIF into TinyImage, edit its size, crop, playback, timing, loop, and compression settings, then insert it into Figma or export it. It also covers combining a GIF with static Figma layers, merging multiple GIFs in one frame, and exporting an edited GIF as an MP4 video.

Things you'll need

  • A Figma file containing an animated GIF layer, or an animated GIF file saved on your computer
  • The TinyImage Figma plugin

Steps

  1. Open TinyImage in your Figma file, select the GIF tab, and open GIF Editor.
  2. Load an animated GIF from a selected Figma layer or choose a GIF file from your computer.
  3. Resize, rotate, flip, crop, trim, reverse, or retime the GIF, then choose its loop and compression settings.
  4. Select Insert GIF to Figma to add the edited animation to the current page, or export it to your computer as an animated GIF or MP4 video.
  5. To add static Figma content, place the GIF and other layers inside one frame, select the parent frame, and load it into GIF Editor.
  6. To combine multiple GIFs, place them in the same frame with any other layers, then load and edit the parent frame.

Useful links