Framelink Figma MCP Server
2025.04.10
0
TypeScript设计工具AI 辅助开发开发效率
Framelink Figma MCP Server 是一个为 AI 驱动的编码工具（如 Cursor、Windsurf、Cline 等）提供 Figma 设计数据访问的服务器。它通过简化 Figma API 的响应，仅提供最相关的布局和样式信息，从而提高 AI 的准确性和响应相关性。
View on GitHub
Overview
基本能力
产品定位
Framelink Figma MCP Server 旨在为 AI 编码工具提供 Figma 设计数据的访问，帮助开发者更高效地实现设计到代码的转换。
核心功能
- 提供对 Figma 文件的访问权限。
- 简化并翻译 Figma API 响应，仅提供最相关的布局和样式信息。
- 支持与 Cursor 等 AI 编码工具的集成。
适用场景
- 在 AI 编码工具中实现 Figma 设计到代码的一键转换。
- 提高 AI 编码工具在设计实现中的准确性。
工具列表
figma-developer-mcp: 提供 Figma 设计数据的访问和简化功能。
常见问题解答
- 如何获取 Figma API 访问令牌？参考 Figma 官方文档。
- 如何配置 MCP 服务器？参考 Framelink 文档。
使用教程
使用依赖
- 需要安装 Node.js 和 npm。
- 需要 Figma API 访问令牌。
安装教程
- 确保已安装 Node.js 和 npm。
- 运行以下命令安装
figma-developer-mcp：bash npm install -g figma-developer-mcp - 配置 MCP 服务器，将以下内容添加到配置文件中：
- MacOS / Linux
json { "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } } - Windows
json { "mcpServers": { "Framelink Figma MCP": { "command": "cmd", "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }
调试方式
- 确保配置文件中已正确添加 MCP 服务器配置。
- 启动 AI 编码工具（如 Cursor）并测试 Figma 设计数据的访问。
- 如果遇到问题，检查 Figma API 访问令牌是否正确，并参考 Framelink 文档进行调试。