Creating animated GIFs from layers

Create animated GIFs from selected Figma layers with ordering, timing, and export settings.

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.

Export a Figma Motion animation ​

Open the GIF tab and select Figma Motion Export to export animations created with Figma Motion. TinyImage lists Motion frames from the current selection or page with a static thumbnail beside each checkbox; choose one or more, then set their shared output format, frame rate, size, loop, GIF compression, colour palette, or video quality.

TinyImage uses Figma's native Motion renderer for GIF, MP4, and WebM output. It can also convert the native GIF render to APNG or Animated WebP without adding another lossy compression pass.

Select Export to render the checked animations. One checked animation downloads directly, while multiple animations download together in one ZIP.

Learn how to review and export Figma Motion animations

Edit an existing GIF or MP4 ​

Open the GIF tab and select GIF Editor. Select one Figma layer with an animated GIF fill to enable Use selected Figma GIF layer, or choose Choose from computer to load a GIF or MP4 from your device. You can edit the frames and download the result as GIF, APNG, Animated WebP, MP4, or WebM.

GIF Editor image exports prioritize fidelity: APNG and Animated WebP use lossless encoding, and unchanged GIF downloads or Figma inserts reuse the original GIF data without recompression.

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 or MP4

Resize, transform, crop, trim, retime, and export an existing GIF or MP4

Export Figma Motion

Review and export a native Figma Motion animation in five formats