How to Add Animations to Web-Based Design Editors

To add animation in a web-based design editor, first decide where the motion needs to play: inside a clickable prototype, as an imported GIF or video preview, as a downloadable animated file, or on a live website. Those are different workflows. For a prototype transition, connect two states and configure the editor’s transition; for a file, use an animation export; for interactive website graphics, use an editor with a web runtime and coordinate implementation with the developer.

This guide covers those routes, with practical steps for Figma, Adobe Express, Canva, and Rive. Product controls and plan limits can change, so check the linked official documentation before publishing work that depends on them.

1. Choose the output before animating

Start with the destination, because a convincing prototype animation is not automatically a file you can embed on a website, and a GIF preview is not the same as interactive runtime motion.

Choose the workflow by where the animation needs to play: prototype, preview, export, or live website.

What you need	Use this route	Check before you start
Click, hover, or state-change demonstration	Connect prototype frames and configure a transition, such as Figma Smart Animate	How layers match, which triggers are supported, and whether the result works in presentation preview
Show an existing GIF or video in a prototype	Place the media in the design as a fill or supported media object	Whether playback is limited to presentation mode, file formats and sizes, and whether the editor can export the animation
Download an animated asset	Use the editor’s animated export, if available	Format, dimensions, frame rate, loop behavior, audio, transparency, and plan limits
Interactive animation on a live site	Use a tool and runtime built for web delivery, such as Rive’s editor-to-web workflow	Runtime behavior, web integration, and developer handoff

Write down the target format and playback context before you build. For example, a prototype can demonstrate a menu opening on click, while a looping GIF can show a short visual sequence but cannot respond to a visitor’s input.

2. Animate a prototype transition with Figma Smart Animate

Smart Animate works between connected prototype frames. It finds matching layers and animates differences between them, which is useful for transitions such as a toggle changing state, a card expanding, or content appearing. See Figma’s Smart Animate instructions for the current controls and supported behavior.

Consistent layer matching helps prototype transitions behave as intended; a clean page capture is a separate still-image workflow.

Create a source frame and a destination frame representing the before and after states.
Keep layers that should move or change consistently named and structured in both frames. Matching helps the editor determine which objects correspond.
Open the Prototype tab in the right sidebar. Select the source layer, group, or frame, then drag its connection node to the destination frame.
In the interaction settings, choose a trigger and action. Pick a trigger that matches the intended behavior, such as clicking a control to open a panel.
In the Animation section, select Smart animate. Adjust easing and duration to suit the movement.
Connect additional state frames if the interaction has more than two states.
Open the prototype in Presentation View and try the interaction. Check that the correct layers move, that the transition starts from the expected trigger, and that its timing feels clear.

Make layer matching predictable

If the wrong object moves, or an object suddenly appears instead of transitioning, inspect the layer names and frame structure first. Keep the animated object identifiable between states, and avoid duplicating or restructuring layers unnecessarily. Preview each path in Presentation View: the canvas alone does not show how an interactive transition behaves.

Smart Animate is suited to demonstrating interface state changes. It does not, by itself, deliver a production animation runtime for your website. For a live implementation, treat the prototype as a design reference and agree with the developer on the browser behavior, assets, and interaction states.

3. Place an existing GIF or video in a prototype

Use imported media when you already have an animation and want to show it in a prototype. In Figma, an imported GIF can play in Presentation View, while the editor canvas displays it as a static image. Figma’s documented GIF workflow does not export an animated GIF. Read the current GIF guidance before planning an export workflow around it.

For video, Figma documents MP4 or MOV with H.264, and WebM with VP8, up to 300 MB. Its help page says video upload is available to paid Education, Professional, Organization, and Enterprise team files, and video is not currently supported in its mobile app. These are product-specific limits that may change; check Figma’s video instructions for the current eligibility and format rules.

Import or drag the GIF or supported video into the design.
Place it in the target frame, crop or size it for the intended preview, and add prototype navigation around it if needed.
Open the design in Presentation View and confirm playback there. Do not use the static canvas preview as proof that the animation is broken.
Test on the device or browser where the prototype will be reviewed, especially if mobile playback matters.

Choose this route for previewing media inside a prototype. If the deliverable is an animated file, use an export workflow that explicitly produces that format.

4. Export an animation from an editor

Figma Motion

Figma’s documentation describes Motion as open beta. The documented export formats are MP4, WebM, GIF, and SVG. To export, select a top-level frame containing animated layers, open the Export panel, switch the export type to Animated, choose a format, set dimensions and frame rate, and configure format-specific options such as MP4/WebM quality or GIF looping where applicable. Then export and download the file. The documentation says output above 1920 × 1080 or above 30 FPS is available on paid plans. Confirm current beta and plan behavior in Figma’s animation export documentation before relying on those limits.

Pick the format based on where the file will go. GIF is widely previewable but has no audio and can become large for detailed motion. MP4 is suitable for video playback, but check transparency needs. WebM and SVG have different playback and compatibility considerations; verify them in the target environment rather than assuming an export will behave identically everywhere.

Adobe Express and Canva

Adobe Express documents GIF export for animations up to 60 seconds. Its GIF output does not support audio or transparent backgrounds. This is a practical route for a short animated preview when those constraints are acceptable; consult the Adobe Express GIF export guide for the current steps.

Canva documents adding Lottie animations from its gallery and downloading designs as GIF or MP4. This can suit a design that starts with a supplied Lottie asset and needs a rendered file. See Canva’s Lottie feature page for its documented workflow.

Export checklist

