Claude Code to Figma を使ってコードから Figma デザインを生成する

Figma MCP サーバーに新しいツールがリリースされ、ブラウザ上の UI からコードを Figma デザインに変換できるようになりました。これにより、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。この記事では実際のコードから Figma デザインを生成する方法を試してみます。

Figma MCP サーバーのセットアップ

実際のコードから Figma デザインを生成する機能は Figma MCP サーバーの generate_figma_design ツールを使用して実現されます。Figma MCP サーバーはリモートサーバーとデスクトップサーバーの 2 種類が提供されていますが、generate_figma_design ツールはリモートサーバーでのみ利用可能です。また generate_figma_design ツールは Claude Code でのみ利用可能なツールとなっています。

Figma MCP サーバーのリモートサーバーをセットアップするには、以下のコマンドを実行します。

claude mcp add --transport http figma https://mcp.figma.com/mcp

セットアップが完了すると ~/.claude/settings.json ファイルに以下のような設定が追加されます。

~/.claude/settings.json

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code を起動した後に /mcp コマンドを実行して Figma MCP サーバーが追加されていることを確認します。

「△ needs authentication」と表示されている場合は、Figma MCP サーバーへの認証が必要な状態です。figma を選択してから「1. Authenticate」を選択して認証します。

ブラウザが開き、Claude Code へのアクセス許可を求められるので「同意してアクセスを許可する」をクリックします。

認証が完了すると、Figma MCP サーバーのステータスが「✔ connected」に変わります。

コードから Figma デザインを生成する

Figma MCP サーバーの generate_figma_design ツールを使用してコードから Figma デザインを生成するには、以下のようなプロンプトで Claude Code に指示します。

アプリのローカルサーバーを起動して、新しい Figma ファイルにトップページのデザインを生成してください。

はじめに generate_figma_design ツールを使用して、新しい Figma ファイルを作成します。引数として outputMode="newFile", planKey, fileName を指定しています。

⏺ figma - generate_figma_design (MCP)(outputMode: "newFile", planKey: "team::xxxxx", fileName: "azukiazusa Blog - Top Page Design")

新しい Figma ファイルが作成されると、capture ID が生成され返されます。この capture ID はブラウザで実行される JS スニペットをどの Figma ファイルと紐づけるかを識別するための ID です。

続いてトップページのデザインを生成するために、ローカルサーバーを起動して、トップページの URL を開きます。このとき /#figmacapture=8782a0a8-a5b6-44d1-a1ab-85a1cbbdd380 のように capture ID が URL のハッシュに含まれた状態でページが開かれます。

その後 Figma がページの内容をキャプチャできるように JavaScript が一時的に挿入されます。ステージング環境のページのようにコードを編集してスクリプトを挿入できない場合は、Playwright のようなブラウザ自動化ツールを使用してスクリプトの挿入もできます。

  <script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
</head>

キャプチャに成功すると、generate_figma_design ツールを captureId を引数にして呼び出します。その後、Figma ファイルの URL が返されます。

⏺ figma - generate_figma_design (MCP)(captureId: "xxxx")
  ⎿  Your Figma file has been generated:
     https://www.figma.com/integrations/claim/xxxx

生成された Figma ファイルを開くと、トップページのデザインが生成されていることがわかります。最低限のレイヤー名がつけられており、Auto Layout も適用されています。

UI の特定の部分だけを選択してデザインも生成できます。既存の Figma ファイルの URL を指定しつつ、ブログ一覧のページネーションの部分だけを選択してデザインを生成してもらいましょう。

ブログ一覧 http://localhost:5173/blog にアクセスして、ページネーションの部分だけを選択して、Figma ファイル https://www.figma.com/design/xxxx/ にデザインを生成してください。

すでに存在する Figma ファイルに対してデザインを生成する場合は、outputMode="existingFile" を指定し、引数に fileKey と nodeId を指定します。その後 capture ID が生成される流れは同じです。

⏺ figma - generate_figma_design (MCP)(outputMode: "existingFile", fileKey: "xxx", nodeId: "0:3")

ページネーションの部分を取得するために、CSS セレクタ nav[aria-label="ページネーション"] を使用します。URL に &figmaselector=nav%5Baria-label といった形でセレクタを指定することで、特定の要素だけを選択してデザインを生成できます。

またキャプチャスクリプトによって挿入される上部のナビゲーションバーからも特定の要素を手動で選択してデザインを生成できます。

ページネーションコンポーネントと、手動で選択したヘッダーコンポーネントの両方が Figma 上に生成されました。

generate_figma_design ツールを使用して生成されるデザインはどれも再現度が高いものでした。ただし Figma 上で Variant や Component などの構造は生成されないため、自動生成されたデザインファイルをベースにデザインシステムを運用するといった使い方は想定されていないようです。1 つのセッションの中で素早く開発とデザインの修正を繰り返すといった使い方が想定されているのではないでしょうか。

例えば開発者がローカルでコードを修正した際に、デザイナーにローカルでアプリケーションをビルドして確認してもらうといった開発フローはよくあると思いますが、これは案外手間がかかるものです。コードから Figma デザインを生成する機能を使用すれば、ローカルでコードを修正した後に Figma 上でも素早く変更内容を確認できるようになります。デザイナーはコードを変更するよりも Figma 上でデザインを確認・修正する方が慣れているでしょうし、何より誰でも簡単にアクセスできる Figma のキャンバス上でコミュニケーションを取れるようになるのは大きなメリットだと思います。