GLips/Figma-Context-MCP

项目概览

该项目将 Figma API 响应进行简化转化为模型所需的布局数据，如果团队正面临 AI 代理难以根据截图准确还原 UI 设计的痛点，这是一个值得评估的针对性集成方案。

项目类型

MCP

应用场景

编程开发

部署方式

查看项目说明

License

MIT

适合谁

• 使用基于 AI 驱动的代码编辑器或编程代理，并需要根据 Figma 设计稿实现 UI 的开发者。

核心能力

• 提供一个基于 MCP（模型上下文协议）的服务器，负责将 Figma 的布局、元数据和样式信息传递给 AI 编程代理。这项能力作为数据桥梁，允许 AI 模型获取结构化设计信息。该功能目前处于可用状态。
• 该项目会对 Figma API 的响应进行简化和翻译，仅提取对 AI 模型最相关的布局和样式信息并输出。这项机制的工作原理是过滤原始数据，旨在减少提供给模型的上下文数据量，并改善 AI 生成代码的准确性。该功能目前处于可用状态。
• 支持通过 npx 作为本地 stdio 服务器运行，无需用户进行手动安装。这使得用户可以通过命令行直接启动并连接服务，该功能目前处于可用状态。

限制与风险

• 该项目是专门为 Cursor 设计的，虽然在技术上其他 MCP 客户端也可能使其工作，但不提供官方保证。
• 获取任何设计数据的前提是用户提供合法的 Figma API 访问令牌，存在外部服务依赖。

如何开始

• 上手难度较低。用户需要先创建 Figma API 访问令牌，随后打开 IDE 的 MCP 配置文件，添加使用 npx 运行的 figma-developer-mcp 服务器配置。配置完成后，将 Figma 链接粘贴到 IDE 的聊天中即可触发数据获取与简化流程。

核验依据

• README: Give [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) ser…
• README: When Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots.
• README: This MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translat…
• README: Many code editors and other AI clients use a configuration file to manage MCP servers.
• README: "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]

内容核验时间：