Figma MCP Server

创建和维护 Figma Code Connect 模板文件，将 Figma 组件映射到代码片段。当用户提及 Code Connect、Figma 组件映射、设计到代码的转换，或要求创建/更新 .figma.ts 或 .figma.js 文件时使用。

**强制性先决条件** — 在每次调用 `create_new_file` 工具之前，您必须调用此技能。切勿在未先加载此技能的情况下直接调用 `create_new_file`。每当用户想要一个空白的 Figma 文件时（新设计、FigJam 或 Slides 文件），或者在调用 `use_figma` 之前需要一个新文件时，请触发此操作。用法 — /figma-create-new-file [editorType] [fileName] （例如 /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review）

当任务涉及将应用程序页面、视图或多部分布局转换为 Figma 时，请与 figma-use 结合使用此技能。触发器：“写入 Figma”、“从代码创建到 Figma”、“推送到 Figma 页面”、“将此应用程序/页面构建到 Figma 中”、“创建屏幕”、“在 Figma 中构建登陆页面”、“更新 Figma 屏幕以匹配代码”、“将此模态/对话框/抽屉/面板转换为 Figma”。每当用户希望从代码或描述中构建或更新 Figma 中的完整页面、模态、对话框、抽屉、侧边栏、面板或任何复合多部分视图时，这都是首选工作流技能。它通过发现设计系统组件、变量和样式（来自 Code Connect 文件、现有屏幕和库搜索），然后导入它们并逐节组装视图，而不是使用硬编码值。

MANDATORY 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 中构建或更新专业级设计系统。当用户想要创建变量/令牌、构建组件库、设置主题（浅色/深色模式）、记录基础或协调代码和 Figma 之间的差距时使用。此技能教授要构建什么以及按什么顺序 — 它补充了教授如何调用插件 API 的 `figma-use` 技能。两个技能应一起加载。

**强制性先决条件** — 在每次调用 `use_figma` 工具之前，您**必须**调用此技能。切勿在未先加载此技能的情况下直接调用 `use_figma`。跳过它会导致常见且难以调试的故障。每当用户希望在 Figma 文件上下文中执行写入操作或需要 JavaScript 执行的唯一读取操作时触发 — 例如创建/编辑/删除节点、设置变量或令牌、构建组件和变体、修改自动布局或填充、将变量绑定到属性，或以编程方式检查文件结构。

此技能可帮助代理在 FigJam 上下文中 OOD 使用 Figma 的 use_figma MCP 工具。它可以与具有使用 use_figma 工具的基础知识的 figma-use 一起使用。