AI导哈

Figma转React转换器

一个将Figma设计转换为React组件的工具，支持TypeScript和Tailwind CSS，适用于前端开发工作流程。

  • by TalentDev90107
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 TalentDev90107/React-MCP-Figma

使用说明

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

许可证

ISC

相关 MCP