Confirm the receiving platform accepts the chosen format.
Set the dimensions for the actual placement; oversized files take longer to transfer and may be needlessly heavy.
Check frame rate and duration. Higher values can increase file size and rendering demands.
Verify whether the destination needs transparency, audio, or a looping animation.
Open the exported file in the target browser or app and inspect the first frame, last frame, loop, and visual quality.

5. Build interactive motion for a live website

For graphics that respond to interaction on a website, use an editor and delivery approach designed for a runtime, rather than expecting a static export or prototype transition to become interactive automatically. Rive describes an editor-to-web-runtime workflow for website graphics. Review its website workflow, then coordinate the implementation method, states, and integration with the person responsible for the site.

List the states the graphic needs, such as idle, hover, selected, or loading.
Design and preview those states in the animation editor.
Identify how the web page will trigger state changes and what the runtime needs from the surrounding application.
Hand off the asset and interaction requirements together. Include expected behavior for touch, keyboard, reduced motion, and loading failures where relevant to the project.
Test the integrated result in the target browsers and at the actual rendered size.

Keep motion purposeful: it should communicate a state change or guide attention. For production, the website team should decide how animation behaves when a user prefers reduced motion and how the interface remains understandable if the asset fails to load. Those are implementation requirements to settle with the team, not export settings that a design editor can guarantee.

6. Choose a route by comparing the actual deliverable

Need	Documented route	Decision points
Clickable state transition	Figma Smart Animate between frames	Triggers, matching layers, easing, duration, prototype preview
Existing GIF preview	Figma GIF as a fill	Presentation playback; static canvas; this route does not export an animated GIF
Rendered animation file	Figma Motion	MP4, WebM, GIF, or SVG; dimensions, frame rate, file size, current plan limits
Short GIF from an animation	Adobe Express	Up to 60 seconds; no audio or transparency in GIF output
Gallery Lottie in a design	Canva	Gallery asset, light editing, GIF or MP4 download
Interactive website graphic	Rive editor and web runtime workflow	Runtime behavior, site integration, developer handoff

These are not interchangeable products or universal rankings. Choose based on the specific output and documented workflow, then verify current plan and format details with the vendor.

7. Capture the finished design or prototype for review

A still screenshot is useful when reviewing a particular frame, comparing two states, documenting a prototype screen, or attaching a visual to a bug report. It cannot show the motion itself, so pair it with a prototype link or an exported animation when timing and interaction matter.

For a one-off capture, open the relevant page in a browser and use the browser’s screenshot tools or an operating-system capture command. For repeatable captures in review automation, a browser automation library can open a page and save a screenshot. The exact code depends on your chosen language and browser tooling; this animation workflow does not require a screenshot API. If your team uses a screenshot service, check that the page is accessible to it and that you are capturing the intended state.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF; its documentation covers the API and options. For example, this cURL request captures a page as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Equivalent Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Equivalent Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers say the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000, and every feature is on every plan.

8. Troubleshoot common animation problems

Problem	Likely cause	Fix
Smart Animate moves the wrong layer or snaps abruptly	Layers do not match consistently between frames, or frame structure changed	Compare layer names and hierarchy across states, then preview the transition in Presentation View
A GIF looks frozen in the editor	Figma’s canvas shows the GIF as static	Open the prototype in Presentation View to check playback
Cannot download an animated GIF from the GIF prototype workflow	That workflow previews a GIF in a prototype; it does not export an animated GIF	Use an editor export workflow that explicitly supports animated output
Video upload is unavailable	The file type, size, team plan, or mobile context may not meet Figma’s documented conditions	Check current format and team eligibility in Figma’s video guidance; use a supported browser workflow
Export option or resolution is unavailable	Feature status, plan limits, or current beta behavior may constrain export	Check the current Figma Motion documentation and reduce dimensions or frame rate if appropriate
GIF has no sound or transparent background	Adobe Express documents those limitations for GIF output	Choose a format and export path that supports the required audio or transparency
Website animation does not respond to clicks	A rendered file or prototype preview was used where a web runtime integration is needed	Use an interactive runtime workflow and wire its states to the website’s events
Animation looks soft or is too large	Export dimensions, frame rate, duration, or quality do not fit the placement	Match output dimensions to display size, trim unnecessary duration, and compare supported formats

9. Performance, reliability, and cost considerations

For exported assets, dimensions, frame rate, duration, and format affect file weight and playback. Export only at the size needed by the destination, then inspect the result on a realistic connection and device. If a file must loop or preserve transparency, verify those requirements early because the chosen format may constrain them.

For prototype reviews, reliability means checking the actual presentation path and the devices reviewers will use. For live graphics, coordinate runtime loading and fallback behavior with the web team. Keep a still or simpler presentation available where the animation is essential to understanding the interface.

Cost and access depend on the editor’s current plan and feature eligibility. The documented examples include Figma video upload restrictions by team type and Figma Motion export limits by plan; Adobe Express and Canva feature availability can also change. Confirm current plan terms before selecting a workflow for a team deliverable. Do not assume that an editor’s prototype playback feature also includes export or production runtime hosting.

10. Frequently asked questions

Can I animate a design without coding?

Yes. Prototype transitions and animated exports can be authored in visual editors. A live interactive website still needs an integration path and implementation decisions for the runtime.

Will a prototype animation play in a screenshot?

A screenshot captures a still state. It can document one frame, but it does not preserve timing, playback, or interaction.

Should I use GIF for every short animation?

No. Choose based on the destination’s support for format, audio, transparency, interaction, file size, and looping. A GIF preview and an interactive website graphic serve different purposes.

Can I use Figma Motion for production exports?

Figma documents Motion as open beta and lists several export formats. Review its current help page and plan details before depending on it for a production deliverable.