Figma Motion
Figma Motion adds a native timeline to the Figma canvas so teams can animate in the same file as components, variables, and design work. Source: Figma Blog, https://www.figma.com/blog/introducing-figma-motion/, 2026-06-24
Routing Summary
Use Figma Motion as a design-handoff signal. When a task includes Figma timeline/keyframe artifacts, route implementation through design-engineering-polish, Design and Animation, and motion-framer so the shipped code preserves intent while still respecting product performance and reduced-motion rules.
What Changed
Motion mode sits alongside Design, Draw, and Dev modes. It adds a timeline where designers can scrub, drag layer timing, keyframe position/scale/rotation/opacity, enable auto-keyframing, apply preset animation styles, and comment on specific moments in time. Figma frames this as making motion a system capability rather than a specialist handoff. Source: Figma Blog, 2026-06-24
The reviewed launch video confirms this is an editor surface, not just a marketing renderer: the frames show the Figma UI, a bottom timeline, draggable keyframes, blue selection handles, and a scrubber moving through illustrated flower/poster animations. The tweet thumbnail is only an abstract green/white motion frame, so the video review matters for recognizing the product shape. Source: X/@figma, 2026-06-24; Source: local video artifact review, 2026-07-01
The HeyClicky demo shows the next interaction layer: voice prompts driving Figma Motion edits on the canvas. The contact sheet shows the user saying "heyclicky, can you teach me figma motion?", then asking to move a square; the Figma canvas exposes red motion paths, a target marker, and Motion properties while the object moves. Treat it as Agent GUIs evidence for design tools becoming agent workspaces, while Figma's own blog remains the product authority for Motion. Source: X/@heyclicky, 2026-06-26; Source: local video contact sheet, reviewed 2026-07-04
The launch tweet had 12,735 likes and 3,450 bookmarks at enrichment time. Figma's thread said the beta was available now. Versioning note: this is a hosted Figma beta, not a package-backed library; record beta status and official blog/thread evidence rather than a semver version. Source: X/@figma, 2026-06-24; raw/x-bookmarks/enriched/2069827742800253230.json
Kevin Relevance
This does not replace code-first motion for shipped products, but it changes the design collaboration surface. Agents should expect more motion specs to arrive as Figma timeline artifacts and translate those into Motion/GSAP/CSS implementations through design-engineering-polish and Design and Animation. Source: User bookmark, 2026-06-25
Timeline
- 2026-06-24 | Figma announced Motion live from Config 2026. Source: X/@figma, https://x.com/figma/status/2069827742800253230
- 2026-06-25 | Page created from Kevin's X bookmark sync. Source: raw/x-bookmarks/enriched/2069827742800253230.json
- 2026-07-01 | Deep-reviewed the local launch video frames: Motion presents a real timeline/keyframe editor inside Figma, including selected layers, timeline scrubber, and keyframe manipulation. Confirmed versioning as hosted beta status rather than package semver. Source: Figma blog, 2026-06-24; raw/x-bookmarks/enriched/2069827742800253230.json; local video artifact review, 2026-07-01
- 2026-07-04 | Deep-reviewed the HeyClicky voice-to-Figma-motion video. The artifact shows voice prompts manipulating a Figma Motion canvas through visible motion paths and target controls, so it belongs as design-tool agent-workspace evidence rather than a separate versioned Figma feature. Source: X/@heyclicky, 2026-06-26; Source: local video contact sheet, 2026-07-04