実装済みUIをFigmaの編集可能なフレームへ変換。FigmaがClaude Codeとの連携を発表

　Figmaは、「Claude Code」から始まるAI活用ワークフローを「Figma Design」上でさらに拡張する、Anthropicとのパートナーシップを2月20日に発表した。

　今回の連携により、Claude CodeのワークフローをFigmaに直接取り込むことが可能となる。Webブラウザ上で動作する実際のUI（本番環境・ステージング環境・ローカル環境）を取得し、Figmaキャンバス上の編集可能なフレームへと変換する機能が提供される。これにより、コードベースで構築された体験全体を俯瞰し、分岐を可視化しながらチームで方向性を議論できる環境へのシームレスな移行が実現する。

　プロダクトマネージャーやデザイナー、開発者は、キャプチャした画面を任意のFigmaファイルに貼り付け、他のデザイン作業と並行して整理や調整を行える。また、新たな環境へ切り替えたりコードファイルを編集したりすることなく、UI上の機能している箇所へのコメントや不明確な部分の指摘が可能だ。1回のセッションで複数の画面を取得できるため、順序やコンテキストを保持したままフロー全体の把握を容易にする。

　さらに、「Figma Make」を使用することで、チームはプロンプトから動作するプロトタイプを生成できる。加えて「Copy design」機能により、プレビューをそのままデザインキャンバスへと取り込んで反復検討を行うことが可能だ。プロンプト起点でもコード起点でも、構築済みのインターフェースを編集可能なデザインアセットへと変換できるため、デザインと開発間のよりオープンで効率的な探索を支援する。