-
security-
license-
qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
19
5
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 构建，可进行可靠的类型检查
🛠️ 提供的工具
get_file_content：获取并处理 Figma 文件内容
转换布局、样式和组件
返回 React-ready 组件结构 GXP1
get_node_images：从 Figma 检索图像资产
支持多种格式（PNG、JPG、SVG）
可配置的缩放选项 GXP2
📦安装
克隆存储库：
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp安装依赖项：
npm install配置您的 Figma 访问令牌：
cp .env.example .env # Add your Figma access token to .env
🎯 Cursor IDE 设置
在项目根目录中创建
.cursor/mcp.json文件：mkdir -p .cursor touch .cursor/mcp.json对于基于 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" } }
}
## 💻 Usage
1. Build the server:
```bash
npm run build
```
2. Configure MCP settings based on your IDE:
- For VS Code (global settings):
```json
// In settings.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}
```
- For Cursor IDE:
Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
This configuration will take precedence over VS Code settings when using Cursor IDE.
3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
fileKey: "your-figma-file-key"
});
🧩示例项目
查看raccoon-game目录，了解使用此 MCP 服务器创建 Figma 设计的像素完美 React 实现的完整示例。
🔄 处理管道
输入：通过官方 API 输入 Figma 文件数据
加工：
风格转换（颜色、字体、效果）
布局变换（绝对到 Flexbox）
组件层次结构映射
资产优化
输出：React-ready 组件数据
📝 许可证
MIT 许可证
🤝 贡献
欢迎贡献！请阅读我们的贡献指南。
🙏 致谢
Figma API 团队提供全面的 API
MCP 规范的模型上下文协议
由 [你的名字] 用❤️制作
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Figma 设计和 React 实现之间的桥梁，通过将 Figma 文件数据处理为 React 友好格式，可以将 Figma 设计完美地转换为 React 应用程序。
Related MCP Servers
- -security-license-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
- -security-license-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -52MIT License
- -security-license-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -