MCP Figma到React转换器
这是一个模型上下文协议（MCP）服务器，它将Figma设计转换为React组件。它提供了获取Figma设计和使用TypeScript和Tailwind CSS生成React组件的工具。
特性
- 使用Figma API获取Figma设计
- 从Figma设计中提取组件
- 使用TypeScript生成React组件
- 基于Figma样式应用Tailwind CSS类
- 使用辅助功能增强组件
- 支持stdio和SSE传输
先决条件
- Node.js 18或更高版本
- 一个Figma API令牌
安装
- 克隆存储库
- 安装依赖项：
npm install- 构建项目：
npm run build配置
您需要设置 FIGMA_API_TOKEN 您的Figma API令牌的环境变量。您可以从Figma帐户设置页面获取个人访问令牌。
用法
作为本地MCP服务器运行
FIGMA_API_TOKEN=your_token_here npm start或者明确运输：
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio作为HTTP服务器运行
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse可用工具
Figma工具
getFigmaProject：获取Figma项目结构getFigmaComponentNodes：从Figma文件中获取组件节点extractFigmaComponents：从Figma文件中提取组件getFigmaComponentSets：从Figma文件中获取组件集
React工具
generateReactComponent：从Figma节点生成React组件generateComponentLibrary：从Figma组件生成多个React组件writeComponentsToFiles：将生成的组件写入文件figmaToReactWorkflow：将Figma设计转换为React组件的完整工作流程
工作流示例
- 获取Figma文件密钥（后面的字符串
figma.com/file/在URL中） - 使用
figmaToReactWorkflow带有文件密钥和输出目录的工具 - 该工具将提取组件、生成React代码并保存文件
发展
对于开发，您可以使用手表模式：
npm run dev许可证
国际协调委员会