Figma

Figma MCP Server

Claude が Figma 上で直接デザインを作成、編集できるツールです。

このツールでできること

このツールは Claude と Figma を接続し、次のことができます。

• Claude に説明して、新しい Figma デザインを作成する
• 簡単な指示で既存の Figma デザインを編集する
• ワイヤーフレームや UI 要素一式を生成する
• デザインをエクスポートする

動作の仕組み

1. Claude：デザインのリクエストを理解します
2. Figma Plugin：Figma 上でデザインを作成します
3. Server：Claude と Figma を接続します（自動で実行されます）

クイックスタートガイド

ユーザー向け

1. Figma Plugin をインストールする：

   • Figma Desktop app を開きます
   • Plugins > Development > Import plugin from manifest を選択します
   • このプロジェクトの figma-plugin/manifest.json ファイルを選択します

2. Claude の設定で Figma MCP Server を設定する：

   • MCP Config の json がシステム上のどこにあるか確認します。場所はオペレーティングシステムによって異なる場合があります。
   • ~/Library/Application Support/Claude/claude_desktop_config.json を編集します。

   {
     "mcpServers": {
         "figma": {
         "command": "docker",
            "args": [
               "run",
               "-i",
               "-p",
               "9000:9000",
               "--rm",
               "mcp/hs-figma"
            ],
            "env": {
               "NODE_ENV": "production",
               "WEBSOCKET_MODE": "true",
               "WS_PORT": "9000"
            }
         }
     }
   }
   
   

3. Use with Claude:

   • Open Claude
   • The Figma tool should appear in Claude's tools menu
   • Ask Claude to create designs in Figma, like:
     • "Create a login screen in Figma"
     • "Design a blue button with rounded corners in Figma"
     • "Make a simple landing page layout in Figma"

For Technical Setup (IT/Developers)

Click to expand technical setup instructions

Prerequisites

• Node.js (>= 16)
• npm
• Docker (installed on the machine running Claude)
• Figma Desktop app

Installation

1. Clone and Install:

   git clone <repository-url>
   cd figma-mcp-server
   npm install
   

2. Build:

   npm run build
   npm run build:figma-plugin
   

3. Build Docker Image & Figma Plugin:

   docker build -t mcp/hs-figma .
   
   npm run build:figma-plugin
   

4. Configure Claude: Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

   {
     "mcpServers": {
         "figma": {
         "command": "docker",
            "args": [
               "run",
               "-i",
               "-p",
               "9000:9000",
               "--rm",
               "mcp/hs-figma"
            ],
            "env": {
               "NODE_ENV": "production",
               "WEBSOCKET_MODE": "true",
               "WS_PORT": "9000"
            }
         }
     }
   }
   

   この設定を追加すると、必要に応じて Claude がサーバーを自動的に起動します。

デザイン機能

Claude に次のように依頼できます。

• 長方形、円、テキスト、フレームを作成する
• ボタン、カードなどの UI コンポーネントをデザインする
• Web ページやアプリのレイアウトを配置する
• 色、シャドウ、エフェクトで要素のスタイルを設定する
• デザインを画像としてエクスポートする

トラブルシューティング

よくある問題

1. Claude が Figma に接続できない

   • Figma プラグインが実行中であることを確認します
   • Claude の設定ファイルが正しく設定されていることを確認します
   • Claude を再起動して、もう一度お試しください

2. 図形が想定どおりに表示されない

   • Claude への指示を、より具体的にしてみてください
   • 色には、「blue」のような一般的な名前や、「#0000FF」のような 16 進数コードを使用します

3. プラグインが動作しない

   • Figma ファイルを開いていることを確認します
   • 必要に応じてプラグインを再インストールします

技術的なトラブルシューティングについては、以下の「技術的な問題」セクションをご覧ください。

技術的な問題

1. WebSocket 接続の失敗

   • ポート 9000 がファイアウォールでブロックされていないことを確認します
   • サーバーとプラグインの両方の設定で WS_PORT の設定を確認します

2. プラグインの読み込みに関する問題

   • TypeScript ファイルが正しくコンパイルされていることを確認します
   • Figma の開発者ツールでコンソールエラーを確認します

3. 色の形式に関する問題

   • 色オブジェクトでは、alpha（「a」）プロパティの代わりに opacity を使用してください

使用例

Claude に次のように依頼してみてください。

• 「ヘッダー、ヒーローセクション、フッターを備えたシンプルなアプリのホームページを Figma で作成して」
• 「アバター、名前、自己紹介を含むユーザープロフィールカードを Figma でデザインして」
• 「Figma でナビゲーションボタンのセットを作成して」

ライセンス

MIT