Turn Figma frames or a prototype into an animated GIF, WebP, APNG, WebM or SVG

Goal

Show a flow, a loading state or a micro-interaction as one animated file you can put in a README, a ticket, a slide or a web page.

Before you start

• Two or more frames, or one frame that starts a prototype flow with Navigate to or Swap connections.

Steps

1. Select the frames Select the frames in the order they should play. Or select a single frame of a prototype: Optimizely follows its first Navigate or Swap connection from frame to frame and takes over the delays, transitions and easing.
2. Pick a format On the Animation tab, choose GIF, WebP, APNG, WebM or SVG (the default). Each format brings its own starting values, such as 12 fps for GIF and 30 fps for WebM.
3. Set the timing Under Defaults, choose a transition (Instant, Dissolve, Smart or Slide), a Curve, the Duration of each transition and a Pause on each frame. For pixel formats set FPS (1 to 60) and Per frame. Use a frame's ⚙ button to give just that frame its own settings.
4. Order and preview Drag frames by ⠿ to reorder them, or × to remove one. Play the preview, zoom with Ctrl/Cmd + and −, and click Lock so selecting other layers does not rebuild the animation.
5. Choose options Under Options: Loop (on), Boomerang to play back and forth, and Transparency. Under Optimize: Quality, Use every frame or every 2nd to 5th, and for GIF the Palette size. Pick a Scale from 0.5× to 4×.
6. Export Click Export Animation. The file downloads as animation-<number> with the format's extension; APNG files end in .png.

Tips

• WebM is recorded in real time, so the export takes about as long as the animation plays.
• Include Frames + JSON (pixel formats) adds a second ZIP with every frame as PNG and the timing as JSON.
• For SVG, First-Frame SVG + JSON downloads a package with the animation, a player page and a short guide.

Result

An animated file of your frames with the transitions and timing you set.

If something goes wrong

• "Select at least 2 frames to create an animation" Select two or more frames, or one frame that has prototype connections to the next screens.
• I got a ZIP of PNG frames instead of my animation. The encoder for that format failed in this browser, so Optimizely saved the frames as a PNG sequence instead. Try another format, such as GIF.
• The animation changed when I clicked on the canvas. The tab follows your selection. Click Lock in the preview before you select anything else.

Related guides

• EXPORT IMAGES
  Export Figma layers as WebP, PNG, JPG or SVG Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP.
  →