Figma MCP Server
Overview
基本能力
产品定位
Figma MCP Server 主要用于将 Figma 设计转换为 React 应用，提供像素级完美的实现。
核心功能
- Figma API 集成：直接连接 Figma API 访问设计文件
- React 就绪输出：将 Figma 数据处理为 React 兼容格式
- 样式处理：将 Figma 样式转换为 CSS/styled-components
- 资源管理：处理图像资源和 SVG 组件
- 布局处理：将 Figma 自动布局转换为 Flexbox
- 类型安全：使用 TypeScript 构建，确保类型检查可靠
适用场景
- 从 Figma 设计快速生成 React 应用
- 自动化设计到代码的转换流程
- 确保设计与实现的一致性
工具列表
get_file_content:- 获取并处理 Figma 文件内容
- 转换布局、样式和组件
-
返回 React 就绪的组件结构
-
get_node_images: - 从 Figma 获取图像资源
- 支持多种格式（PNG、JPG、SVG）
- 可配置缩放选项
常见问题解答
- 需要配置 Figma 访问令牌
- 支持 VS Code 和 Cursor IDE 配置
使用教程
使用依赖
-
克隆仓库:
bash git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp -
安装依赖:
bash npm install -
配置 Figma 访问令牌:
bash cp .env.example .env # 在 .env 文件中添加你的 Figma 访问令牌
安装教程
-
构建服务器:
bash npm run build -
根据你的 IDE 配置 MCP 设置:
-
对于 VS Code（全局设置）:
json // 在 settings.json 中 { "mcpServers": { "figma": { "command": "node", "args": ["path/to/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your-token-here" } } } } -
对于 Cursor IDE: 使用
.cursor/mcp.json配置，如“Cursor IDE 设置”部分所述。
调试方式
-
使用 MCP 工具在你的应用中:
typescript // 示例：获取处理后的 Figma 内容 const result = await useMcpTool("figma", "get_file_content", { fileKey: "your-figma-file-key" }); -
检查
raccoon-game目录中的示例项目。