Integrations

Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.
Generates React components from Figma designs, including support for component extraction and creation of functional React components.
Applies Tailwind CSS classes to generated React components based on the styles defined in the Figma designs.

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 令牌

安装

克隆存储库
安装依赖项：

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 文件密钥（URL 中figma.com/file/后面的字符串）
使用带有文件键和输出目录的figmaToReactWorkflow工具
该工具将提取组件，生成 React 代码，并保存文件

发展

对于开发，您可以使用监视模式：

npm run dev

执照

国际学习中心

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

通过从 Figma 文件中提取组件并将其转换为可立即使用的代码，将 Figma 设计转换为具有 TypeScript 和 Tailwind CSS 的 React 组件。

MCP Figma to React Converter