Figma To React

🚀 Figma 到 React 轉換器 MCP 服務器

本項目是一個模型上下文協議（MCP）服務器，旨在將 Figma 設計無縫轉換為 React 組件。它提供了一系列工具，可從 Figma 獲取設計，並生成集成 TypeScript 和 Tailwind CSS 的 React 組件，極大地提升了開發效率。

🚀 快速開始

本項目是用於將 Figma 設計轉換為 React 組件的 MCP 服務器。使用前需確保滿足先決條件，完成安裝和配置，即可按照使用方法運行服務器進行轉換。

✨ 主要特性

• 設計獲取：藉助 Figma API 輕鬆獲取 Figma 設計。
• 組件提取：精準從 Figma 設計中提取所需組件。
• 代碼生成：自動生成集成 TypeScript 的 React 組件。
• 樣式應用：依據 Figma 風格智能應用 Tailwind CSS 類。
• 可訪問性增強：為組件添加可訪問性特徵，提升用戶體驗。
• 傳輸支持：支持 stdio 和 SSE 兩種傳輸方式。

📦 安裝指南

先決條件

• 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

高級用法

示例工作流程

1. 獲取 Figma 文件密鑰（Figma URL 中 figma.com/file/ 之後的部分）。
2. 使用 figmaToReactWorkflow 工具和文件密鑰及輸出目錄。
3. 工具將提取組件、生成 React 代碼並保存到文件中。

📚 詳細文檔

可用工具

Figma 工具

• getFigmaProject：獲取 Figma 項目結構。
• getFigmaComponentNodes：從 Figma 文件中獲取組件節點。
• extractFigmaComponents：提取 Figma 文件中的組件。
• getFigmaComponentSets：獲取 Figma 文件的組件集合。

React 工具

• generateReactComponent：從 Figma 節點生成 React 組件。
• generateComponentLibrary：從 Figma 組件生成多個 React 組件。
• writeComponentsToFiles：將生成的組件寫入文件。
• figmaToReactWorkflow：完整的轉換工作流，用於將 Figma 設計轉換為 React 組件。

開發模式

在開發過程中，你可以使用觀察模式：

npm run dev

📄 許可證

本項目採用 ISC 許可證。