What the GIFvideo → gif, the way creatives need it
field guide

Motion on the Figma canvas, without wiring a prototype

A spinner that spins, a toast that slides, a toggle that flips: place a GIF as an image fill and the loop plays right where reviewers are already looking. Here's what Figma does with an animated GIF, and how to make one that doesn't fatten the file.

By the What the GIF team · Published · Updated

Drop a video, get a GIF free · frame-perfect · nothing leaves your browser Open the converter →

Add an animated GIF to a Figma frame

What the GIF does the whole thing locally, right in your browser: nothing here ever leaves your machine.

  1. Record or render the motion. Get the interaction as a short video clip, from a screen capture or straight out of your motion tool, with a moment of stillness on both ends for clean trimming.
  2. Convert it locally. Open What the GIF, drop the clip on the converter, and work in the tab. Nothing in the process transmits the recording anywhere.
  3. Crop at a fixed ratio. Choose 1:1 for a component-sized loop or 9:16 for a device flow and crop to the moving part, so the GIF arrives at proportions your frame expects.
  4. Set the loop point on stillness. Trim until the clip opens and closes on the same resting state. Stepping the cut a frame either way is what turns a visible snap into a clean repeat.
  5. Keep it light for the .fig file. Aim for 10 to 15 fps with the palette held between 64 and 128, reading the size estimate as you go. Most UI loops can come in under a few hundred KB.
  6. Drag it onto the frame. The GIF lands as an image fill and starts looping on the canvas, and it keeps playing in Present mode with no prototype wiring.

The canvas is frozen. A GIF isn't.

Figma's canvas shows stills. Smart Animate can fake a transition, but it lives behind a prototype's Play button in another window, and it only holds together while the trigger wiring does. Meanwhile the review happens on the canvas, where your loading state is a circle that never turns.

An animated GIF sidesteps the whole apparatus. Figma treats it as an image, and image fills with animation in them play directly on the canvas: no presentation mode, no setup on the viewer's end. Someone panning across the file sees the spinner turning at full speed next to your redlines. That's the entire trick, and it costs one dragged file.

The source is a short video: a screen capture of the real interaction, or a clip rendered out of After Effects or Principle. Capture it first (the screen capture guide covers grabbing UI cleanly), then convert the clip to a GIF and place it.

Where the animation plays, and where it won't

Worth being precise here, because the failure modes surprise people:

One quirk to file away: each placed GIF loops on its own timer, so duplicate loaders drift out of sync across a page. Harmless, occasionally maddening. Keep one instance per artboard if it bothers you.

Clip to canvas in five minutes

Say the component spec needs the button's loading-and-success animation living next to its redlines. The path:

  1. Capture generously. Record the interaction with a beat of stillness before and after, so the trim has clean frames to land on.
  2. Convert on your machine. Drop the clip into the tool. Processing is local, which means the unreleased screen in your capture stays between you and your GPU.
  3. Lock a ratio and crop. 1:1 fits a button or icon spec, 9:16 a full mobile flow. A locked crop lands in your frame at proportions you chose, not whatever the recording happened to be.
  4. Trim for the seam. Cut so the first and last frames sit on the same resting state. The playhead steps frame by frame, so you can put the loop point exactly on the moment of stillness and the repeat becomes invisible.
  5. Spend frames and colors deliberately. UI motion holds up at 10 to 15 fps, and flat interface color rarely needs more than 128 palette entries. The output estimate tells you what each choice costs before you export.
  6. Place it. Drag the GIF onto the frame. It lands as a fill, starts looping, and your component spec now demonstrates its own timing.

GIFs are the heaviest thing in your file. Budget accordingly.

Everything you place gets stored in the document, and a GIF outweighs the PNGs and vectors around it by an order of magnitude. A dozen careless loaders will make the editor sticky for whoever's on the oldest laptop. Keeping them light is the same set of moves every time:

Portfolio hero frame? Flip the trade: keep the frame rate up, keep the full palette, and let the readout tell you what the polish weighs.

FigJam boards, prototypes, and the handoff conversation

The same file keeps working past the mockup:

And since the conversion never touched a server, NDA'd flows and internal tooling stay internal, from capture to canvas. The Notion guide applies the same thinking to docs, if the demo needs to live in the wiki too.

Put the loop where the review happens

Convert a clip on your own machine, drop it on the frame, and let the spinner actually spin in front of the people deciding on it.

Open the converter

Keep going

Screen Recording to GIFscreen recording to gif
GIFs in Figma Slidesgif in figma slides
GIFs in Notiongif in notion
GIFs in Google Docsgif in google docs
Tutorial & How-To GIFshow to make a tutorial gif
YouTube to GIF, Privatelyyoutube to gif

Questions, answered

Will an animated GIF actually move on the canvas?
Yes, with two caveats. It loops live at normal zoom, and it keeps looping in Present mode. Zoom far out and Figma pauses GIF playback to save memory until you come back in. And anything exported (a PNG, or what Dev Mode shows) is a single flattened frame, since exports don't carry motion.
What's the difference between dropping the file and pasting into a fill?
Behavior-wise, none. Dragging the GIF onto a frame creates a rectangle with the GIF as its image fill; pasting it into an existing shape's fill puts the same animation inside your geometry. Both play on canvas and in Present mode, so pick whichever fits the layer structure.
How heavy is too heavy for a placed GIF?
Think in hundreds of KB, not MB. Each GIF is stored inside the file, so a page of chunky loops slows the editor for the whole team. A tight crop, frame rates down at 10 to 15, and a palette between 64 and 128 gets a typical UI loop well under half a MB with no visible cost.
When is a GIF the wrong choice versus Smart Animate?
Use Smart Animate when the motion has to respond, branching on clicks or connecting screens in a flow. Use a GIF when the motion is fixed: a loader, a toast, an easing spec. The GIF plays without any wiring and can't be broken by a renamed layer, which is exactly what a fixed loop wants.
Two copies of the same loop are out of sync. Did I break something?
No. Figma starts each placed GIF on its own clock, so duplicates drift apart over time. There's no sync control; if the mismatch shows in a side-by-side, keep a single instance per artboard or re-place both copies right before the review.
Can I convert a recording of an NDA'd design safely?
That's the point of doing it client-side. The clip is decoded and the GIF encoded by the page running on your machine, with no upload leg in the middle, so unreleased work never sits on a converter's server. The only copies are yours and the one you place in the file.