Skip to content
Development
Skill

/figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node. Also covers working with

From plugin
figma
2.2k16 skills1 MCP

Claude Code

$ npx -y skills add figma/mcp-server-guide --skill figma-use-motion --agent claude-code

SKILL.md

figma-use-motion.SKILL.md
name: figma-use-motion
description: "Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node. Also covers working with custom animation styles."
disable-model-invocation: false

use_figma — Figma Plugin API Skill for Motion

Motion context for the `use_figma` MCP tool. [figma-use](../figma-use/SKILL.md) covers the foundational Plugin API rules — load both together.

**Always pass `skillNames: "figma-use-motion"` (comma-separated alongside `figma-use`) when calling `use_figma` for motion work.** Logging only.

Runtime Gating

Motion APIs might not be enabled for the calling user. When unavailable, every motion property and helper referenced in this skill throws `"<name>" is not a supported API`.

**Bail out fast on that error.** Do not retry; tell the user motion isn't enabled for them and stop. Otherwise you'll burn calls and confuse the user with repeated identical failures.

Custom animation styles might not be enabled even when other motion APIs work. See [motion-custom-styles.md](references/motion-custom-styles.md) for availability checks and fallback guidance.

3D keyframes require both motion and 3D transform APIs to be enabled. For animated tilt, card flips, depth, or perspective, and for rotation backwards, forwards, toward or away from the viewer (3D `TRANSFORM_3D_ROTATION_X` / `_Y`, not flat 2D `ROTATION`), load [3d-transforms.md](references/3d-transforms.md) and the `figma-3d-transforms` skill when available. Establish the static scene first; ordinary 2D motion does not require 3D access.

Discover `TextStagger` through `figma.motion.figmaAnimationStyles()` before applying it. If it is absent, explain that text motion is unavailable in this session; do not bypass discovery or silently substitute whole-layer motion.

When to use this skill

Load this skill whenever a `use_figma` task involves:

  • Adding, editing, or removing keyframes on a node (`manualKeyframeTracks`, `applyManualKeyframeTrack`, `removeManualKeyframeTrack`).
  • Animating fill or stroke colors over time.
  • Applying, editing, or removing animation styles (`applyAnimationStyle`, `removeAnimationStyle`, `animationStyles`).
  • Discovering, creating, editing, organizing, applying, or removing **local custom animation styles** — reusable named motion styles saved in the file (`figma.getLocalCustomAnimationStylesAsync`, `figma.createCustomAnimationStyle`).
  • Animating characters, words, lines, or paragraphs within editable text, including typewriter reveals and edits to the styles inside a text animation. Load [text-animation.md](references/text-animation.md) before writing.
  • Reading or writing timeline duration via `node.timelines` / `node.setTimelineDuration(id, seconds)`.
  • Choosing easing for any of the above.

Static design work (creating shapes, components, variables, layout) goes through [figma-use](../figma-use/SKILL.md) alone — this skill is only for the time dimension.

Exposed motion API surface

  • `node.manualKeyframeTracks` — read/write manual keyframes (including fill, stroke, and effect tracks).
  • `node.applyManualKeyframeTrack(field, track)` / `node.removeManualKeyframeTrack(field)` — add, replace, or remove one manual keyframe track without rewriting the whole object.
  • `node.animationStyles` — read/write animation-style metadata applied to a node.
  • `node.applyAnimationStyle(styleId, presetData?)` / `node.removeAnimationStyle(id)` — apply a discovered style and remove an applied style instance by its returned/read-back `id`.
  • `node.timelines` — read-only timeline list for the containing top-level frame, with durations in seconds.
  • `node.setTimelineDuration(id, durationSeconds)` — write the containing top-level frame timeline duration.
  • `node.animations` — read-only resolved keyframe data (currently manual tracks only — see [motion-patterns.md](references/motion-patterns.md)).
  • `figma.motion.figmaAnimationStyles()` — read-only list of Figma's first-party animation style definitions.
  • Various APIs available for working with custom animation styles, see [motion-custom-styles.md](references/motion-custom-styles.md)

Authoring custom `"figma:motion"` preset module source code is out of scope. Configuring the Position, Rotation, Scale, Opacity, and Blur styles inside a discovered `TextStagger` is supported; these are properties of one native preset, not new preset source code. If the request requires authoring a new preset module, explain that limitation; don't fabricate one.

Reference docs

Load these as needed based on what the task involves:

| Doc | When to load | What it covers | |-----|-------------|----------------| | [motion-patterns.md](references/motion-patterns.md) | Adding/editing motion animation | Manual keyframes, animated fills/strokes, applying animation styles, timeline duration | | [3d-transforms.md](references/3d-transforms.md) | Animating 3D tilt, flips, depth, or perspective | Separate 3D availability, static scene setup, gated keyframe fields | | [motion-custom-styles.md](references/motion-custom-styles.md) | Any work on reusable named motion styles | Discovering, creating, editing, organizing, applying, removing, and verifying local custom animation styles | | [text-animation.md](references/text-animation.md) | Creating/editing text reveals, typewriter effects, or staggered text | Native `TextStagger`, grouping/order, combined text styles, timing, edits/removal, preserving editable text | | [motion-easing.md](references/motion-easing.md) | Setting animation easing | Keyframe easing objects, custom cubic/spring, `HOLD`, applying easing inside an animation style |

Verifying the animation

`get_screenshot` shows only the timeline's **resting state**, never motion. To check motion, `export_video` and sample frames — but it renders server-side and is **slow and exp

Read more
@figma
Ships withfigma

The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files. For the complete set of Figma MCP server docs, see our developer documentation.

2.2k16 skills1 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
2.2k
Star history of figma/mcp-server-guide on GitHub, a chart by star-history.com

Other skills on figma.

figma-code-connect

figma-code-connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions…

@figma@figmaInstall Skill
figma-code-workflows

figma-code-workflows

Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code…

@figma@figmaInstall Skill
figma-create-new-file

figma-create-new-file

Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE…

@figma@figmaInstall Skill
figma-design-to-code

figma-design-to-code

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger…

@figma@figmaInstall Skill
figma-generate-design

figma-generate-design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into…

@figma@figmaInstall Skill
figma-generate-diagram

figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly…

@figma@figmaInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about figma-use-motion.

Which coding agents can use figma-use-motion?
figma-use-motion installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.