figma-implement-motion Skill
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 getdesigncontext returns motion da Published by openai in plugins.
What is figma-implement-motion Skill?
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 getdesigncontext returns motion da Published by openai in plugins. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Data analysis
- Design and media
- Data analysis use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use figma-implement-motion Skill
- Use it for data analysis.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/plugins
- Skill file: plugins/figma/skills/figma-implement-motion/SKILL.md
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 getdesigncontext returns motion da
Skill instructions
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
Explore related resources
Frequently asked questions
What is figma-implement-motion?
figma-implement-motion is a open-source AI agent skill with Copy skill directory. Translates Figma motion and animations into production-ready application code.
Who is figma-implement-motion best for?
figma-implement-motion is best for reusing agent instructions, scripts, and references, data analysis workflows, design and media workflows.
How do I install figma-implement-motion?
Install or run figma-implement-motion using Copy skill directory. Check figma-implement-motion for the latest setup command.
Is figma-implement-motion actively maintained?
figma-implement-motion may need a closer maintenance check before production use.
Auto-fetched from GitHub.
