コードからデザインへ、FigmaがClaude CodeのUIをキャンバス上で編集可能に

Figmaは、AIを活用したデザインツール「Figma Make」でプロンプトからプロトタイプを作成する流れに加え、コードファーストのワークフローもサポートすることを目指しています。今回発表された「Claude Code to Figma」機能は、開発者がClaude Codeを使って作成・実行している本番環境、ステージング環境、またはローカル環境のUIを、ブラウザから直接キャプチャできます。キャプチャされた画面はクリップボードにコピーされ、任意のFigmaファイルに貼り付けることで、すぐに編集や整理が可能なFigmaフレームに変換されます。

これにより、従来は一人の開発者の環境に閉じていたコードベースのプロトタイプを、チーム全体で視覚的に比較し、注釈を加え、別の案を探るための共通の素材として活用できるようになります。特に複数ステップからなるユーザーフローでは、一連の画面をまとめてキャプチャし、順序や文脈を保ったままFigmaに取り込むことが可能です。

この機能がもたらす主な利点は、チームが「最初の案」ではなく「最良の案」を追求するプロセスを支援することです。具体的には、(1) 視覚的にシステム全体を一度に見てパターンや矛盾点を発見しやすくする、(2) コードを書き直さずにフレームを複製・再配置してバリエーションを試せる、(3) デザイナー、エンジニア、PMが同じ完成度のアーティファクトに対して早期に反応し合える、(4) 機能的なUIを、ユーザー体験という観点で磨き上げるための共通の方向性に変換できる、という4点が挙げられています。

一方、Figmaからコード環境への「往路」も強化されています。Figmaが提供する「MCPサーバー」を利用することで、LLM（大規模言語モデル）がFigmaフレームのリンクを参照し、デザインを理解した上でのコード生成を実現できます。これにより、チームで共有された理解や決定を、コンテキストを失うことなく再びビルドの段階に戻すことが可能になります。

A. Claude Codeで作成された動作するUIを、Figmaのキャンバス上で直接編集・共有可能なデザインフレームに変換する機能です。

A. 開発者がコードで素早くプロトタイプを作成し、それを基にデザイナーやPMと共同で改良を加える、コードとデザインの往復を促進するワークフローです。

A. LLMがFigmaのデザインファイルを参照して、デザインに即したコードを生成することができるMCPサーバーです。

O!Productニュース編集部からのコメント

コードとデザインの間を行き来する「往復ワークフロー」の重要性が高まっています。Figmaがコード生成AIとの連携に本格的に乗り出したことで、アイデアの具現化からチームでの深化までの流れが、さらにスムーズになるかもしれません。

引用元：Figma Blog