こんにちは！吉川です。

今回は「【Figma × Claude】MCPでつなぐ、自動ワイヤーフレーム生成＆編集フロー！」というタイトルでご紹介していきますが、何をしたかというと

1.FigmaでつくったデザインシステムをClaudeにMCPで読み込む
2.デザインシステムを元にClaudeで実装
3.Claudeで実装したhtmlをMCPでFigmaにデザインファイルとしてインポート
の3つです。

なぜこれをやろうと考えたかで言うと、Web制作の現場においてAIで実装まで自動生成するのは、まだハードルが高い。
ただそれを見据えた上で、デザインシステムのルールを読み込んだWFまで編集可能な状態で自動生成すれば、かなり現場でも使えるフローになるのでは？と思ったためです。（そしてこのフローは後々、デザイン制作や実装にも拡張できると考えています。）

そして、実際にできたワイヤーフレームがこちら！

きちんと元のデザインシステムをベースに、Claudeで実装した画面を忠実に編集可能なデザインファイルとしてFigma上で再現できました。
さらに別途動く実装データとしても存在しているので、htmlモックとしても使えます。

1年半前にもFigmaプラグインをつかったワイヤーフレーム作成はご紹介しましたが、今回はデザインシステムを読み込めることで、より現場で使えるものになっていると思います。

それでは、やり方の一部始終をご覧ください！

1.MCPでFigmaとClaudeをつなぐ

まずはMCPでFigmaとClaudeをつなぎます。そもそもMCP（Model Context Protocol）とは、AIとツール同士をつなげる共通ルール。
ClaudeのようなAIが「このHTMLをFigmaにデザインとして反映して」や「このコードを実行して結果を返して」など、これまで人が手動で操作していたことを“ツール間連携”として命令できるようになります。

なぜ今回Claudeを選んだかというとFigmaと連携しやすいからです。
当初Cursorでやろうとしたのですが、Cursorだと非公開のFigmaファイルを読み込めなく、それだと現実の現場ではなかなか使えません。
ClaudeはFigmaの非公開ファイルも読み込める為、Claudeが一番向いていると考えClaudeでやりました！

それでは設定を行います。

1-1.FigmaのAPIキーの取得

まずはFigmaファイルをClaudeに読み込ませるために必要なFigmaのAPIキーを取得します。
Figmaのアカウント設定画面に入り、下図のようにセキュリティタブにある「個人アクセストークン」エリアにある「新規トークン作成」からAPIキーを作成します。

自分がわかりやすい任意の名前を入力し、APIが利用するスコープを設定（今回はフルで利用できるようにしました）トークンを生成。表示されたAPIキーをコピーし保存します。
※APIキーは一度しか表示されないので注意！！

1-2.Figmaのプラグイン「html.to.design」の設定

1-1はFigmaファイルをClaudeに読み込ませる為に必要でしたが、次はClaudeで実装したファイルをFigmaにデザインファイルとしてインポートするために必要な「html.to.design」というプラグインの設定をします。

まずは空のデザインファイルを開き（このファイルに最終的にはワイヤーフレームが書き出されます）、「プラグイン」→「プラグインを管理」と進んでいき、「html.tro.design」で検索しインストールします。

html.to.designをインストールすると以下のようなポップアップがでてくるので、「MCP」タブの「Enable MCP endpoint」をアクティブにします。

「How to configure your AI tool?」をクリックすると「MCP Configuration」が表示されるので、これもAPIキー同様コピーします。

これでFigma側の準備は完了です！

1-3.Claudeの設定

まずはアプリ版のClaudeの左上のハンバーガーメニューから「ファイル」→「設定」を選択します。（2025年6月現在、ClaudeのMCP連携はアプリ版でしかできません。事前にClaudeアプリをインストールしてください。）

「開発者」タブをクリックし「構成を編集」ボタンをクリック。

「claude_desktop_config.json」を開き、以下のように入力します。

{"mcpServers": {"figma-developer-mcp": {"command":"npx","args": ["-y","figma-developer-mcp","--stdio"],"env": {"FIGMA_API_KEY":"あなたのFigmaのAPIキーをいれてください"      }    },"html.to.design": {"command":"uvx","args": ["mcp-proxy","あなたのhtml.to.designのURLを入れてください"      ]    }  }}

