项目简介

Figma MCP 专业版是一个基于 Model Context Protocol (MCP) 的服务器，专门用于为AI（如大型语言模型）提供Figma设计文件的详细上下文和功能。它可以帮助AI理解设计结构、访问设计元素、处理设计师评论并下载相关资产，从而优化设计到代码的转换流程，支持React, Vue, Angular, Svelte, HTML/CSS/JS等多种前端框架。

主要功能点

结构化设计数据：提取AI易于理解的Figma设计层级、布局、样式（包括Auto Layout、填充、描边、效果、圆角等）信息，并进行AI优化处理。
智能评论匹配：将设计师在Figma中针对特定位置的评论智能匹配到对应的设计元素上，并转化为可操作的AI实现指令。
设计资产下载：自动扫描设计文件中标记为可导出的图像、图标等资产，使用Figma原有的导出设置批量下载到本地，同时生成一个整体参考图（reference.png）用于视觉校对。
框架优化上下文：根据AI指定的不同前端框架，提供针对性的设计数据处理和代码实现建议，适配不同技术栈的需求。
5步工作流程：支持一套推荐的、结构化的AI设计分析和代码生成流程：选择框架 → 获取设计数据 → 处理评论 → 下载资产 → 检查参考图。

安装步骤

确保你的系统中安装了 Node.js 和 npm。然后通过npm全局安装服务器：

npm install -g figma-mcp-pro

服务器配置

这个MCP服务器需要被MCP客户端（如兼容Claude的桌面应用或VS Code扩展）启动和管理。你需要在客户端的MCP配置中添加以下信息，告诉客户端如何启动 'figma-mcp-pro' 服务器并传递Figma API Key：

配置通常是一个JSON对象，类似于这样：

{
  "mcpServers": {
    "figma-mcp-pro": {
      "command": "npx",
      "args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
      "env": {
        "DEBUG": "true"
      }
    }
  }
}

在上述配置中：

'"command"': 是客户端需要执行的命令，这里使用 'npx' 来运行全局安装的包。
'"args"': 是传递给命令的参数数组。'"figma-mcp-pro@latest"' 指定了要运行的包名和版本，'"--figma-api-key"' 是服务器需要的参数，你需要将 '"your-api-key-here"' 替换为你自己的Figma个人访问令牌。
'"env"': 可选，设置环境变量，'"DEBUG": "true"' 可以在服务器运行时输出调试信息到客户端的日志窗口（通常是标准错误输出）。

获取Figma API Key：前往 Figma 账户设置，生成一个新的个人访问令牌并复制。请勿将你的API Key直接提交到任何公共仓库。

基本使用方法

启动配置好的MCP客户端后，AI代理就可以与Figma MCP服务器通信。AI会通过MCP协议调用服务器提供的工具来获取信息和执行操作。典型的使用流程遵循一个5步工作流程，AI代理会根据用户指令和设计分析的需要自动调用这些工具：

选择框架 ('show_frameworks'): AI调用此工具以获取支持的前端框架列表，并提示用户选择。
获取设计数据 ('get_figma_data'): AI调用此工具，提供Figma文件的URL和用户选择的框架，服务器返回优化的设计数据。
处理评论 ('process_design_comments'): AI调用此工具，提供Figma URL和框架，服务器分析并返回智能匹配的设计评论。
下载资产 ('download_design_assets'): AI调用此工具，提供Figma URL和本地保存路径，服务器下载资产和参考图。
检查参考 ('check_reference'): AI调用此工具，提供资产路径，服务器确认参考图可用并提供分析指导。

AI代理会根据用户指令和工作流程自动调用这些工具并利用返回的数据来生成代码或提供建议。

关键词

信息