AI导哈

设计与多媒体

figma-use-motion

figma/mcp-server-guide

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.

  • 1205 次安装
  • 2100 星标
  • 收录于

安装命令

npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-motion

SKILL.md

use_figma — Figma Plugin API Skill for Motion

Motion context for the use_figma MCP tool. figma-use 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 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:

相关 Skills

figma-usefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.设计与多媒体9278figma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.设计与多媒体6048implement-designfigma/mcp-server-guideTranslates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.设计与多媒体5859figma-generate-libraryfigma/mcp-server-guideBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.设计与多媒体4456figma-create-new-filefigma/mcp-server-guideAlways use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.设计与多媒体3530figma-code-connectfigma/mcp-server-guideCreates 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.设计与多媒体3477