mcpField
F
Framelink Figma MCP Server

Framelink Figma MCP Server

精选本地服务
framelink.ai媒体与设计16.1k18 周前更新
代码仓库访问官网

关于 Framelink Figma MCP Server

Framelink Figma MCP Server 是一个 MCP 服务，让 Cursor 等 AI 编码工具读取 Figma 文件中的设计数据。它会先精简 Figma API 的返回内容，只保留与布局和样式相关的信息，便于模型据此编写界面代码。

主要功能

  1. 01读取 Figma 文件、框架与分组的数据
  2. 02精简 Figma API 返回的布局与样式信息
  3. 03通过 npx 运行，支持 stdio 模式
  4. 04支持 FIGMA_API_KEY 与 PORT 环境变量配置

适用场景

  1. 01让 Cursor 根据 Figma 设计实现界面代码
  2. 02向 AI 编码工具提供设计稿的布局与样式上下文

MCP 相关

该项目是一个 MCP 服务，向 MCP 客户端（如 Cursor）暴露 Figma 设计数据。服务端在返回上下文前对 Figma API 的响应进行简化与转换。

#typescript#ai#mcp#cursor#figma

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}
启动命令npx -y figma-developer-mcp
需要配置的环境变量
FIGMA_API_KEY密钥Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmfigma-developer-mcp0.13.2

工具

2

收录的工具列表 · 更新于 3 周前

参数类型必填说明
depthnumber否遍历节点树的深度，仅在用户明确要求时使用
fileKeystring是要获取的 Figma 文件的键，通常可在提供的 URL 中找到，例如 figma.com/(file|design)/<fileKey>/...
nodeIdstring否要获取的节点 ID，通常可在 URL 参数 node-id=<nodeId> 中找到；如果已提供，始终使用

详细介绍

Framelink

Framelink MCP for Figma

让你的编码 Agent 访问 Figma 数据。
一次性实现在任意框架中的设计。
每周下载量 MIT 许可证 Discord
Twitter

使用此 Model Context Protocol 服务，让 Cursor 和其他 AI 编码工具访问你的 Figma 文件。

当 Cursor 可以访问 Figma 设计数据时，它准确地一次性实现设计的能力强得多，远胜于粘贴截图等替代方法。

查看快速入门说明 →

演示

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

观看视频

工作原理

  1. 打开 IDE 的聊天窗口（例如 Cursor 中的 Agent 模式）。
  2. 粘贴 Figma 文件、画板或分组的链接。
  3. 让 Cursor 对 Figma 文件执行某项操作，例如实现设计。
  4. Cursor 会从 Figma 获取相关元数据，并用它编写代码。

此 MCP 服务专为与 Cursor 配合使用而设计。在使用 Figma API 的上下文作答前，它会简化并转换响应，只向模型提供最相关的布局和样式信息。

减少提供给模型的上下文，有助于提高 AI 的准确性，让回答更切题。

开始使用

许多代码编辑器和其他 AI 客户端会使用配置文件来管理 MCP 服务。

将以下内容添加到配置文件中，即可配置 figma-developer-mcp 服务。

注意：使用此服务需要创建 Figma 访问令牌。创建 Figma API 访问令牌的说明见此处。

MacOS / Linux
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
Windows
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

或者，你可以在 env 字段中设置 FIGMA_API_KEY 和 PORT。

如需了解如何配置 Framelink MCP for Figma 的更多信息，请参阅 Framelink 文档。

Star 历史

Star 历史图表

了解更多

Framelink MCP for Figma 简单而强大。访问 Framelink 网站，进一步了解如何充分利用它。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。