工具简介
Figma MCP Server 是 Figma 官方推出的 Model Context Protocol Server，将 Figma 接入 AI 工作流：一方面让 agent 获得生成代码所需的设计上下文，另一方面可把原生 Figma 内容写回画布。它提供两种连接方式——远程 MCP 服务器（推荐，直连 Figma 托管端点 https://mcp.figma.com/mcp，无需 Figma 桌面应用，功能最全）与桌面 MCP 服务器（通过 Figma 桌面应用本地运行，面向特定企业与组织需求，需 Professional/Education/Organization/Government/Enterprise 计划的 Dev 或 Full 席位）。核心能力包括：从选中的 Figma 框架生成代码（对产品团队构建/迭代功能流有用）；提取变量、组件与布局数据到 IDE（适合设计系统与组件化工作流）；把浏览器中实时 UI（生产/预发/localhost）转化为可编辑的设计图层（code-to-canvas，需远程服务器与支持的客户端）；检索 FigJam 与 Make 资源作为上下文；通过 Code Connect 复用真实组件以保持生成代码与代码库一致；借助 figma-spec skill 让 agent 读取/创建/更新团队规格（Figma Specs 开放测试）。向画布写入（write to canvas）需要远程服务器与 Full 席位，测试期免费、未来转为按量付费。该服务支持广泛的 MCP 客户端（Claude Code/Desktop、Cursor、VS Code、Codex、Copilot CLI、Gemini CLI、Augment、Warp、OpenCode、Replit、Kiro、Xcode 等），并通过 skills（社区与 Figma Community 提供的 agent 级指令）降低 agent 调用工具时的试错成本。
本页内容来自 KGABC 结构化知识库。带「未验证」标记的字段表示官方资料未明确说明，不等同于「不支持」。
核心功能
- 官方维护(Figma 官方 MCP Server)
- 远程端点(mcp.figma.com/mcp,无需桌面应用)
- 桌面端(经 Figma 桌面应用,本地运行)
- 基于选中框架生成代码
- 提取变量/组件/布局设计上下文
- 从实时 UI 生成设计(code-to-canvas)
- 写回画布(write to canvas,需 Full 席位)
- 检索 FigJam 与 Make 资源
- Code Connect 保持代码一致
- figma-spec 规格读写(开放测试)
- 多客户端支持(Claude/Cursor/VS Code/Codex/等)
- skills 工作流指令
- 字体访问(账户已上传字体)
适用场景
- 从 Figma 设计稿生成生产代码
- 设计系统/组件库一致性落地
- 将实时网页 UI 转为设计图层
- FigJam 流程图/架构图纳入开发
- 用 Code Connect 复用真实组件
- 团队规格(figma-spec)驱动开发
优势
- Figma 官方维护,与设计文件深度一致
- 远程端点开箱即用,无需本地部署
- 设计→代码双向(读取上下文+写回画布)
- 支持客户端广泛
- skills 降低 agent 试错成本
- Code Connect 保证代码一致性
技术能力
协议
信息来源与可信度
| 来源类型 | 依据 | 状态 |
|---|---|---|
| Figma MCP Server | Developer Docs https://developers.figma.com/docs/figma-mcp-server/ | Figma 官方开发者文档,说明定位、能力、两种连接方式与客户支持矩阵 | 已验证 |
| Introduction | Figma MCP Server https://developers.figma.com/docs/figma-mcp-server/ | 官方文档明确其为 MCP Server,远程端点 https://mcp.figma.com/mcp 与桌面端两种接入 | 已验证 |
| Write to canvas | Figma MCP Server https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/ | 文档详述 write to canvas、code-to-canvas、figma-spec 等能力及客户端支持矩阵 | 已验证 |
| Plans, access, and permissions https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/ | 官方说明远程服务器测试期免费、写画布未来转为按量付费,读取能力依赖 Figma 计划席位 | 已验证 |