Claude Codeで構築したコードを、編集できるFigma Designに変換可能に

[画像: https://prcdn.freetls.fastly.net/release_image/97201/24/97201-24-f2ab25a316169e1dc52811c0f4172222-2182x1222.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]


ブラウザベースの共同デザイン・プロダクト開発プラットフォームを提供するFigma, Inc.（本社：米国サンフランシスコ）は、Anthropicとのパートナーシップを発表し、Claude Codeから始まるAI活用ワークフローをFigma Design上でさらに拡張します。これにより、アイデア探索やプロダクト開発のプロセスを、従来の直線的で分断された環境から、チームがFigma上で共同作業できるワークスペースへと移行します。

開発者やデザイナー、さらには個人のクリエイターも、Claude CodeのワークフローをFigmaに直接取り込むことで、ブラウザ上で動作する実際のUI（本番環境・ステージング環境・ローカル環境）を取得し、Figmaキャンバス上の編集可能なフレームへ変換できるようになります。
コードは、ビルドを実行しながら単一の状態へと収束させていく点で強みがあります。一方、キャンバスは、体験全体を俯瞰し、分岐を可視化しながら、チームで方向性を形づくっていく点に強みがあります。コードからキャンバスへの移行により、チームは作業を柔軟に行き来でき、必要に応じて検討を深めたり、コラボレーションのために視野を広げたりすることが可能になります。

Claude CodeとFigma Designの連携によりワークフローを拡張

本機能により、開発者やデザイナーは最適な環境から構築を始めることができます。キャプチャした画面を送信するかクリップボードにコピーすることで任意のFigmaファイルに貼り付けることができ、そのままFigmaのフレームとして、他のデザイン作業と並行して整理・複製・調整・共有できます。チームはUIを閲覧するだけでなく、うまく機能している箇所へのコメントや不明確な箇所の指摘、別のアイデアの検討を、新たな環境へ切り替えたり多数のコードファイルを編集したりすることなく行えます。
また、フロー設計においては、1回のセッションで複数の画面を取得でき、順序やコンテキストを保持したまま体験全体を把握できます。コードで作成されたインターフェースをキャンバスに取り込むことで、検討や対話のあり方が変化し、新たな可能性が広がります。これによりチームは、思考や探索を進めるためのオープンな環境で検討を深めることができます。

最初の発想を起点に、より良いアイデアの発展へ

Claude Code to Figmaによって、デザインに関する対話は「どう作るか」から「どの案を発展させるか」へと重心が移ります。Figmaは、多様なワークフローすべてを支援したいと考えています。Figma Makeを使えば、チームはプロンプトから動作するプロトタイプを生成でき、Copy designを使えば、Makeのプレビューをそのままデザインキャンバスへ取り込み、さらに反復できます。Claude Code to Figmaは、この考え方をコードファーストのワークフローにも拡張し、構築済みのインターフェースを編集可能なデザインアセットへと変換します。プロンプトから始めてもコードから始めても、到達点は変わりません。スピーディな制作によって、より深い探索が可能になります。



Claude Code to Figmaがユーザーのアイデアやプロダクト開発をより迅速に進めるための活用方法について、詳しくご覧ください。

Figmaについて

Figmaは、チームが集まり、アイデアを世界最高のデジタルプロダクトや体験へと形にするための場所です。2012年の設立以来、Figmaは単なるデザインツールから進化を遂げ、アイデアの創出からプロダクトのリリースまでを一貫して支援する、接続性の高いAI搭載プラットフォームへと発展しました。
アイデアを考え、デザインし、構築し、リリースするあらゆるプロセスにおいて、Figmaはチームのコラボレーションをよりスムーズで効率的、そして楽しいものにします。
どんな工程においても、チーム全員が同じページを共有できる――それがFigmaの強みです。

PR TIMESプレスリリース詳細へ