Framelink Figma MCP Server
2025.04.28
0
TypeScript设计实现AI 辅助开发团队协作开发效率
Framelink Figma MCP Server 是一个基于 Model Context Protocol (MCP) 的服务，旨在为 AI 驱动的编码工具（如 Cursor）提供对 Figma 设计数据的访问。通过简化 Figma API 的响应，该服务仅提供最相关的布局和样式信息，从而提高 AI 的准确性和响应相关性。
View on GitHub
Overview
基本能力
产品定位
Framelink Figma MCP Server 是一个为 AI 编码工具提供 Figma 设计数据访问的服务，帮助开发者更高效地实现设计到代码的转换。
核心功能
- Figma 数据访问：通过 Figma API 获取设计数据。
- 数据简化与翻译：简化 Figma API 响应，仅提供最相关的布局和样式信息。
- AI 集成：与 Cursor 等 AI 编码工具集成，实现一键式设计实现。
适用场景
- 设计实现：将 Figma 设计快速转换为代码。
- AI 辅助开发：通过 AI 工具（如 Cursor）自动生成代码。
- 团队协作：在团队中共享 Figma 设计数据，提高开发效率。
工具列表
- Figma API：用于获取 Figma 设计数据。
- Cursor：AI 驱动的编码工具，用于实现设计到代码的转换。
常见问题解答
- 如何获取 Figma API 访问令牌？
- 参考 Figma 官方文档。
- 如何配置 MCP 服务器？
- 参考 Framelink 文档。
使用教程
使用依赖
- Node.js：确保已安装 Node.js。
- Figma API 访问令牌：获取 Figma API 访问令牌。
安装教程
- 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 服务器的运行日志。
- 验证 API 访问：确保 Figma API 访问令牌有效。
- 测试 AI 集成：在 Cursor 中测试 Figma 设计数据的访问和代码生成。