Video Tutorial: Create animated GIFs
This video tutorial is a complete step-by-step guide showing you how to animate and export GIFs from your own designs directly from Figma using the TinyImage plugin.
Video Tutorial: Add transition effects to animated GIF exports in Figma
This video tutorial is a complete step-by-step guide showing you how to add fade/slide/wipe transition effects to animated GIF exports in Figma using the TinyImage plugin.
The GIF feature in TinyImage works by taking selected layers in your Figma page and using each layer as an individual frame in the animation.
Selecting Layers to Use as Frames
To get started creating a GIF:
- Click Create GIF in the TinyImage header.
- Select layers in your Figma page to use as animation frames.
- Click Use Selected Layers to load them into the preview.
You can pre-select layers before clicking Create GIF and TinyImage will load them automatically.
Refreshing Selected Layers
If you want to replace the current frame set:
- Select a new set of layers in Figma.
- Click Refresh next to the Selected Layers label in the GIF toolbar.
TinyImage will reload the preview using the new selection.