🚀 Figma 到 React 转换器 MCP 服务器
这是一个模型上下文协议 (MCP) 服务器，主要用于把 Figma 设计转换为 React 组件。它提供了获取 Figma 设计，并生成包含 TypeScript 和 Tailwind CSS 的 React 组件的工具，极大地提升了从设计到开发的转化效率。
🚀 快速开始
本服务器可助力你轻松将 Figma 设计转化为 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 URL 中
figma.com/file/后面的部分）。 - 使用
figmaToReactWorkflow工具与文件密钥和输出目录。 - 工具将提取组件、生成 React 代码并保存文件。
开发
开发时可以使用观察模式：
npm run dev
📄 许可证
本项目采用 ISC 许可证。