Agent skill · practicalswan
figma-implement-motion
Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions \"implement this motion\", \"add animation from Figma\", \"animate this component\", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.
What it needs
About 11k tokens when loaded.
What this skill does
Implement Motion Overview This skill guides translation of Figma animations and transitions into runnable code (motion.dev, CSS keyframes, or framework-specific libraries). Figma exposes motion through two tools: getmotioncontext — authoritative motion tool. Returns the complete animated-node inventory, precomputed code snippets (CSS @keyframes + motion.dev), fallback keyframe bindings when snippets are unavailable, and recursive timeline coordination hints (timelineCohorts). Source of truth for animation data and which node IDs animate. getdesigncontext — the design's structure: layout, sizing, assets, styling, Code Connect hints, screenshot context, and sometimes motion placement markers on animated elements (data-node-id, and on split nodes data-motion-keys / data-motion-wrapper-for / data-motion-transform-template). It may render an animated node as a plain element (div, p, span, etc.) or a motion element (motion.div); it does not inline the animation values. The two are linked by node id, and that's the whole workflow. getmotioncontext tells you which nodes animate and gives the keyframe values, easing, timing, and snippets. getdesigncontext tells you what those nodes look like and where they sit. For every node in getmotioncontext.nodes, find the matching data-node-id in design context and merge the motion into that structure — adding or wrapping a motion.{tag} when the structural element is plain. When design context has reused a Figma component, the motion node may also include fallbackNodeId; use it only as a fallback after trying the exact nodeId. Skill Boundaries Use this skill when the deliverable is motion code in the user's repository. If the user asks to create/edit animations inside Figma itself, switch to figma-use and follow that skill instead. This skill currently covers animations as emitted by getmotioncontext (snippets plus fallback keyframe tracks, including preset-authored motion resolved into those forms). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills practicalswan/figma-implement-motion