Animation with Figma AI - Figma Tutorial For New AI Era

youtube.com/watch?v=uEJIbPQYq18 · id uEJIbPQYq18 · 13:27 · reviewed 02-08-2026

The process he shows

Figma AI animation. Select a frame, click the animation icon, type "animate this" — Figma builds the animation itself. Duration is editable; parallax comes by asking; a placed video can replace a still and play behind the reveal. He is on the 20 USD plan.
Export as video. The animated frame exports straight from Figma as a video file — a client-ready clip with no code and no video software.
Figma community as a design mine. Click any element → "find similar designs" → community → insert complete site files. He combines the hero of one file with the second section of another. Fonts, sizes and colors arrive already decided.
Image tools inside Figma. Remove background in one click; "edit with prompt" runs an image model (he picks ChatGPT image) — for example turning a day photo into night.
Dark mode magic plugin. Flips a design to dark in one click; he fixes the leftovers by hand (white text, 15% opacity circles).
Figma Make. Paste the design, say "build out this website", pick the model (he tries Gemini Flash) — the design becomes working code, publishable or exportable to React, GitHub, Vercel, Lovable.
Animate in Make by naming layers. "When the user scrolls, move image four up to cover the text, then reveal this section" — pasting the next section as an image. He admits the result from raw layers "probably not be that great".
Prototype tab. A light/dark switcher: on click → navigate to an instant between two frames.
Shaders. Tools → shader effects — halftone, warp, gradient bloom and more, applied to images, text, even video, with live preview.

What is genuinely new for us

Figma community as a second source next to Pinterest. Not a flat image: complete layouts with fonts and sizes pre-built, insertable and combinable before any prompt is written. A stronger starting point than a mood picture.
Animation exported as video. The fastest zero-code way to a moving concept clip — could serve a concept note before we build anything.
Shader effects. A quick filter to turn a plain still into a stylized asset without leaving the design file.

What we skip and why

Figma Make as a build path. It gives code, but with less control than Claude on our own files, and he concedes the scroll build from raw layers comes out weak. Our HTML-first approach keeps the real page: weight budgets, posters, reduced-motion, our design tokens. Verdict: nothing here beats HTML-first. Figma stays a source of references and a quick preview toy, never the build.
Figma's animation player as the product. The motion lives inside Figma; our motion lives on the page the citizen opens.
Dark mode magic. Our doctrine is light theme for documents; the dark cinematic canvas is a per-page decision, not a plugin flip.
ChatGPT image editing inside Figma. Held cheaper through Google AI Studio and Higgsfield.

Fold-in candidates

Figma community as an inspiration source. List it beside Pinterest with the honest-use rules (reference, never republish) — home: 9 - System/ui-ux/inspiration/references.md.
Concept clip from Figma. One line: an AI-animated frame exports as video, useful for a pre-build concept preview — home: 9 - System/ui-ux/motion/motion-design.md §5.

Deserves a full reference page with frames: no

This is our only window into Figma AI animation, and the window shows enough: it changes nothing in our build path. HTML-first stands. The digest is the record; no frames needed.