How to Export a GIF from Figma: A Simple Guide

Open the Export panel in Figma, click the format dropdown, and you get PNG, JPG, SVG, PDF. No GIF. It isn’t a hidden setting or a paid feature, it just was never built.

So getting a looping file out of Figma means rendering the frames in Figma and assembling them somewhere else. A Community plugin usually does the assembling. A screen recorder and a converter will also do it. Most designers run into this the moment a prototype is finished and they want to drop the transition into Slack without asking a developer to open the file.

One thing worth knowing before any of it: GIF has been capped at an 8-bit, 256-color palette per frame since Steve Wilhite built the format at CompuServe in 1987, according to the Federal Agencies Digitization Guidelines Initiative. No plugin setting gets around that.

Does Figma Export GIF Files Natively?

No, and it never has. Select a frame, open the Export section in the right sidebar, and the dropdown holds four static formats.

• PNG is lossless and keeps a transparent background through a 32-bit alpha channel
• JPG gives you a smaller file with lossy compression, and no transparency at all
• SVG stays scalable, though Figma locks SVG exports to 1x scale only
• PDF merges multiple frames into one document, also locked to 1x

That list comes straight from Figma’s own export documentation. None of those formats loop, and none of them play.

For a still image, a logo or an icon, the regular panel is completely fine, and the steps for getting a layout out as a clean PDF take the same three clicks as any other format.

A GIF is a sequence playing on a loop. Figma’s export panel only understands single static assets, so there’s nothing in it that could handle a sequence in the first place.

How Figma Turns a Prototype Into a GIF

It doesn’t. Figma renders individual frames, and a plugin or an outside tool stitches those frames into motion.

The frames themselves come from one of two setups. Smart Animate calculates the transition between two frames for you, matching layers by name, which is where most of the useful in-between motion comes from. The other option is building each frame by hand and letting the tool play them back in order, no interpolation involved. Slower, more predictable.

Nearly everything that ends up as a GIF starts in the prototype tab, where flows and interactions get wired together before anything renders.

Setting those connections up properly in Figma’s prototyping tools matters more than people expect. A broken flow produces a broken export nine times out of ten, and the plugin rarely tells you why.

Adding motion to layers through Figma’s animation controls is what generates the in-between frames a GIF plugin later captures, instead of you drawing every position by hand.

Auto Layout and interactive components both affect how clean the render turns out. A frame built with rigid, non-responsive spacing tends to snap awkwardly partway through the transition, and that snap shows up in the finished GIF as a small jump nobody asked for.

Figma Plugins for GIF Export

The rendering itself happens in a plugin. Animated GIF Maker, Figmotion and LottieFiles for Figma all live in Figma Community, they pull from different animation sources, and they hand you very different amounts of control over frame rate, loop count and output resolution.

Animated GIF Maker

Most people reach for this one first, mostly because there is nothing to configure past frame rate and loop.

Select the area holding both frames on the canvas, open the plugin from the Actions menu, adjust the settings in the dialog, hit download. That’s the whole thing.

It does one job and doesn’t pretend to be a motion design tool, which is honestly the appeal.

Figmotion

Figmotion is where you go when the timing actually matters. Select a frame and the plugin panel opens on top of the canvas, so you’re not bouncing between windows.

• Pick the type of motion you want, position, rotation or transparency, and set a duration
• Timing runs on cubic-bezier easing rather than a flat linear speed, which is the difference between motion that feels designed and motion that feels like a slideshow

After rendering, Figmotion exports the animation as a GIF, and separately as CSS or JSON if a developer wants the raw motion data instead of a flattened image. That second output is the real reason teams keep it installed even when they already have something simpler for GIFs.

LottieFiles for Figma

LottieFiles’ own documentation, last updated in January 2026, lists GIF, MP4, WebM and MOV among the direct download formats, alongside dotLottie and Lottie JSON.

The plugin also opens onto a library of more than 100,000 free Lottie animations and another 400,000 premium ones, according to LottieFiles.

For plain GIF export it’s overbuilt. Worth installing when the same animation also has to ship as a lightweight Lottie file for developers, and total overkill if all you need is a one-off loop for a Slack message.

How to Export a GIF Using a Figma Plugin

Once you know where the settings live, the plugin route is quick. Get the frames ready first, then let the plugin do the rendering.

1. Build or select the frames, or the prototype flow, that make up the animation
2. Group them if the plugin expects a single selection rather than scattered layers
3. Open the plugin from the Actions menu or the Plugins panel
4. Set frame rate, loop behavior and export scale inside the plugin dialog
5. Render, preview, then download the GIF file

Failed renders almost always trace back to ungrouped layers the plugin can’t read as one animated unit, or prototype connections that were never actually wired between frames, leaving Smart Animate nothing to interpolate.

Neither is a bug. Both are setup steps that got skipped in a hurry.

How to Export a GIF by Recording and Converting a Figma Prototype

You can skip plugins altogether. Record the prototype, convert the video, done.

It takes longer per export. It also needs zero installs, which matters on a locked-down work machine where the plugin browser is disabled.

1. Open the prototype in present mode and trigger the interaction you want captured
2. Record the screen with QuickTime Player on macOS or the built-in Game Bar on Windows, keeping the capture window tight around the frame
3. Trim the clip down to just the animation, no dead air at the start or end
4. Convert the video with ezgif.com, CloudConvert, or ffmpeg if you’re comfortable at a command line
5. Check the output file size before sharing it

For one quick export this beats installing and learning a plugin. For anything you’ll be doing over and over, the plugin wins on time within about a week.

Figma GIF Export Settings for Resolution and Scale

Figma’s export panel offers 1x, 2x and 3x scale multipliers, plus a field for a custom value, per the platform’s own export settings.

