FigmaがClaude Codeと連携、実行中のコードを編集可能なUIデザインに直接変換

プロダクト開発の現場では長年、デザイナーがFigmaで画面を描き、エンジニアがそれをコードで再現するという一方通行の流れが当たり前でした。

しかしClaude CodeのようなAIツールの登場で、その順序が逆転し始めています。ターミナルに数行プロンプトを打つだけで動くプロトタイプが立ち上がる時代です。一方で、出来上がったUIをチームで見直そうとすると、画面キャプチャを共有するか、わざわざローカルでビルドしてもらう必要があり、余計な手間が生じていました。

Figmaは2月17日、Claude Codeから立ち上げた稼働中のUIをキャプチャし、編集可能なFigmaフレームへと変換する新機能を発表しました。

動く画面をそのままFigmaのレイヤーへ

この機能は、ブラウザ上に表示された実稼働UIを直接デザインキャンバスへと引き戻す仕組みです。

対象となるのはlocalhostだけでなく、ステージング環境や本番環境のWebサイトも含まれます。静止画のスクリーンショットを貼り付けるのではなく、テキストやレイアウトが調整可能なFigmaのネイティブフレームとして展開されます。

画面遷移を伴う一連のフローも、1回のセッションで複数画面まとめて取り込むことができ、コンテキストや順番を維持したままキャンバスに並べられます。

プロンプトからプロトタイプを作るFigma Makeと組み合わせることで、コード発でもデザイン発でも柔軟に行き来できるようになります。

MCP連携でコードへの逆戻りを実現

画面を取り込んで終わりではありません。Figmaはコードへの往復ワークフローを用意しています。

Figma MCPサーバーを介して、変更を加えたFigmaフレームのリンクをClaude Codeなどのエージェントツールに渡すことができます。これにより、LLMがデザインの意図を把握した上でコードを再生成する体制が整います。

開発には、2024年にFigmaに買収されたDynaboardの創業者であるAlex Kern氏や、AIデザインディレクターのGui氏が関わっています。

なぜ重要か

私たちは、このアップデートをFigmaによる見事な自己防衛策であり、賢い一手だと評価しています。

Claude CodeやCursorの普及によって、多くの開発者がデザインツールを開かずにコードだけで初期プロトタイプを完結させるようになりつつありました。この流れを放置すれば、Figmaがコラボレーションの中心から外れてしまうリスクがありました。

稼働するコードを直接キャンバスに取り込めるようにしたことで、Figmaはコードファーストの探索を受け入れつつ、議論と発散の場としてキャンバスを維持することに成功しています。

ユーザーにとっても試す価値は非常に高いと言えます。ターミナルでプロンプトを何往復もさせてボタンの配置を微調整するより、Figma上で直接動かしてMCP経由で反映させる方が直感的で遥かに高速です。

実際のWebコードが持つ複雑なコンポーネント構造が、デザインシステムとどこまで綺麗に整合するかという課題は残りますが、コードとデザインの境界線を崩す大きな転換点になりそうです。