Figma to React MCP服务

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令牌

安装

1. 克隆存储库
2. 安装依赖项：

npm install

1. 构建项目：

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组件的完整工作流程

工作流示例

1. 获取Figma文件密钥（后面的字符串 figma.com/file/ 在URL中）
2. 使用 figmaToReactWorkflow 带有文件密钥和输出目录的工具
3. 该工具将提取组件、生成React代码并保存文件

发展

对于开发，您可以使用手表模式：

npm run dev

许可证

国际协调委员会