Video Tutorial: Create animated GIFs

This video walks through 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 walks through how to add fade/slide/wipe transition effects to animated GIF exports in Figma using the TinyImage plugin.

Open the GIF tab and select Create a GIF/MP4 to animate and export GIF or MP4 files from selected Figma layers.

Edit an existing GIF

Open the GIF tab and select GIF Editor. Select one Figma layer with an animated GIF fill to enable Use selected GIF layer, or choose Choose file from computer to load a GIF from your device.

Crop an existing GIF

After loading a GIF, select Crop. Draw or resize the crop area in the preview, or enter exact X, Y, width, and height values. You can move the selected area with the arrow keys for smaller adjustments.

Select Apply crop to crop every frame in the animation. Review the updated preview before exporting the edited GIF.

Get started with creating GIFs in Figma

Use the pages below to configure each part of your GIF creation workflow:

Select and Refresh GIF Frames

Select Figma layers to use as frames and refresh the frame set at any time

Order GIF Frames

Sort frames by custom order, layer order, rows, columns, or layer names

Configure GIF Timing and Playback

Control frame delays, loop counts, and preview playback interactions

Add GIF Frame Transitions

Apply and fine-tune fade, slide, and wipe transitions between frames

Set GIF Export Options

Configure dimensions, fit, quality, color palette handling, and dithering

Export and Download GIF Files

Render the final GIF and download it once processing is complete

Edit an Existing GIF

Resize, transform, crop, trim, retime, and optimize an existing GIF