Figma Implement Motion
Translates Figma motion/animations into production code via get_motion_context + get_design_context—CSS keyframes, motion.dev, or framework libraries.
Overview
figma-implement-motion bridges designer-authored Figma animations to runnable app code. It uses `get_motion_context` as the source of truth for animated nodes, timings, and snippets, then merges those onto structure from `get_design_context`. Part of Figma’s official MCP skill set highlighted for Claude design workflows. Pair with LottieFiles Motion Design for principle/taste guidance when Figma didn't define the motion.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
Install from https://github.com/figma/mcp-server-guide skills. Requires Figma MCP. Use when implementing motion from a Figma URL/node—not for editing motion inside Figma (use figma-use for that).
How to use it
Provide a Figma URL with node-id for an animated component. Let the skill pull motion + design context, map node IDs, and emit framework-appropriate motion code. Verify in the browser (Playwright) and honor reduced-motion.
Example prompts
- “Implement the motion on this Figma node in our React button.”
- “Translate get_motion_context output for this hero into Framer Motion.”
- “Add animation from this Figma URL using CSS keyframes matching the file.”
- “Wire timeline cohorts from Figma into a sequenced dashboard entrance.”
Use cases and examples
- Implement designer-built Figma animations in React
- Port Figma transitions to CSS keyframes
- Sync motion.dev code with Figma timelines
- Handoff animated marketing components
- Avoid guessing easing/duration from screenshots
Prerequisites
- Figma MCP with get_motion_context / get_design_context
- Figma file containing authored motion
- Target codebase animation stack
- Browser verification path
Tips
- Motion context is authoritative—don't invent timings.
- Match node IDs carefully when design context splits wrappers.
- If editing motion inside Figma, switch to figma-use.
- Pair with Motion Design skill for taste when Figma motion is missing.