Figma has no native GIF export. Here's how to export a GIF from a Figma prototype or Smart Animate flow in seconds using the free Motionly plugin — no screen recording, correct timing, small file size.
Table of Contents
Short answer: Figma cannot export GIFs on its own — there is no GIF option in its export panel, only PNG, JPG, SVG, and PDF. To export a GIF from a Figma prototype, run the free Motionly plugin: select the first frame of your Smart Animate (or Motion-tab) flow, choose GIF as the format, set FPS and scale, and export. Motionly re-renders each frame of the animation directly, so the GIF matches your prototype’s timing exactly.
Does Figma Have GIF Export?
No. Open Figma’s export panel on any frame and you’ll only ever see PNG, JPG, SVG, and PDF — all static formats. Smart Animate transitions and Motion-tab animations play back in Present mode, but Figma gives you no way to save that playback as a GIF, or any video format, from inside the app.
To turn a Figma animation into a GIF you need one of two routes:
- A community plugin that reads the transition and renders it directly to GIF (the clean way — correct timing, no artifacts).
- A screen recording, converted to GIF afterward with a separate tool (the lossy way — cursor, dropped frames, an extra conversion step, usually a much bigger file).
This guide covers the plugin route with Motionly, which is free and built for exactly this.
How to Export a GIF From Figma
Step 1 — Open your prototype
Open the Figma file with your animation. If it’s Smart Animate, make sure the frames are connected with prototype interactions and the transition type is Smart Animate (not Instant or Dissolve). If it’s a Motion-tab animation, make sure your keyframes are set on the timeline.
Step 2 — Select the first frame of the flow
Click the starting frame — the one the interaction fires from. Motionly walks the prototype graph (or the Motion-tab timeline) from your selection, so starting at the first frame captures the whole sequence.
Step 3 — Run Motionly
Plugins → Motionly (or right-click → Plugins). Motionly opens and reads the animation attached to your selection.
Step 4 — Choose GIF and your settings
- Format: GIF (also available: MP4, MOV, WebM)
- FPS: 24 is usually plenty for UI motion and keeps file size down. Use 30 only if the motion is fast.
- Scale: 1× is fine for most GIFs — GIF is a heavier format per pixel than video, so don’t default to 2× unless you need it.
Step 5 — Export and download
Click Export. Motionly renders each frame of the animation on the server and downloads a real .gif — no cursor, no recording, and the duration matches your prototype to the frame.
Plugin vs. Screen Recording: Which Is Better for GIFs?
| Motionly plugin | Screen recording → GIF converter | |
|---|---|---|
| Quality | Frame-perfect, exact colors | Compression, dropped frames, extra conversion loss |
| Timing | Exact prototype timing | Depends on your machine and recorder |
| Cursor / UI | None | Cursor, browser chrome to crop |
| File size | Controlled — set FPS/scale before export | Often bloated, needs a second tool to compress |
| Setup | Install once, 20 seconds per export | Recorder + GIF converter + cropping |
| Cost | Free (10 / 30 days), Pro unlimited | Free–paid recorder + converter |
For a GIF you’re dropping into a README, a Slack message, a Dribbble shot, or a design handoff doc, the plugin route produces a smaller, cleaner file with none of the extra steps.
Other Ways People Search for This
The workflow above is the same regardless of the phrasing:
- Figma export GIF / Figma GIF export → select first frame, Motionly, pick GIF.
- Figma to GIF converter → no separate converter needed — Motionly exports GIF directly.
- Export Figma prototype as animated GIF → same steps as above.
- Export Figma animation to GIF free → the free plan handles it; see limits below.
- Export Smart Animate to GIF → this is exactly what Motionly’s GIF format does.
- Figma Motion tab to GIF → Motionly reads Motion-tab keyframes too, not just Smart Animate.
If you actually need MP4 instead of GIF (better quality, smaller file, no color limits), see the companion guide: How to Export Smart Animate From Figma to MP4.
Is It Free?
Yes. Motionly exports GIF, WebM, and MP4 for free. The free plan allows 10 exports in any rolling 30-day window (not a calendar-month reset — each export frees up a slot exactly 30 days after you use it).
Pro removes the limit entirely:
- India: a low monthly subscription.
- Everywhere else: a one-time one-month pass — pay once with PayPal or card, buy again whenever you need another month. No auto-renew.
See current pricing on the Motionly Pro page.
Troubleshooting
My GIF file size is too large
GIF has no real compression per frame, so size scales fast with FPS, scale, and duration. Drop FPS to 24 (or lower for slow, simple motion), set scale to 1×, and trim the animation to the shortest loop that reads clearly. If size still matters more than universal GIF compatibility, export WebM or MP4 instead — both are dramatically smaller for the same visual quality.
The colors look banded or dithered
GIF is limited to a 256-color palette per frame, so smooth gradients and photographic imagery can band or dither. This is a property of the GIF format itself, not a Motionly bug. If your design relies on smooth gradients or photos, export WebM or MP4 instead — both support full color.
The animation looks choppy
Choppiness usually means the FPS is too low for the speed of the motion, or the original transition duration is very short. Try exporting at 30fps instead of 24fps for fast micro-interactions, and confirm your prototype’s transition duration and easing look smooth in Figma’s own Present mode first — Motionly renders exactly what the prototype defines.
Only part of my flow exported
Motionly starts from the frame you have selected. Select the first frame of the sequence, not a middle one, before running the plugin.
The animation looks static / nothing moves
The transition between your frames is probably set to Instant or Dissolve instead of Smart Animate. Open the prototype connection and switch it to Smart Animate, then match layer names between frames so Figma knows what to tween.
FAQ
How do I export a GIF from Figma? Figma has no native GIF export. Use the Motionly plugin: select the first frame of your flow, run Motionly, choose GIF, set FPS and scale, and export.
Does Figma have GIF export? No. Figma’s export panel only produces PNG, JPG, SVG, and PDF. Animated GIF needs a plugin or a screen recording plus a separate converter.
How do I turn a Figma prototype into a GIF? Select the first frame, run Motionly from the Plugins menu, choose GIF, set FPS and scale, and click Export.
Why is my Figma GIF export so large? GIF has no per-frame compression. Lower the FPS, use 1× scale, and keep the clip short — or export WebM/MP4 for a much smaller file at the same quality.
Can I export a Motion tab animation as a GIF? Yes — Motionly reads both Smart Animate prototype transitions and Motion-tab keyframe animations.
Is it free? Yes — 10 exports per rolling 30 days on the free plan. Pro removes the limit.
Written by the team behind Motionly, the Figma plugin for exporting Smart Animate and Motion-tab animations to GIF, WebM, and MP4.