Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

figma-implement-motion — Codex skill: what it does, how to install

Translates Figma animations and transitions into production code using motion.dev or CSS keyframes. Useful when implementing motion for UI components from a design.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill figma-implement-motion -a codex
Open on GitHub

What figma-implement-motion does

This skill turns Figma transitions and animations into runnable repository code. The workflow coordinates two tools. Structural markup and styling come from get_design_context, while keyframe values, easing, and timing arrive via get_motion_context. A shared node identifier connects both outputs.

The tool extracts precomputed snippets for CSS @keyframes or motion.dev. When precomputed code is missing, it falls back to raw keyframe tracks. Coordinated multi-element timelines are resolved through cohort groupings rather than element ordering.

You need an active Figma MCP server and a Figma URL containing the target node identifier. Install this skill if you frequently convert animated UI prototypes into production components. Skip it if you need to build or modify animations inside Figma itself.

What it helps with

  • convert Figma transition keyframes into CSS animation rules
  • generate motion.dev components from animated Figma layers
  • coordinate timelines across multiple related UI elements
  • merge motion properties into existing component structure

Example prompts for the agent

  • Implement this motion from the Figma design
  • Add animation from Figma to this component
  • Translate the motion from this Figma URL into code

How to install figma-implement-motion

1Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-implement-motion -a codex

2Manually: put the files in place

.agents/skills/figma-implement-motion/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Similar

applicationinsights-web-ts Microsoft Set up Application Insights telemetry for browser apps, including page views, requests, and exceptions. Use it for RUM or to connect browser-side GenAI agent traces with backend spans. Claude Code GitHub Copilot 38installs podcast-generation microsoft Generates podcast-style audio narratives using Azure OpenAI GPT Realtime Mini over WebSocket. Integrates a FastAPI backend with a React audio player. Claude Code GitHub Copilot 29installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. Claude Code CX Codex Cursor +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. Claude Code CX Codex Cursor +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs

Questions about figma-implement-motion

How to install figma-implement-motion in Codex?

Run npx skills add openai/plugins --skill figma-implement-motion -a codex. It installs the skill file to .agents/skills/figma-implement-motion/SKILL.md.

What does figma-implement-motion do?

It converts Figma animations and transitions into production-ready code using CSS keyframes or motion.dev. The skill maps motion properties to component markup using node IDs.

What are the prerequisites for this skill?

You need an accessible Figma MCP server, a target project codebase, and a Figma design URL containing a valid node ID.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor