Figma MCP Server

🚀 Figma MCP（模型上下文協議）

Figma MCP是一套完整的解決方案，藉助Model Context Protocol，通過Cursor Agent實現Figma設計的創建與修改，讓設計工作更加智能高效。

博客: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

🚀 快速開始

1. 設置MCP服務器

cd figma-mcp-server
cp .env.example .env  # 編輯此文件以添加您的Figma令牌
bun install
bun run index.ts

2. 設置Figma插件

cd figma-plugin
npm install
npm run build

然後在Figma中導入插件：

1. 打開Figma
2. 轉到Plugins > Development > 從manifest導入插件
3. 選擇figma-plugin/manifest.json文件

3. 連接到Cursor Agent

在Cursor中：

1. 轉到Settings > Agent > MCP服務器
2. 添加一個新服務器，URL為：http://localhost:3000/api/mcp/schema

✨ 主要特性

該項目使AI能夠通過自然語言提示在Figma中進行設計創作。它包含兩個主要組件：

1. MCP服務器：一個基於Bun + TypeScript的服務器，實現模型上下文協議，並通過WebSocket與Figma插件通信。
2. Figma插件：一個運行在Figma中的插件，根據來自MCP服務器的指令執行設計操作。

藉助此集成，您可以使用自然語言完成以下操作：

• 創建基本設計元素（形狀、文本等）
• 設計包含多個部分的完整頁面佈局
• 修改現有設計

📦 安裝指南

倉庫結構

• figma-mcp-server/：MCP服務器實現
• figma-plugin/：運行在Figma中的插件，用於執行設計操作

安裝步驟

設置MCP服務器

cd figma-mcp-server
cp .env.example .env  # 編輯此文件以添加您的Figma令牌
bun install
bun run index.ts

設置Figma插件

cd figma-plugin
npm install
npm run build

然後在Figma中導入插件：

1. 打開Figma
2. 轉到Plugins > Development > 從manifest導入插件
3. 選擇figma-plugin/manifest.json文件

連接到Cursor Agent

在Cursor中：

1. 轉到Settings > Agent > MCP服務器
2. 添加一個新服務器，URL為：http://localhost:3000/api/mcp/schema

💻 使用示例

基礎用法

設置完成後，您可以使用Cursor Agent和以下提示創建設計：

創建一個著陸頁面，包含一個標題、帶有“我們的產品”副標題的英雄部分、功能部分中的3個功能以及包含聯繫信息的頁腳。

📚 詳細文檔

更多詳細說明，請參閱：

• MCP服務器README
• Figma插件安裝指南

🔧 技術細節

1. Cursor Agent接收自然語言提示
2. 它向MCP服務器發送結構化請求
3. MCP服務器處理請求並通過WebSocket向Figma插件發送指令
4. Figma插件在Figma中執行設計操作

📄 許可證

MIT