mcpField
F
Framelink Figma MCP Server

Framelink Figma MCP Server

本地服务
github.com/injunko媒体与设计081 周前更新
代码仓库

关于 Framelink Figma MCP Server

Framelink Figma MCP Server 为编码 Agent 提供 Figma 文件数据，以便在 IDE 中实现设计。它会整理 API 响应，提取相关布局和样式信息，而非依赖截图。

主要功能

  1. 01获取 Figma 文件元数据
  2. 02使用文件、画板或分组链接
  3. 03精简布局与样式上下文
  4. 04使用 Figma 访问令牌配置

适用场景

  1. 01在 IDE 中实现 Figma 设计
  2. 02生成 UI 代码时参考画板信息

MCP 相关

该 MCP 服务向 Cursor、Windsurf 和 Cline 等编码工具提供 Figma 设计数据。客户端可传入 Figma 链接并请求相关文件元数据。

#figma#mcp#server

配置

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

mcp.json · 通用配置
{
  "mcpServers": {
    "figma-mcp-server-injunko": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}
启动命令npx -y figma-developer-mcp

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

安装包
npmfigma-developer-mcp

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Framelink

Framelink Figma MCP Server

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

通过此 Model Context Protocol 服务，让 Cursor、Windsurf、Cline 和其他 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 Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
Windows
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

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

Star 历史

Star 历史图表

了解更多

Framelink Figma MCP 服务简单而强大。访问 Framelink 网站，了解更多信息，充分发挥它的作用。

评论

支持 Markdown

第一次接触 MCP？

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

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