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

3. 构建项目：

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 文件密钥（URL 中 figma.com/file/ 后面的字符串）
2. 使用 figmaToReactWorkflow 工具和文件密钥及输出目录
3. 工具将提取组件，生成 React 代码，并保存文件

开发

对于开发，你可以使用监视模式：

npm run dev

许可证

ISC