MCP Figma 到 React 转换器

这是一个模型上下文协议 (MCP) 服务器，用于将 Figma 设计转换为 React 组件。它提供了一些工具，用于获取 Figma 设计并使用 TypeScript 和 Tailwind CSS 生成 React 组件。

特征

• 使用 Figma API 获取 Figma 设计

• 从 Figma 设计中提取组件

• 使用 TypeScript 生成 React 组件

• 根据 Figma 样式应用 Tailwind CSS 类

• 使用辅助功能增强组件

• 支持 stdio 和 SSE 传输

Related MCP server: Figma MCP Server

先决条件

• 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

执照

国际学习中心