GLips/Figma-Context-MCP

这是什么？

核心功能

• 01根据粘贴的链接获取 Figma 文件、Frame 或 Group 的布局与样式元数据。
• 02在返回给模型前精简 Figma API 响应，只保留最相关的设计信息。
• 03以 npx 启动的 MCP 服务器形式运行，通过 JSON 配置文件接入。
• 04支持通过命令行参数或 FIGMA_API_KEY 环境变量传入 Figma 访问令牌。

适用场景

• 在 Cursor 中依据 Figma 布局信息而非截图，把设计稿实现为前端代码。
• 让 AI 代理在任意前端框架中构建界面时读取组件结构和间距。
• 把已有的 Figma Frame 交给代理，快速搭建页面原型。

快速上手

1. 1

   按照 README 中的链接创建 Figma 访问令牌

2. 2

   将 MCP 服务器配置添加到编辑器的 MCP 配置文件中(macOS/Linux),并填入你的 API 密钥

   npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
3. 3

   重启你的 AI 客户端,并在聊天中粘贴 Figma 文件、画框或分组的链接

使用前须知

• !在服务器获取任何设计数据之前,需要先创建 Figma 访问令牌。
• !该项目专为 Cursor 设计,其他 AI 客户端可能需要额外配置。

标签

常见问题

Figma-Context-MCP 是什么？

为 Cursor 等 AI 编程工具提供 Figma 设计数据访问的 MCP 服务器，帮助按设计稿实现界面。 Framelink MCP for Figma 是一个基于 Model Context Protocol 的服务器，把 Cursor 等 AI 编程工具与 Figma API 连接起来。用户在对话中粘贴 Figma 文件、Frame 或 Group 的链接后，代理会获取对应的布局和样式元数据，并据此生成代码。

Figma-Context-MCP 可以免费使用吗？用的什么许可证？

Figma-Context-MCP 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

Figma-Context-MCP 还在维护吗？

活跃维护中。Figma-Context-MCP 最近一次提交是在 2026年10月16日。

Figma-Context-MCP 适合用来做什么？

在 Cursor 中依据 Figma 布局信息而非截图，把设计稿实现为前端代码。 让 AI 代理在任意前端框架中构建界面时读取组件结构和间距。 把已有的 Figma Frame 交给代理，快速搭建页面原型。

Figma-Context-MCP 怎么安装和运行？

按照 README 中的链接创建 Figma 访问令牌 将 MCP 服务器配置添加到编辑器的 MCP 配置文件中(macOS/Linux),并填入你的 API 密钥: npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio 重启你的 AI 客户端,并在聊天中粘贴 Figma 文件、画框或分组的链接

在哪里获取 Figma-Context-MCP？

源代码和安装说明在 GitHub 上：https://github.com/GLips/Figma-Context-MCP