AI导哈

Figma MCP服务器

一个本地MCP服务器，为LLM客户端提供Figma相关工具，包括列出项目/文件、获取文件JSON或节点以及从Figma框架生成React+Vite前端。

  • by himanshupawar-10
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 himanshupawar-10/figma-mcp-server

使用说明

Figma MCP服务器

最小本地MCP（模型上下文协议）服务器，通过stdio向LLM客户端公开一些与Figma相关的工具（例如Claude Desktop、Cursor）。它可以列出项目/文件，获取文件JSON（或节点），并从Figma框架生成一个简单的React+Vite前端。

快速摘要

  • 通过stdio公开4个工具：
    • list_projects--列出Figma团队的项目
    • list_project_files——Figma项目中的列表文件
    • get_file--获取完整文件JSON或指定节点
    • generate_front——从Figma框架生成简单的React+Vite文件
  • 使用@modelcontextprotocol/sdk和Zod构建模式。
  • 旨在由通过stdio使用MCP的LLM客户端启动。

先决条件

  • Node.js 18+（本机获取）
  • npm
  • Figma个人访问令牌（可选用于发现；访问Figma的调用需要）
  • Claude Desktop/另一个支持MCP的客户端来生成进程

安装

从项目根：

npm install

可选择创建 .env:

FIGMA_TOKEN=your_figma_personal_access_token

运行（手动）

  • Windows cmd:
set FIGMA_TOKEN=your_token
node server.js
  • PowerShell：
$env:FIGMA_TOKEN = "your_token"
node server.js

注意：该过程将打开stdio传输并等待LLM客户端连接；它不公开HTTP端口。

配置克劳德桌面（stdio传输）

  1. 在Claude Desktop中添加新的MCP服务器条目。
  2. 程序/命令： node
  3. 论据： ["C:\\Users\\PawarMrHimanshuMahes\\Desktop\\Projects\\Figma_MCP\\server.js"]
  4. 工作目录： C:\Users\PawarMrHimanshuMahes\Desktop\Projects\Figma_MCP
  5. 确保客户端生成进程（stdio）。如果工具未出现：
    • 跑 node server.js 手动验证流程是否保持运行并且不会立即发出错误。
    • 确认节点>=18。
    • 确认路径/args正确，并在connect（）之前注册工具。

工具参考

  • list_项目

    • 输入：{team_id:string，token？：string}
    • 输出：｛项目：〔｛id:string，名称：string，last_modified？：string｝〕｝

  • list_project_files

    • 输入：｛project_id：字符串，令牌？：字符串｝
    • 输出：｛文件：〔｛id:string，名称：string，thumbnailUrl？：string｝〕｝

  • 获取文件

    • 输入：{file_id:string，node_ids？：string[]，token？：string}
    • 输出：{file:any}-完整的Figma文件JSON或节点响应

  • generate_front

    • 输入：｛file_id：字符串，node_id？：字符串，token？：字符串、framework？：“react”|“html”｝
    • 输出：{files:记录<string，string>}--生成的文件名→ 内容

处理程序同时返回以下两个值：

  • content:LLM视图的文本块
  • 结构化内容：客户端UI的验证数据

stdio/MCP握手是如何工作的（高级）

  • 客户端启动 node server.js 并打开stdio管道。
  • 服务器实例化McpServer，注册工具（使用Zod模式），然后调用 server.connect(transport).
  • 客户端发送初始化；服务器使用名称/版本和工具元数据进行应答。
  • 客户电话 tools/list 发现工具（从Zod模式序列化）。
  • 当调用工具时(tools/call)，SDK验证输入，运行处理程序，并返回内容+结构化内容。

重要提示：调用前注册工具 server.connect() 所以发现是有效的。

故障排除

  • 客户端“无工具”：
    • 确保输入/输出模式是Zod对象（z.object（…））——格式错误的模式会破坏发现。
    • 确认registerTool调用在之前运行 server.connect.
    • 跑 node server.js 手动捕获启动错误。
  • 图API错误：
    • 确保 FIGMA_TOKEN 有效且已传递（env或每次调用）。
    • 检查Figma速率限制和错误有效载荷。
  • 节点问题：
    • 使用节点18+，以便获取可用；该项目是ESM("type":"module" 在package.json中）。

开发说明

  • 密钥生成器助手位于 server.js:
    • figmaFetch、颜色工具、findFrameNode、nodeToJsx、traverseAndGenerate、reactAppFromFrame、从FigmaFile生成文件。
  • 为了提高保真度：
    • 扩展nodeToJsx以支持更多Figma节点类型、字体和布局行为。
    • 为处理程序入口/出口和Figma响应添加日志记录（控制台或记录器）。
  • 要在本地进行测试：通过支持MCP的客户端调用工具，或临时添加一个直接调用处理程序的CLI/测试工具。

运行生成的前端

  • generate_front返回文件（App.jsx、index.html、package.json等）。
  • 要运行生成的React应用程序：
    • 将文件保存到新目录，运行 npm install 然后 npm run dev （快）。
    • 打开开发URL（通常http://localhost:5173).

感兴趣的文件

  • server.js——MCP服务器+工具实现和Figma助手
  • package.json与package-lock.json的依赖关系
  • readme.md--此文档

许可证

麻省理工学院

相关 MCP