Figma To React

🚀 Figma 到 React 转换器 MCP 服务器

本项目是一个模型上下文协议（MCP）服务器，旨在将 Figma 设计无缝转换为 React 组件。它提供了一系列工具，可从 Figma 获取设计，并生成集成 TypeScript 和 Tailwind CSS 的 React 组件，极大地提升了开发效率。

🚀 快速开始

本项目是用于将 Figma 设计转换为 React 组件的 MCP 服务器。使用前需确保满足先决条件，完成安装和配置，即可按照使用方法运行服务器进行转换。

✨ 主要特性

• 设计获取：借助 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

高级用法

示例工作流程

1. 获取 Figma 文件密钥（Figma URL 中 figma.com/file/ 之后的部分）。
2. 使用 figmaToReactWorkflow 工具和文件密钥及输出目录。
3. 工具将提取组件、生成 React 代码并保存到文件中。

📚 详细文档

可用工具

Figma 工具

• getFigmaProject：获取 Figma 项目结构。
• getFigmaComponentNodes：从 Figma 文件中获取组件节点。
• extractFigmaComponents：提取 Figma 文件中的组件。
• getFigmaComponentSets：获取 Figma 文件的组件集合。

React 工具

• generateReactComponent：从 Figma 节点生成 React 组件。
• generateComponentLibrary：从 Figma 组件生成多个 React 组件。
• writeComponentsToFiles：将生成的组件写入文件。
• figmaToReactWorkflow：完整的转换工作流，用于将 Figma 设计转换为 React 组件。

开发模式

在开发过程中，你可以使用观察模式：

npm run dev

📄 许可证

本项目采用 ISC 许可证。