# Turn Figma frames or a prototype into an animated GIF, WebP, APNG, WebM or SVG > Select frames in order, or one frame of a prototype flow, choose a format and transitions on the Animation tab, preview it, and export. ## 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. ![Animation tab: three hero slides as frames, SVG chosen among GIF, WebP, APNG, WebM and SVG, and a preview.](https://raiken.io/assets/kb/optimizely/optimizely-create-animation/animation.png) 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. ![Defaults for a GIF: Instant, Dissolve, Smart and Slide, 12 FPS, 80 ms per frame, Smoothness 1 and the Ease curve.](https://raiken.io/assets/kb/optimizely/optimizely-create-animation/animation-gif.png) 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×. ![Options with Loop, Boomerang, Transparency and Include Frames + JSON; Optimize with Quality 80%, Use every and Palette.](https://raiken.io/assets/kb/optimizely/optimizely-create-animation/animation-options.png) 6. **Export** Click Export Animation. The file downloads as animation- 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. ## Common questions ### Can I export a Figma prototype as a GIF? Yes. Select the first frame of the flow, choose GIF and click Export Animation. Optimizely follows the first connection of each frame, so branches beyond the first are left out. ### Which format should I choose? GIF plays everywhere but has at most 256 colors. WebP and APNG keep full color and transparency. WebM is a video file for the web. SVG stays sharp at any size and uses Smart Animate. ### Does the preview speed change the export? No. The 0.5×, 0.25× and 0.1× speeds are only for checking the preview. ## Related guides - [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP. --- Source: https://raiken.io/kb/optimizely/optimizely-create-animation (Optimizely help centre). Reviewed: 2026-10-30.