Figma MCP 服务器

模型上下文协议 (MCP) 服务器，用于在 Figma 设计与 React 实现之间搭建桥梁。该服务器通过处理 Figma 文件数据并以 React 友好的格式提供数据，从而实现将 Figma 设计完美像素地转换为 React 应用程序。

🚀 功能

• Figma API 集成：直接连接到 Figma 的 API 来访问设计文件

• React-Ready 输出：将 Figma 数据处理为与 React 兼容的格式

• 样式处理：将 Figma 样式转换为 CSS/styled-components

• 资产管理：处理图像资产和 SVG 组件

• 布局处理：将 Figma 自动布局转换为 Flexbox

• 类型安全：使用 TypeScript 构建，可进行可靠的类型检查

Related MCP server: FigmaMind MCP Server

🛠️ 提供的工具

1. get_file_content ：

   • 获取并处理 Figma 文件内容

   • 转换布局、样式和组件

   • 返回 React-ready 组件结构 GXP1

2. get_node_images ：

   • 从 Figma 检索图像资产

   • 支持多种格式（PNG、JPG、SVG）

   • 可配置的缩放选项 GXP2

📦安装

1. 克隆存储库：

   git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp

2. 安装依赖项：

   npm install

3. 配置您的 Figma 访问令牌：

   cp .env.example .env # Add your Figma access token to .env

🎯 Cursor IDE 设置

1. 在项目根目录中创建.cursor/mcp.json文件：

   mkdir -p .cursor touch .cursor/mcp.json

2. 对于基于 Stdio 的服务器配置：

   { "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

🧩示例项目

查看raccoon-game目录，了解使用此 MCP 服务器创建 Figma 设计的像素完美 React 实现的完整示例。

🔄 处理管道

1. 输入：通过官方 API 输入 Figma 文件数据

2. 加工：

   • 风格转换（颜色、字体、效果）

   • 布局变换（绝对到 Flexbox）

   • 组件层次结构映射

   • 资产优化

3. 输出：React-ready 组件数据

📝 许可证

MIT 许可证

🤝 贡献

欢迎贡献！请阅读我们的贡献指南。

🙏 致谢

• Figma API 团队提供全面的 API

• MCP 规范的模型上下文协议

由 [你的名字] 用❤️制作