mcp-server-guide

mcp-server-guide

Figma MCP 服务器指南,帮助 AI 从 Figma 设计文件中获取信息并生成代码。

MCP设计与多媒体
形态
MCP
传输协议
http
是否开源
GitHub Stars
★ 1.7k
收录来源
mcp-github

能力说明

Figma MCP 服务器将 Figma 直接引入工作流,为从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文。该能力允许 AI 代理读取和写入 Figma 文件,提取设计上下文,并生成代码。适用于需要将设计与开发紧密结合的产品团队。接入方式包括 VS Code、Cursor 和 Claude Code 等客户端。

能力点

  • 写入画布(远程服务器)
  • 从选中的框架生成代码
  • 提取设计上下文
  • 使用 Code Connect 智能编码
  • 从网页生成 Figma 设计

适用场景

产品团队构建新流程或迭代应用功能设计系统和组件化工作流保持生成代码与代码库一致从网页捕获并转换为 Figma 设计

接入方式

依赖:API KeyNode 环境
在 VS Code 中通过 `MCP:Add Server` 添加 Figma MCP 服务器;在 Cursor 中通过 `/add-plugin figma` 安装插件;在 Claude Code 中通过 `claude plugin install figma@claude-plugins-official` 安装插件。

以上信息由 AI 基于公开资料整理,可能存在偏差,以来源为准。

常见问题

如何连接到 Figma MCP 服务器?

根据使用的客户端(如 VS Code、Cursor 或 Claude Code),按照相应文档进行配置。

是否有速率限制?

有,具体取决于用户的 Figma 计划类型。

相关 Skill