How to make a GIF in Figma

Partly. A regular frame or a prototype can't be exported as an animated GIF from the Export panel; the GIF option there only exists for animations built in Figma Motion, Figma's timeline and keyframe tool, which is in open beta. Animated GIFs you import also export as static images. Figma's help center is explicit about that last one.

So there are three practical routes, and the right one depends on how the animation was made:

• Separate frames (flipbook): loaders, icon sequences, step-by-step UI states, sprite-style illustrations. Use a frame-to-GIF plugin.
• Figma Motion timeline: keyframed motion on layers inside a frame. Use the native Animated export.
• A prototype with Smart Animate: transitions between screens. Record it, or use a plugin that exports prototypes.

This is the frame-by-frame approach, and it's the most predictable because every frame of the GIF is a frame you drew. Build the sequence first. Keep every frame the same size, change one thing between copies, and place them in one row. Name the layers 01, 02, 03 if the order might get shuffled.

Then you need a plugin that encodes selected frames into a GIF. Several exist. We built Flippy for exactly this job, so here's how it handles the steps that usually cause trouble:

• Order. When you select frames, Flippy loads them into a timeline strip and sorts them top to bottom, then left to right. If the order is wrong, drag thumbnails to reorder them.
• Timing. Each frame gets its own duration, from 10 ms to 10,000 ms, or you set a global delay for all frames at once. This is how you make a pause at the end of a sequence without duplicating frames.
• Preview. Play and pause, step frame by frame, and zoom from 10% to 1000% to check details before encoding.
• Export. Loop count (0 for infinite), quality preset, auto or custom width and height with an aspect lock, reverse playback, background color, and an optional transparent color.

Flippy works with frames, components, instances, groups, rectangles, ellipses, text and vectors, so you don't have to wrap every step in a frame. It's free to use at 1x and 2x scale with a watermark; premium removes the watermark and adds 3x and 4x export.

If you animated layers with keyframes or preset animations in Figma Motion, you don't need a plugin to get a GIF:

1. Select the top-level frame that holds the animated layers. Frames with animation show the Motion icon, and only frames placed directly on the canvas can be exported as animations.
2. In the Export section of the right sidebar, switch to the Animated tab.
3. Set Format to GIF, then choose the size and frame rate.
4. Set Loop to loop continuously or play once.
5. Click Export, then Download in the tab that opens.

Exports above 1920 × 1080 or above 30 FPS need a paid plan. Because Motion is in beta, menus and limits may change. For full-fidelity motion, MP4 or WebM from the same menu will look better than GIF, but GIF is still what works in email, Slack threads, GitHub READMEs and most docs tools.

Prototypes with Smart Animate transitions don't export directly. You have two options.

Screen record and convert. Open the prototype in presentation view and record it. On a Mac, Cmd + Shift + 5 opens the screenshot toolbar with a record option; on Windows, the Snipping Tool has a video mode. Trim the recording and convert it to GIF with a video-to-GIF converter. It's free and works for any prototype, but you'll fight cursor movement, dropped frames and timing that depends on your clicks.

Use a prototype export plugin. Protonix, from the team behind Aninix, exports Figma prototypes to GIF, video and Lottie without screen recording. Aninix itself is a full timeline animation plugin that exports GIF, MP4 and Lottie, which suits more complex motion than a flipbook. Both are heavier tools than you need for a five-frame loader, but worth trying for long transitions.

For an exported GIF, looping is a setting in the file itself. In Flippy, set Loop Count to 0 for infinite; in Figma Motion export, turn Loop on. Any browser, Slack or Notion will then play and repeat it automatically.

Inside a prototype, you can loop a sequence without a GIF. Add an After delay trigger to each frame that navigates to the next one with Smart Animate, and point the last frame back to the first. The prototype then plays by itself in presentation view and repeats.

To put an existing GIF into a design, drag the file onto the canvas or use it as an image fill on any shape, including text. The GIF shows as a static image in the editor and only animates in presentation view and the Figma mobile app. If you copy a GIF from a website, some browsers only copy a still frame, so save the file first and drag it in. Images wider or taller than 4096 px are scaled down.

• Hold the ends. Give the first and last frame two or three times the delay of the middle frames so viewers can read the start and end states.
• Keep frame counts low. A GIF stores every frame as a full image, so 12 well-timed frames often read better and weigh far less than 60.
• Avoid big gradients and photos. The GIF format allows 256 colors per frame, so soft gradients band. Flat UI and icons compress well.
• Transparency is on or off. GIF has no partial transparency, so soft shadows get a hard edge on transparent backgrounds. Set a background color that matches where the GIF will be shown.
• Export at 2x for screens. A 1x GIF looks soft on high-density displays. Use 2x and set a fixed width if the file gets heavy.

For more options, including video and Lottie tools, see our lists of GIF and animation plugins.

Full settings for Flippy are in the Flippy docs. If a GIF plugin won't open or can't load your frames, check Figma plugins not working.