---
url: "/tinyimage/tutorials/add-transition-effects-to-animated-gif-exports-in-figma.md"
description: "This tutorial shows how to use the TinyImage Figma plugin to export animated GIFs or MP4 files with transition effects between frames. It demonstrates selecting frames, choosing effects like fade, slide, and wipe, adjusting transition speed, and exporting the final file."
---

# Add transition effects to animated GIF exports in Figma

> This tutorial shows how to use the TinyImage Figma plugin to export animated GIFs or MP4 files with transition effects between frames. It demonstrates selecting frames, choosing effects like fade, slide, and wipe, adjusting transition speed, and exporting the final file.

[← Back to TinyImage Video Tutorials](/tinyimage/tutorials)

[Embedded media](https://www.youtube-nocookie.com/embed/GwfVWRAS1qk)

## What this video covers

This tutorial shows how to use the TinyImage Figma plugin to export animated GIFs or MP4 files with transition effects between frames. It demonstrates selecting frames, choosing effects like fade, slide, and wipe, adjusting transition speed, and exporting the final file.

## Things you'll need

- A Figma file with the frames or layers you want to animate.
- The TinyImage Figma plugin installed or saved in Figma.

## Steps

1. Open a Figma file, find TinyImage under Resources > Plugins, and run or save the plugin from the plugins list.
2. Select the Figma frames you want to animate, open the **GIF** tab, then choose the **Create a GIF/MP4** subtab to load them into the preview.
3. In the preview, open the effect dropdown that defaults to instant and pick a transition such as fade, slide, or wipe.
4. Adjust the transition speed with the slider if you want the effect to play faster or slower.
5. Click export GIF to render and save the animation as an animated GIF, or click export MP4 to render it as a video file.
6. Open the exported file to verify the transition effect and looping animation.

## Useful links

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=GwfVWRAS1qk)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-transition-effects-to-animated-gif-exports-in-figma-using-tiny-image)
- [Read: GIF Frame Transitions](/tinyimage/gif-transitions)
- [Next: Export WebM videos from your Figma layers](/tinyimage/tutorials/export-webm-videos-from-your-figma-layers)
- [Open TinyImage in the Figma Community](https://www.figma.com/community/plugin/789009980664807964)