MCP Figma to React Converter

基本能力

产品定位

MCP Figma to React Converter 是一个设计到代码的转换工具，专注于将 Figma 设计高效转换为 React 组件，提升前端开发效率。

核心功能

• 使用 Figma API 获取 Figma 设计
• 从 Figma 设计中提取组件
• 生成带有 TypeScript 的 React 组件
• 基于 Figma 样式应用 Tailwind CSS 类
• 增强组件的可访问性功能
• 支持 stdio 和 SSE 传输方式

适用场景

• 前端开发团队需要快速将设计稿转换为可用的 React 组件
• 设计师与开发者协作，确保设计实现的一致性
• 自动化设计到代码的转换流程，提高开发效率

工具列表

Figma 工具

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

React 工具

• generateReactComponent: 从 Figma 节点生成 React 组件
• generateComponentLibrary: 从 Figma 组件生成多个 React 组件
• writeComponentsToFiles: 将生成的组件写入文件
• figmaToReactWorkflow: 完整的 Figma 设计到 React 组件转换工作流

使用教程

使用依赖

• 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

开发模式

npm run dev

许可证

该项目遵循 ISC 开源许可条款。