🚀 Figma MCP Server + Augment Code Integration

🚀 Figma MCP サーバー + Augment Code の連携

より簡単な方法がこちらで利用できるようになりました：https://github.com/shedytee/Figma-MCP-Augment-Code-Guide-Local-HTTP-mode-/blob/main/README.md

このプロジェクトでは、Model Context Protocol (MCP) サーバーを Figma API に接続し、Augment Code と連携して開発ワークフローを大幅に強化する方法を紹介します。

---

✨ 機能

✅ 以下の機能を持つ MCP サーバーを構築します。

• Figma ファイルを照会します
• MCP 対応インターフェースに Figma のデータを公開します
• Augment Code にカスタムツールとして統合します

✅ 使用するもの：

• @modelcontextprotocol/sdk
• figma-js
• zod
• dotenv

---

📦 セットアップ手順

1. リポジトリをクローンします

   git clone https://github.com/shedytee/mcp-figma-augmentcode-integration.git
   cd mcp-figma-augmentcode-integration
   

2. 依存関係をインストールします

   必要な NPM パッケージをインストールします：

   npm install @modelcontextprotocol/sdk figma-js zod dotenv
   

3. 環境変数を設定します

   cp .env.example .env
   

   以下を設定します：

   • FIGMA_TOKEN → Figma API トークン
   • FIGMA_FILE_ID → Figma ファイル ID
   • MCP_PORT → 通常は 3000

4. package.json を更新します

   package.json のトップレベルに "type": "module" を追加し、"scripts" の下に start:mcp スクリプトを追加します：

   {
     "name": "mcp-figma-augmentcode-integration",
     "version": "1.0.0",
   + "type": "module",
     "scripts": {
       "start:mcp": "node figma-mcp-server.js"
     },
     "dependencies": {
       "@modelcontextprotocol/sdk": "^1.17.1",
       "figma-js": "^1.16.1-0",
       "zod": "^3.25.76",
       "dotenv": "^17.2.1"
     }
   }
   

5. figma-mcp-server.js に起動ログを追加します

   起動に成功したことがわかるよう、スクリプトの最後にコンソールメッセージが表示されることを確認します。たとえば、接続後に次を追加します：

   const transport = new StdioServerTransport();
   await server.connect(transport);
   + console.log(`MCP Server running on port ${MCP_PORT}`);
   

6. MCP サーバーを起動します

   npm run start:mcp
   

   次のように表示されます：

   MCP Server running on port 3000
   

---

⚙️ Augment Code に接続する

1. Augment Code → Workspace Settings → MCP を開きます

2. 新しい MCP サーバーを追加します：

   • 名前： figma
   • コマンド：

     node figma-mcp-server.js
     

     （ワークスペースのルートから実行します）

3. Environment Variables に以下を追加します：

   • FIGMA_TOKEN
   • FIGMA_FILE_ID
   • MCP_PORT

4. Save をクリックし、「figma」サーバーをオンにします。
   ログに次の内容が表示されることを確認します：

   [dotenv@…] injecting env …
   MCP Server running on port 3000
   

   表示されると、アイコンが緑色に変わります。

---

💬 プロンプトの例

すぐに使えるチャットプロンプトについては、prompts.md を参照してください。例：

• figma にファイルの全データを取得するよう依頼します。
• figma を使って Figma API から最新のファイルを取得します。
• ButtonPrimary という名前のコンポーネントの詳細を figma に尋ねます。
• figma ツールを使って、デザインファイル内のすべてのコンポーネントを表示します。

---

🗂 コード例

このリポジトリには、Figma API に接続する MCP サーバーの動作例である figma-mcp-server.js が含まれています。

ローカルで実行するには：

npm run start:mcp

---

⚠ 重要な注意事項

🛡️ パスにスペースが含まれる場合

ワークスペースのパスにスペース（例：My Projects）が含まれる場合は、コマンドの引数を引用符で囲みます：

node "figma-mcp-server.js"

—または—
引用符を使わずに済むよう、プロジェクトをスペースのないパスに移動します：

C:/Users/yourname/Dev/NoSpacesRepo/

---

🔧 トラブルシューティング

よくある問題と解決方法については、troubleshooting.md を参照してください。

---

🤝 貢献

アイデア、改善案、質問がありましたら、
issue を作成するか、プルリクエストを送信してください。貢献を歓迎します！

ガイドラインについては、CONTRIBUTING.md を参照してください。

---

📄 ライセンス

このプロジェクトは MIT License のもとでライセンスされています。

---

🌐 リンク

• Model Context Protocol (MCP)
• Figma API
• Augment Code