YouTube

Figma Motion Is Absolutely Nuts

2026-06-25 · 15:16 UTC ·DesignCode ·1 min read

Brief

Figma Motion (demo/tutorial by DesignCode, 2026-06-25) walks through adding editable motion into Figma: a timeline with auto keyframes, agent-driven animations, and programmable shaders. The host demos basic transforms, staggered logo/text animation, shader effects (data/lens distortion), animating shader settings, building a Matrix-style shader with an agent, and using screenshots/HTML for context while noting current agent limitations.

Why it matters

Figma Motion (DesignCode, published 2026-06-25) adds a timeline with auto keyframes and an agent tab so designers can animate position, scale, size, opacity, and color directly in Figma (demoed at 02:02–02:40 and 03:33–04:54).

Key details

  • Built-in shaders and effects include data distortion and lens distortion; the video shows animating shader parameters over time and creating a custom Matrix-style shader with an agent (01:42, 06:49, 08:16, 09:09).
  • Agents can animate existing designs and help generate landing pages and site handoff workflows, but the presenter notes specific agent errors in timing/placement (05:06); screenshots and HTML can be used as contextual input.
Source evidence

Figma Motion is the first Figma feature in a while that made me genuinely excited to open the canvas again.

For the past year and a half, I have been so deep in AI builders that drawing rectangles in Figma felt slow. But Figma Motion changes the feeling because motion, shaders, agents, auto keyframes, and effects can now live much closer to the design itself.

In this video I test:

  • basic position, scale, size, opacity, and color animation
  • auto keyframes on the Figma Motion timeline
  • using the agent tab to animate an existing design
  • staggered logo and text animation
  • where the agent still gets things wrong
  • shader effects like data distortion and lens distortion
  • animating shader settings over time
  • creating a custom Matrix-style shader with an agent
  • using screenshots and HTML as context
  • how this fits with Figma agents, generated landing pages, auto layout, and site handoff

The big idea:

Figma Motion is not exciting because it can move a circle.

It is exciting because it makes motion editable where the design already lives.

Resources mentioned:
Figma Motion: https://www.figma.com/blog/introducing-figma-motion/
Screen Recording Used: https://dreamcut.ai

Chapters:
00:00 Why Figma Motion feels exciting
00:46 Shaders and effects inside Figma Motion
01:42 Animation can exist closer to code
02:02 Animate a simple object
02:40 Auto keyframes and timeline edits
03:33 Bring in an existing design
04:17 Use the agent tab to animate
04:54 Staggered logo and text animation
05:06 What the agent gets wrong
05:35 Shader effects on a real UI
06:03 Animate shader settings
06:49 Search plugins and shaders from the toolbox
07:19 Tune lens distortion keyframes
08:16 Create a custom shader with an agent
08:38 Use screenshots and HTML for shader context
09:09 Animate the custom Matrix shader
09:34 Figma agents and generated landing pages
09:59 Auto layout, sites, and where this goes next

Channel: DesignCode
Published: 2026-06-25
Video URL: https://www.youtube.com/watch?v=TGaCyIak-Ak