MCP Figma To React

🚀 Figma 到 React 轉換器 MCP 服務器

這是一個模型上下文協議 (MCP) 服務器，主要用於把 Figma 設計轉換為 React 組件。它提供了獲取 Figma 設計，並生成包含 TypeScript 和 Tailwind CSS 的 React 組件的工具，極大地提升了從設計到開發的轉化效率。

🚀 快速開始

本服務器可助力你輕鬆將 Figma 設計轉化為 React 組件，以下是使用前的準備和啟動步驟。

✨ 主要特性

• 設計獲取：使用 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

可用工具

Figma 工具

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

React 工具

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

示例工作流程

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

開發

開發時可以使用觀察模式：

npm run dev

📄 許可證

本項目採用 ISC 許可證。