适合谁
- 已有付费 Figma 席位（Dev/Full）、需要频繁从设计生成代码的产品与前端团队
- 使用组件、变量与 Auto Layout 组织良好的设计系统团队
- 希望通过 Code Connect 保持生成代码与真实组件一致的团队
F
64FMRS · C
这是 Figma 官方维护的远程 MCP 服务器，通过 Streamable HTTP 将设计上下文接入 AI 编程工具，支持代码生成、变量提取及（远程）画布写入；使用前需 Figma 账号鉴权，读取类调用受计划/席位速率限制，且服务器为托管而非本地运行。
Figma MCP 服务器由 Figma 官方维护，通过远程 Streamable HTTP 连接（https://mcp.figma.com/mcp）将 Figma 设计文件中的结构化上下文（图层、变量、样式、布局）提供给 AI 编程助手，用于从选中的画板/图层生成代码、提取设计变量，并（通过远程服务器）在 Figma 画布上创建或修改原生内容。仓库本身是使用指南与配置说明，实际服务器由 Figma 托管运行。
工具能力
get_design_context
为所选 Figma 节点返回结构化的 React + Tailwind 表示，作为 AI 助手翻译成任意框架/代码风格的起点。
get_variable_defs
提取所选内容中使用的变量与样式（颜色、间距、字体等），便于生成代码直接引用设计令牌。
get_metadata
当响应过大或被截断时，返回高层节点结构图，便于只重新拉取所需的具体节点。
get_screenshot
获取所实现节点/变体的可视化截图参考，用于与代码实现比对。
安装接入
1) VS Code：运行「MCP: Add Server」→选择 HTTP→输入 https://mcp.figma.com/mcp →服务器 ID 填 figma，需已启用 GitHub Copilot。2) Cursor：在 Agent 聊天中运行 /add-plugin figma 安装 Figma 插件（含 MCP 配置与技能），或手动在 Settings→MCP 中添加 {"mcpServers":{"figma":{"url":"https://mcp.figma.com/mcp"}}}。3) Claude Code：运行 claude plugin install figma@claude-plugins-official，或手动执行 claude mcp add --transport http figma https://mcp.figma.com/mcp。4) Gemini CLI：运行 gemini extensions install https://github.com/figma/mcp-server-guide，安装后在 CLI 中执行 /mcp auth figma 完成 Figma 账号鉴权。5) 其他支持 Streamable HTTP 的编辑器可手动添加相同的 URL 配置。
claude_desktop_config.json
{"mcpServers": {"figma": {"url": "https://mcp.figma.com/mcp"}}}
选型与风险
不适合谁
- 需要离线或本地 stdio 方式运行 MCP 服务器的场景（该服务器仅提供远程 Streamable HTTP 连接）
- Starter 计划或 View/Collab 席位用户（每月工具调用次数被严格限制，仅 6 次）
- 需要服务器直接访问本地文件系统的场景（该服务器提供的是 Figma 设计数据，而非文件系统访问）
所需权限
- 需要 Figma 账号鉴权（如 Gemini CLI 中的 `/mcp auth figma`），以访问用户有权限的 Figma 文件
- 远程服务器可读取所选 Figma 节点的设计数据（图层、变量、样式、截图）
- 「写入画布」功能（仅远程服务器）可创建/修改 Figma 文件中的框架、组件、变量与 Auto Layout
风险与副作用
- 设计数据经由 Figma 官方远程服务器和你的 AI 客户端处理，属于第三方托管服务而非本地运行
- 写入画布功能可能在代理执行不当指令时意外修改真实 Figma 文件内容
- 读取类工具调用受 Figma 定价与席位限制的速率限制约束，Starter/View/Collab 用户每月仅 6 次，超限会导致工具不可用
- 「写入画布」当前处于 Beta 免费阶段，未来可能转为按使用量付费
常见排障
- 确认 MCP 客户端已正确配置远程 URL https://mcp.figma.com/mcp 且传输方式为 Streamable HTTP
- 在客户端中输入 `#get_design_context` 或类似方式确认工具已列出；若未列出，重启编辑器
- VS Code 用户需确认账号已启用 GitHub Copilot，否则 MCP 功能不可用
- 若返回内容过大或被截断，先调用 get_metadata 获取节点结构，再针对具体节点调用 get_design_context
- 若工具调用失败或受限，检查当前 Figma 账号计划与席位类型是否受月度速率限制影响
- Gemini CLI 用户需确认已执行 `/mcp auth figma` 完成鉴权
使用场景
选中 Figma 画板并生成对应的前端代码（如 React、SwiftUI 等，取决于提示词）
为设计系统/组件库工作流提取变量、组件与布局数据
结合 Code Connect 复用真实代码库中的组件以提升生成代码一致性
在支持的客户端中通过远程服务器直接创建/修改 Figma 画布内容（写入画布）
从网页生成 Figma 设计（逐步推出中）
支持客户端
VS Code完整支持
Cursor完整支持
Claude Code完整支持
Gemini CLI完整支持