# Figma Implement Motion

Translates Figma motion and animations into production-ready application code.

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-implement-motion -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-implement-motion -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-implement-motion -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-implement-motion -g -a gemini-cli -y`

## Description

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`.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 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.** `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`.

## Skill Boundaries

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-implement-motion/SKILL.md