That scale sets the resolution of the PNG frames a GIF plugin later pulls in, so it’s worth deciding before you open the plugin at all.

Match it to where the GIF is actually going. For a Slack message or a chat thread, 1x is plenty and keeps the file small. For a full-screen deck or a client presentation, 2x holds up far better on a large display.

Past that, higher scale mostly just inflates file size. GIF compression doesn’t reward extra pixels the way a video codec does.

The custom scale field exists for the rare case where neither preset fits, say a specific pixel width for an embed.

GIF Color and File Size Limits

Whichever plugin produced it, every GIF sits under the same ceiling the format has carried since launch: 256 colors per frame on an 8-bit indexed palette, with LZW compression shrinking the file by finding repeating pixel patterns instead of throwing away color data.

Those figures come from the Federal Agencies Digitization Guidelines Initiative, and they haven’t moved since the original specification.

Dithering is the workaround, and most plugins apply it automatically. It scatters pixels of different colors next to each other to fake a gradient the palette can’t represent. On soft UI shadows it works well enough that nobody notices. On a wide color sweep, like a photo-heavy hero background, it gets visibly grainy.

File size climbs fast once a GIF pushes past a few megabytes, and that’s usually where messaging apps start compressing the upload or refusing it.

A flat-color UI mockup with two or three states exports small and clean. The same length of animation built from a gradient-heavy screen can land five or six times heavier, purely because of how much dithering the encoder has to do per frame.

When Figma GIF Export Doesn’t Work

Exports fail in fairly predictable ways. Long prototypes run the tab out of memory, artwork that needs soft transparency comes out with hard edges, and plenty of files render perfectly then turn out to be too heavy to send anywhere.

Long prototypes and frame limits

A ten-screen flow stitched together with heavy Smart Animate transitions is exactly where a plugin starts to choke.

Figma’s community support team points to an active memory limit of roughly 2GB per browser tab, and a long animated flow eats into that quickly. As it fills, the plugin either hangs mid-render or the tab locks up before any file exists.

• Split a long flow into two or three shorter GIFs rather than one continuous export
• Close other open Figma tabs and switch off shadows, blurs and multiplayer cursors before rendering. Moving to the desktop app won’t help here, since it’s built on the same engine and hits the same roughly 2GB per-tab ceiling
• Strip hidden layers and unused pages out of the file before you open the plugin

Transparency and blending issues

GIF transparency is on or off. A pixel is fully see-through or fully opaque, with no partial value in between.

That’s why soft drop shadows, blurred edges and gradient overlays sitting on a photo background all come out with a hard, jagged edge once exported.

The fix lives outside GIF entirely. No plugin setting cleans up an edge the format itself can’t describe.

Oversized output files

A GIF that plays perfectly smooth inside Figma can still be too heavy to actually send.

Flat UI colors, two or three states, a loop under a couple of seconds: that renders small. Long flows, gradients, photo-realistic mockups, anything running past a few seconds of unique motion: that renders heavy.

Cutting frames or shortening the loop usually solves it. When neither is an option, sending the live flow instead, using a Figma prototype link a reviewer can open without their own account, sidesteps the file completely.

Where to Use a Figma GIF After Export

Chat tools want it small, GIPHY and Dribbble both publish hard numbers, and a handoff doc barely cares.

Dropping a GIF into a Slack thread or a design review channel is still the fastest way to get quick feedback on a transition. GIPHY suits anything meant to travel further than one team, since a public link embeds almost anywhere.

For a client meeting, walking through the real flow inside Figma’s own presentation tools usually lands better than a pre-rendered GIF, because the client can ask to see a different path on the spot.

A handoff doc or a slide deck is the least fussy destination of the lot. Neither GIPHY’s 100MB ceiling nor Dribbble’s 10MB one comes into play once the file is just sitting inside a document rather than being uploaded to a platform.

Dribbble works best as a portfolio piece once a project ships, not as an everyday review loop.

FAQ on How To Export Gif From Figma

How do you reduce the file size of an exported GIF?

Lower the frame rate first. Fewer frames per second cuts weight fastest.

After that, drop the export scale to 1x instead of 2x or 3x, trim duplicate frames, and reduce the color palette in the plugin settings before you render.

Why does an exported GIF look blurry or choppy?

Blurry usually means the export scale was left at 1x on a high-density screen.

Choppy comes from a low frame rate, or a Smart Animate transition with too few in-between frames for Auto Layout to interpolate smoothly.

Does GIF export require a paid Figma plan?

No. Animated GIF Maker, Figmotion and LottieFiles for Figma all sit in Figma Community, and any account with edit access on the free plan can install and run them. The plugins cost nothing to use.

Can you export a GIF from the Figma mobile app?

Not directly. The mobile app on iOS and Android handles viewing, commenting and basic prototype playback, but it doesn’t run plugins. Building and exporting the GIF still needs the desktop app or a browser.

Which Figma GIF Export Method Should You Try First?

Start with a plugin. Animated GIF Maker or Figmotion turns a selected frame into a rendered file in under a minute, skipping the extra conversion pass a screen recording always needs afterward.

Roughly in order of how specialized you need to get: Animated GIF Maker for a one-off share, Figmotion once timing and easing need hand tuning, LottieFiles for Figma when the same motion also ships as a developer asset.

The catch is that all three mean installing something before any file exists, which is the one step a screen recording avoids by using tools already sitting on the machine.

And between GIPHY’s 100MB ceiling and the 256-color palette a GIF is stuck with per frame, it’s dimension and frame count that fill an upload budget, not color depth.

Once the loop plays clean, the obvious next move is turning the same Figma layout into working code rather than a static asset.