Figma Implement Motion
Translates Figma motion and animations into production-ready application code.
Install
npx skills add figma/mcp-server-guide --skill figma-implement-motion -g -a claude-code -y- Repository
- figma/mcp-server-guide2.1k
- Category
- Design
- Updated
- 7d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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`.
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:
get_motion_context, 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.get_design_context, 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 nodesdata-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. get_motion_context tells you which nodes animate and gives the keyframe values, easing, timing, and snippets. get_design_context tells you what those nodes look like and where they sit. For every node in get_motion_context.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.
