figma-implement-motion

Name: figma-implement-motion
Author: figma

1.8kstars163forks

How to install figma-implement-motion?

figma/mcp-server-guide/figma-implement-motion

$npx -y skills add figma/mcp-server-guide --skill figma-implement-motion

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Implement Motion
2
3	## Overview
4
5	This skill guides translation of Figma animations and transitions into runnable code (motion.dev, CSS keyframes, or framework-specific libraries).
6
7	Figma exposes motion through two tools:
8
9	- `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.
10	- `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.
11
12	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`.
13
14	## Skill Boundaries
15
16	- Use this skill when the deliverable is motion code in the user's repository.
17	- If the user asks to create/edit animations inside Figma itself, switch to [figma-use](../figma-use/SKILL.md) and follow that skill instead.
18	- This skill currently covers animations as emitted by `get_motion_context` (snippets plus fallback keyframe tracks, including preset-authored motion resolved into those forms). Broader interactive variant flows may still need product-specific state handling in code.
19
20	## Prerequisites
21
22	- Figma MCP server connected and accessible.
23	- Node ID parsed from the Figma URL the user provides. URL format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` — extract `fileKey` (the segment after `/design/`) and `nodeId` (the value of the `node-id` query parameter, e.g. `42-15`).
24	- Target codebase. Motion output format adapts to stack (see [Framework Recommendations](#framework-recommendations)).
25
26	## Tool Choice
27
28	For motion implementation, use both tools with distinct roles:
29
30	\| Situation \| Tool \| Why \|
31	\|---\|---\|---\|
32	\| Understanding static structure, assets, styles, Code Connect, or visual layout \| `get_design_context` \| Gives the component/page code reference and asset URLs you need to place animated nodes correctly. \|
33	\| Fetching animation data for any node \| `get_motion_context` \| Purpose-built for motion and the source of truth for timing, easing, snippets, and keyframes. \|
34	\| A node has motion markers (`data-motion-keys`, `data-motion-wrapper-for`) \| Markers for split placement, `get_motion_context` for values \| Split markers tell you which tracks go on which element; the keyframes/easing/timing and animated-node inventory come from `get_motion_context`. \|
35
36	`get_motion_context` accepts `recursive: true` (capped at 500 nodes) when you need descendants' motion in one call.
37
38	## Required Workflow
39
40	### Step 1: Confirm static design context is available
41
42	```
43	get_design_context(fileKey=":fileKey", nodeId="<node-id>")
44	```
45
46	If `get_design_context` has already been called for this node, reuse that output. If not, call it normally now.
47
48	Use it as the structure of record — hierarchy, sizing, styling, assets, Code Connect hints, screenshot context, and any motion placement markers it happens to include (Step 3). The animated-node inventory and animation values come from `get_motion_context` (Step 2).
49
50	### Step 2: Fetch authoritative motion data
51
52	```
53	get_motion_context(fileKey=":fileKey", nodeId="<node-id>", recursive=true)
54	```
55
56	Response shape (one entry per animated node):
57
58	- `codeSnippets` — pre-generated CSS `@keyframes` and motion.dev strings. Use these directly. Do not regenerate them from fallback track data.
59	- `keyframeBindings` — bound keyframe tracks, including preset-derived motion resolved into track data, included only as fallback data when both snippet formats are missing.
60	- `moti

People who liked this also viewed

6 picks

Type

figma-implement-motion

1.8kstars163forks

View on GitHub

How to install figma-implement-motion?

figma/mcp-server-guide/figma-implement-motion

$npx -y skills add figma/mcp-server-guide --skill figma-implement-motion

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implement Motion
2
3	## Overview
4
5	This skill guides translation of Figma animations and transitions into runnable code (motion.dev, CSS keyframes, or framework-specific libraries).
6
7	Figma exposes motion through two tools:
8
9	- `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.
10	- `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.
11
12	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`.
13
14	## Skill Boundaries
15
16	- Use this skill when the deliverable is motion code in the user's repository.
17	- If the user asks to create/edit animations inside Figma itself, switch to [figma-use](../figma-use/SKILL.md) and follow that skill instead.
18	- This skill currently covers animations as emitted by `get_motion_context` (snippets plus fallback keyframe tracks, including preset-authored motion resolved into those forms). Broader interactive variant flows may still need product-specific state handling in code.
19
20	## Prerequisites
21
22	- Figma MCP server connected and accessible.
23	- Node ID parsed from the Figma URL the user provides. URL format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` — extract `fileKey` (the segment after `/design/`) and `nodeId` (the value of the `node-id` query parameter, e.g. `42-15`).
24	- Target codebase. Motion output format adapts to stack (see [Framework Recommendations](#framework-recommendations)).
25
26	## Tool Choice
27
28	For motion implementation, use both tools with distinct roles:
29
30	\| Situation \| Tool \| Why \|
31	\|---\|---\|---\|
32	\| Understanding static structure, assets, styles, Code Connect, or visual layout \| `get_design_context` \| Gives the component/page code reference and asset URLs you need to place animated nodes correctly. \|
33	\| Fetching animation data for any node \| `get_motion_context` \| Purpose-built for motion and the source of truth for timing, easing, snippets, and keyframes. \|
34	\| A node has motion markers (`data-motion-keys`, `data-motion-wrapper-for`) \| Markers for split placement, `get_motion_context` for values \| Split markers tell you which tracks go on which element; the keyframes/easing/timing and animated-node inventory come from `get_motion_context`. \|
35
36	`get_motion_context` accepts `recursive: true` (capped at 500 nodes) when you need descendants' motion in one call.
37
38	## Required Workflow
39
40	### Step 1: Confirm static design context is available
41
42	```
43	get_design_context(fileKey=":fileKey", nodeId="<node-id>")
44	```
45
46	If `get_design_context` has already been called for this node, reuse that output. If not, call it normally now.
47
48	Use it as the structure of record — hierarchy, sizing, styling, assets, Code Connect hints, screenshot context, and any motion placement markers it happens to include (Step 3). The animated-node inventory and animation values come from `get_motion_context` (Step 2).
49
50	### Step 2: Fetch authoritative motion data
51
52	```
53	get_motion_context(fileKey=":fileKey", nodeId="<node-id>", recursive=true)
54	```
55
56	Response shape (one entry per animated node):
57
58	- `codeSnippets` — pre-generated CSS `@keyframes` and motion.dev strings. Use these directly. Do not regenerate them from fallback track data.
59	- `keyframeBindings` — bound keyframe tracks, including preset-derived motion resolved into track data, included only as fallback data when both snippet formats are missing.
60	- `moti

People who liked this also viewed

6 picks

Type