AI导哈

Figma设计数据服务器

为AI编程工具提供Figma设计数据访问和CSS提取功能的服务器，支持设计令牌生成和多格式导出。

  • by j4ckp0t85
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 j4ckp0t85/figma-context-mcp-tokens

使用说明

Figma MCP服务器

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

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

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

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

增强的CSS提取

MCP服务器的增强版本可以从Figma设计中提取并提供详细的CSS属性，使其在将设计转换为代码时更加准确。

主要特点：

  • 详细的CSS属性：为所有元素提取精确的CSS值
  • 完整的造型：包括颜色、尺寸、边框、阴影、排版等
  • 精确渲染：更好地将Figma翻译成具有适当风格的代码，而不是截图
  • 可选提取：配置是否在响应中包含详细的CSS属性

高级CSS功能：

  • 渐变支撑：精确提取线性、径向和二次曲线梯度
  • 多层背景：支持以适当的堆叠顺序进行多次填充
  • 文本样式：完整的排版属性，包括字体系列、大小、粗细、行高和转换
  • 效果和滤镜：支持框阴影、模糊效果和背景滤镜
  • 变换：提取旋转和缩放变换

示例用法：

在请求Figma数据时，您可以指定是否提取详细的CSS属性：

// With detailed CSS properties
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: true // default is true
    }
  })
});

// Without detailed CSS properties (more lightweight)
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: false
    }
  })
});

设计代币生成

此增强版本还包括从您的Figma设计中自动生成设计令牌的工具，这些令牌可以以各种格式导出以在您的项目中使用。

支持的令牌类型：

  • 颜色：从填充和命名颜色元素中提取颜色
  • 排版：使用字体系列、大小、粗细等创建完整的排版标记。
  • 间距：从适当命名的元素中识别间距模式
  • 边界半径：提取角半径值
  • 阴影：捕捉长方体阴影和立面
  • 不透明度：提取不透明度值
  • 渐变：保存渐变定义以供重用

导出格式：

  • 层叠样式表：变量 :root {} 直接在CSS中使用
  • 南海：SCSS工作流的变量和混入
  • TypeScript：使用TypeScript类型的类型安全常量
  • 对象符号：用于自定义处理的原始数据

示例用法：

// Generate design tokens
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "generate_design_tokens",
    params: {
      fileKey: "your-file-key",
      format: "css", // Options: "css", "scss", "ts", "json"
      outputPath: "./src/styles/design-tokens.css", // Optional
      prefix: "my-app-" // Optional prefix for variable names
    }
  })
});

演示视频

观看使用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_figma_data 工具。

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

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

检查响应

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

pnpm inspect
# > figma-mcp@0.1.7 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文件的密钥
  • nodeId （string，可选）：要获取的节点的ID
  • depth （number，可选）：遍历节点树需要多少层深度
  • extractCssProperties （boolean，可选）：是否为每个节点提取详细的CSS属性（默认值：true）

generatedesign_tokes

从Figma文件生成设计标记并将其导出为特定格式。

参数：

  • fileKey （string）：要获取的Figma文件的密钥
  • nodeId （string，可选）：要获取的节点的ID
  • depth （number，可选）：遍历节点树需要多少层深度
  • format （string，可选）：设计标记的输出格式（选项：“css”、“scss”、“ts”、“json”，默认：“css）
  • outputPath （字符串，可选）：保存设计标记的文件路径
  • prefix （string，可选）：变量名的可选前缀（例如“my app-”）

相关 MCP