-
securityF
license-
qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
42
5
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
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
通过从 Figma 文件中提取组件并将其转换为可立即使用的代码，将 Figma 设计转换为具有 TypeScript 和 Tailwind CSS 的 React 组件。
Related MCP Servers
- -securityFlicense-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.Last updated -
- AsecurityFlicenseAqualityA bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.Last updated -57252
- -securityFlicense-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -