# Animation with Figma AI - Figma Tutorial For New AI Era

[youtube.com/watch?v=uEJIbPQYq18](https://www.youtube.com/watch?v=uEJIbPQYq18) · id `uEJIbPQYq18` · 13:27 · reviewed 02-08-2026

## The process he shows

1. **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.
2. **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.
3. **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.
4. **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.
5. **Dark mode magic plugin.** Flips a design to dark in one click; he fixes the leftovers by hand (white text, 15% opacity circles).
6. **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.
7. **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".
8. **Prototype tab.** A light/dark switcher: on click → navigate to an instant between two frames.
9. **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.