Framelink Figma MCP Server

Name: Framelink Figma MCP Server
Author: UDILGU

本地服务

github.com/UDILGU媒体与设计078 周前更新

代码仓库

关于 Framelink Figma MCP Server

Framelink Figma MCP Server 为编码 Agent 提供 Figma 文件数据，以辅助实现设计。它会精简 API 响应，突出布局和样式相关信息。

主要功能

01获取 Figma 文件、画框和组数据
02精简 API 响应以保留相关上下文
03支持在编码工具中实现设计
04使用 Figma 访问令牌配置

适用场景

01在 IDE 中实现 Figma 画框设计
02为编码 Agent 提供布局和样式上下文

MCP 相关

该服务向 MCP 客户端提供 Figma 设计数据。客户端可提交 Figma 链接，并将返回的元数据用作代码生成上下文。

配置

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

mcp.json · 通用配置

{
  "mcpServers": {
    "MCP-server-with-image": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

启动命令npx -y figma-developer-mcp

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

安装包

npmfigma-developer-mcpstdio

工具

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

参数	类型	必填	说明
fileKey	string	是	要获取的 Figma 文件的键，通常可在提供的 URL 中找到，例如 figma.com/(file\|design)/<fileKey>/...
nodeId	string	否	获取节点的 ID，通常可在 URL 参数 node-id=<nodeId> 中找到；如果提供了该参数，务必使用。标准节点使用格式 '1234:5678'；深层嵌套的实例节点使用格式 'I5666:180910;1:10515;1:10336'（以分号连接的路径表示实例覆盖链——它仍是单个节点 ID，而非多个节点）。
depth	number	否	可选。除非用户明确要求，否则请勿使用。控制遍历节点树的深度。

详细介绍

Framelink Figma MCP 服务

🌐 其他语言版本： 한국어（韩语） | 日本語（日语） | 中文（中文）

让你的编码 Agent 访问 Figma 数据。
一次性在任意框架中实现设计。

通过这个 Model Context Protocol 服务，让 Cursor 和其他 AI 编码工具访问你的 Figma 文件。

Cursor 可以访问 Figma 设计数据后，相比粘贴截图等替代方案，它能够大幅提升一次性准确实现设计的效果。

查看快速入门指南 →

演示

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

工作原理

打开 IDE 的聊天窗口（例如 Cursor 中的 Agent 模式）。
粘贴 Figma 文件、画板或群组的链接。
要求 Cursor 对 Figma 文件执行操作，例如实现设计。
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"]
    }
  }
}

也可以在 env 字段中设置 FIGMA_API_KEY 和 PORT。

如需了解 Framelink Figma MCP 服务的更多配置方法，请参阅 Framelink 文档。

星标历史

了解更多

Framelink Figma MCP 服务简单而强大。访问 Framelink 网站，了解更多并充分利用它。

赞助商

🥇 黄金赞助商

Framelink

🥈 白银赞助商

🥉 青铜赞助商

😻 其他支持者

支持 Markdown

登录后评论

第一次接触 MCP？

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

阅读入门指南

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