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.
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# 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. 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 | | [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 …
More from figma
- Figma Code ConnectCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
- Figma Create New File**MANDATORY prerequisite** â you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file â a new design, FigJam, or Slides file â or when you need a fresh file before calling `use_figma`. Usage â /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
- Figma Design To Code**MANDATORY prerequisite** â you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
- Figma Generate DesignTranslate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
- Figma Generate DiagramMANDATORY prerequisite â load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram â flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
- Figma Generate LibraryBuild or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.