まず「mcpServers」は、1-1の設定の反映箇所です。「あなたのFigmaのAPIキーをいれてください」のところを、1-1でコピーしたAPIキーに入れ替えてください。
次に「html.to.design」は、1-2の設定の反映箇所です。この部分を1-2でコピーした内容にまるっと差し替えてください。

これで保存すれば、Claude側の設定も完了です！
※ちなみに、なぜアプリ版しかMCPが使えないかで言うと、この「claude_desktop_config.json」を編集できるのがアプリ版だけだからです。

2.FigmaのデザインシステムをClaudeに読み込ませる。

まずはFigmaのデザインシステム（デザインコンポーネント）が入ったファイルを準備します。
すでにデザインシステム（デザインコンポーネント）がある場合はそのファイルを使ってください。
今回はテストだったこともあり、人気のUIコンポーネントであるshadcn/uiのFigmaファイルをデザインシステムとして利用しました。

デザインシステムのファイルを開いたら、ファイルの右上にある「共有」ボタンを押し、リンクをコピーします。

これで読み込ませるデザインシステムの準備ができました！

3.Claudeでデザインシステムを読み込み、作りたいページ（ワイヤーフレーム）を実装

次は2のデザインシステムを読み込んで、そのルールに沿ったページを実装します。

まずは、一度アプリ版Claudeを一度落として再起動します。（まだ設定が更新されていない可能性があるため）

1-3の設定画面をもう一度見てみてください。

開発タブにfigma-developer-mcpとhtml.to.designが出現していて、それぞれが「running」と表示されていたら、どっちも成功している状況です！

それではTOPのテキスト入力エリアで実装していきます。
念のためここでも確認しておくと、入力エリアの下にある「検索とツール」エリアに先ほどの二つが表示されていれば、どちらの機能も使える状態ということです。

では画面を実装してみましょう。
本来であれば、ここで要件定義をびっしり作りこむことが重要ですが、今回は実装のテストが目的なので以下のようにしました。

文字数を指定しているのは読み込むファイルが膨大になるので、Claudeの最大文字数である10,000文字を超えて止まってしまうのを防ぐため、念のため余裕をもった最大8,000字で読み込ませています。

するとこのように、どんどんデザインシステムのファイルを読み込んでいき・・

読みこみ終わると実装が始まります。

完成です！
デザインシステムに基づいた実装となっています。
もちろん、すでにこれをモックとして利用することも可能です！

4.Claudeで実装したhtmlをFigmaのデザインデータとしてインポートしWFの完成

それでは最後に実装したデータをFigmaのデザインデータとしてインポートします。
これをすることで手作業でデザインデータを編集できるようになります。
※プロンプトだけでは難しい細かい修正などを加えることもできるため便利です。

Claudeで新規チャットを開き、
/import-html
と入力します。
※import-htmlはhtml.to.designで実装データをFigmaにインポートできるコマンドです。
するとClaudeから読み込むhtmlを聞かれるので、先ほど実装したhtmlをコピーして貼り付けます。

これで実行すると、Figmaの1-2で準備した空のファイルにインポートされていきます！

Figmaデータも完成です！Claudeの実装内容を忠実に再現しつつ、裏で実装されていたバリデーションの内容などもデザイン化されています。
これで手動でも編集できるワイヤーフレームの完成です！！！

ここまで出来れば、自然言語でルールにのっとったワイヤーフレームが作れて、修正もClaude上でhtmlベースで修正しても、FIgma上でデザインデータベースで修正してもOKです。

5.最後に

いかがでしたでしょうか？
今回はWeb制作の実現場でかなり使える内容になっているかと思います。
今回はワイヤーフレームやモックという扱いでしたが、もちろん精度次第でデザイン・実装も実現できるフローです。

MCPの登場により、より出来ることが増えていますが、よりAIの活用難易度、フロー設計難易度が複雑化してきていると感じます。

今後は業務を最適に進めるため、良いものを作るため、両面での設計力が求められていく時代となりそうです。

今後も為になる情報を発信していくので、よろしくお願いします！

▼AI活用などに関するご相談等はメールかXのDMまで！

▼X
https://x.com/yoshikawa5116

▶メール
comixai@outlook.jp