AI导哈

Figma设计数据服务器

为AI编程工具提供Figma设计数据访问的Model Context Protocol服务器，优化AI对设计布局和样式信息的理解与处理。

  • by rlagudals95
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 rlagudals95/mcp_figma

使用说明

Figma MCP服务器

给 光标, 帆板运动, 克莱恩，和其他AI驱动的编码工具可以通过此访问您的Figma文件 模型上下文协议 服务器。

当Cursor可以访问Figma设计数据时 方式 比粘贴屏幕截图等替代方法更准确地进行一次拍摄设计。

快速开始，看看 配置 有关更多详细信息：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

演示视频

观看使用Figma设计数据在Cursor中构建UI的演示

运作原理

  1. 在代理模式下打开Cursor的编辑器。
  2. 将链接粘贴到Figma文件、框架或组。
  3. 让Cursor对Figma文件做一些事情，例如实现一个设计。
  4. Cursor将从Figma获取相关元数据，并使用它来编写代码。

此MCP服务器是专门为与Cursor一起使用而设计的。在回答上下文之前 图API，它简化和转换了响应，因此只向模型提供最相关的布局和样式信息。

减少提供给模型的上下文量有助于使AI更准确，响应更相关。

安装

使用NPM快速运行服务器

您可以快速运行服务器，而无需使用NPM安装或构建仓库：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

可以找到有关如何创建Figma API访问令牌的说明 这里.

使用配置文件的工具的JSON配置

许多工具，如Windsurf、Cline和 克劳德桌面 使用配置文件启动服务器。

这 figma-developer-mcp 可以通过在配置文件中添加以下内容来配置服务器：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

从本地源运行服务器

  1. 克隆 仓库
  2. 安装依赖项 pnpm install
  3. 复制 .env.example 向 .env 并填写您的 Figma API访问令牌。只需要读取权限。
  4. 使用以下命令运行服务器 pnpm run dev，以及来自 命令行参数 部分。

配置

服务器可以使用任一环境变量进行配置（通过 .env 文件）或命令行参数。命令行参数优先于环境变量。

环境变量

  • FIGMA_API_KEY：您的 Figma API访问令牌 （必填）
  • PORT：运行服务器的端口（默认值：3333）

命令行参数

  • --version：显示版本号
  • --figma-api-key：您的Figma API访问令牌
  • --port：运行服务器的端口
  • --stdio：在命令模式下运行服务器，而不是默认的HTTP/SSE
  • --help：显示帮助菜单

连接到游标

启动服务器

> npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# Initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages

将Cursor连接到MCP服务器

一旦服务器运行， 将Cursor连接到MCP服务器 在Cursor的设置中，在功能选项卡下。

连接服务器后，您可以在开始之前确认Cursor的连接有效。如果你得到一个绿点，工具出现了，你就可以走了！

开始在Figma设计中使用Composer

一旦连接了MCP服务器， 只要编辑器处于代理模式，您就可以开始使用Cursor的编辑器中的工具。

在编辑器中删除指向Figma文件的链接，并要求Cursor对其进行操作，应会自动触发 get_file 工具。

大多数Figma文件最终都很大，因此您可能希望链接到文件中的特定帧或组。选择单个元素后，您可以点击 CMD + L 将链接复制到元素。您还可以在上下文菜单中找到它：

一旦你有了一个特定元素的链接，你就可以把它放到编辑器中，让Cursor对它做点什么。

检查响应

要更容易地检查MCP服务器的响应，您可以运行 inspect 命令，它启动 @modelcontextprotocol/inspector 用于触发工具调用和查看响应的web UI：

pnpm inspect
# > figma-mcp@0.1.8 inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀

可用工具

服务器提供以下MCP工具：

get_figma_data

获取有关Figma文件或文件中特定节点的信息。

参数：

  • fileKey （string，必填）：要获取的Figma文件的密钥，通常在提供的URL中找到，如 figma.com/(file|design)/<fileKey>/...
  • nodeId （字符串，可选， 强烈推荐)：要获取的节点的ID，通常作为URL参数节点ID找到=
  • depth （数字，可选）：遍历节点树的深度为多少，仅在您通过聊天明确请求时使用

download_figma-images（正在进行中）

根据图像或图标节点的ID下载Figma文件中使用的SVG和PNG图像。

参数：

  • fileKey （string，必填）：包含节点的Figma文件的键
  • nodes （array，必填）：要作为图像获取的节点
    • nodeId （string，必填）：要获取的Figma图像节点的ID，格式为1234:5678
    • imageRef （string，可选）：如果节点有imageRef填充，则必须包含此变量。下载矢量SVG图像时留空。
    • fileName （string，必填）：保存提取文件的本地名称
  • localPath （string，必填）：项目中存储图像的目录的绝对路径。如果需要，自动创建目录。

Figma信息请求屏幕组件

该项目是基于Figma设计实现信息请求屏幕组件的React应用程序。

功能

  • 显示检查图标
  • 显示突出显示公司名称的提示信息

安装和运行

依赖性安装

# npm 사용
npm install

# 또는 pnpm 사용
pnpm install

运行开发服务器

# npm 사용
npm run dev:web

# 또는 pnpm 사용
pnpm dev:web

构建

# npm 사용
npm run build:web

# 또는 pnpm 사용
pnpm build:web

项目结构

public/
  ├── images/
  │   └── checkCircle.svg
  └── index.html
src/
  └── components/
      ├── App.tsx
      ├── CheckCircle.tsx
      ├── Header.tsx
      ├── InfoRequestScreen.tsx
      └── index.tsx

技术堆栈

  • 反应
  • TypeScript
  • 顺风CSS
  • Webpack

Figma设计

该项目基于以下Figma设计实现： Figma设计链接

相关 MCP