How to export a Figma prototype to GIF

Published

A sequence of phone screens turning into a looping animated GIF

In short: Figma can’t export a prototype as an animated GIF. Its static export gives PNG, JPG, SVG or PDF, and an animated GIF placed in a design exports as a still image.[1][3] Figma Motion can export a GIF, but only of an animation built in Motion.[2] For a prototype flow, you record it while it plays, then save that recording as a GIF.

A GIF is still the easiest way to show an interaction in a README, a Notion page, a Jira ticket or a Slack thread. It plays by itself, loops, and nobody has to press play. So it’s frustrating that the one thing Figma doesn’t export is a GIF of your prototype.

What can Figma export as a GIF?

What you selectWhat Figma exports
A frame or layer (static design)PNG, JPG, SVG or PDF.[3] No GIF.
An animated GIF you placed in the designA still image. Animated GIFs only play in presentation view.[1]
A frame animated with Figma MotionMP4, WebM, GIF or SVG, from the Export section’s Animated tab. GIF has a Loop option.[2]
A prototype (screens, taps, transitions)Nothing. It only plays.[4]

So Motion is the only built-in way to a moving GIF, and it works on Motion animations, not on your prototype’s interactions.[2] If your Smart Animate lives in the prototype, it won’t come out.

How to get a GIF of a prototype flow

  1. Open the prototype with Present.[4]
  2. In the options menu, turn on Hide UI so the toolbar and footer stay out of the frame.[4]
  3. Press R to restart the flow from the start.[4]
  4. Record the screen while you click through. Our guide to exporting a Figma prototype to video covers the Mac and Windows recorders.
  5. Convert the video to a GIF and trim it so the loop starts and ends on the same screen.

Why GIFs from screen recordings look bad

Your Figma prototype as a video, without the cursor. Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.

Add to Chrome — it's free

Going further: one step from prototype to GIF

Proto to Video records the prototype you open with Present and exports it straight to GIF, MP4 or WebM. No cursor, no Figma interface, cropped to the frame. The GIF can go up to 800 px wide on the Pro plan (480 px on the free plan), which is plenty for a README or a ticket. And because it’s a Chrome extension, a new version is one shortcut away: Alt Shift R.

FAQ

Can you export a GIF from Figma?

Only from Figma Motion: a top-level frame animated in Motion can be exported to GIF from the Export section’s Animated tab. Static designs export to PNG, JPG, SVG or PDF, and an animated GIF placed in a design exports as a still image (Figma Learn).

Why is my GIF static when I export it from Figma?

Figma can only export animated GIFs as static images. Animated GIFs play in presentation view but appear as still images in the editor and in exports (Figma Learn, Use animated GIFs in prototypes).

How do I turn Smart Animate into a GIF?

Smart Animate is a prototype transition, so Figma doesn’t export it. Play the prototype with Present, record it, and save the recording as a GIF, or use a recorder that exports GIF directly.

Sources

  1. Figma Learn. Use animated GIFs in prototypes. https://help.figma.com/hc/en-us/articles/360041486873
  2. Figma Learn. Export animations from Figma. https://help.figma.com/hc/en-us/articles/41307983648407
  3. Figma Learn. Export formats and settings for static designs. https://help.figma.com/hc/en-us/articles/13402894554519
  4. Figma Learn. Play your prototypes. https://help.figma.com/hc/en-us/articles/360040318013

Your Figma prototype as a video, without the cursor

Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.

Add to Chrome — it's free

More articles