FigmaとAnthropicが「Code to Canvas」をリリース、Claude Codeで生成されたコードを編集可能なデザインとしてFigmaに直接インポートできるように

デザインツールのFigmaがAnthropicと提携し、AnthropicのAIコーディングツール「Claude Code」で生成されたコードをFigmaに直接取り入れる「Code to Canvas」機能をリリースしたことが分かりました。

The Future of Design Is Code and Canvas | Figma Blog
https://www.figma.com/blog/the-future-of-design-is-code-and-canvas/

Code to Canvasは、Claude Codeで作成した作業内容をFigmaに取り込めるようになる機能です。AIコーディングツールとFigmaのプロセスの間に橋渡しをし、AIエージェントに指示して構築した実用的なインターフェースをFigmaに直接取り込むことで、デザイナーとエンジニア双方が素早く設計を調整できます。

Figmaのデザインをコードに変換するツール「Figma MCP」をインストールし、「Send this to Figma」と入力するだけで、ブラウザでレンダリングされた状態が自動的に編集可能なFigmaレイヤーへと変換されます。

Figmaにはもともと「やりたいことをプロンプトで指示すればコードに変換する」といったAIによるデザイン＆コード生成機能がありましたが、新たにClaude Codeを取り入れることで、より進歩したデザインを実現できるようになると期待されています。

Figmaはチームで共同作業できる点がアピールされているツールです。Figmaのディラン・フィールドCEOは今回のCode to Canvas発表にあたり、「従来、プロダクトのデザインと開発は直線的に進むことが一般的でした。たとえば、チームでアイデアをブレインストーミングし、デザインを行い、その後にコーディングを行う、といった流れです。今では、どこからでも始められ、どこへでも進むことができます。重要なのは、そもそも正しい方向に向かって構築しているのかを一度立ち止まって自問することです。何かを作り続ける勢いの中で迷子になってしまい、最初のバージョンがそのまま最終版になってしまうことも少なくありません。Claude CodeからFigma Designへの連携が、そうしたビジョンから抜け出し、一歩引いて全体像を見渡す助けになることを願っています」と述べました。

ウェブアプリ開発プラットフォーム「Vercel」のプロダクトデザイナーであるトム・ジョンソン氏は、「これを批判する人は、Figmaで複雑なウェブアプリを再作成してレイアウトを微調整し、カードの削除、コピーの更新、情報密度の変更などの新しいバリエーションを試すという苦労を経験したことがないはずです。私は、Vercelのデータ量の多いUIのほとんどすべてを、以前はほぼ不可能だった実際のデータを使って5分以内に再作成しました。チャート、リスト、表、フィルター、全部ワンショットです。これはすごい」と評価しました。

フィールドCEOは「Figmaは、デザイン、クラフト、そして視点こそが本当の差別化要因であるという信念のもとに構築されています。AIが言語化できるあらゆる可能性の構築を支援できる世界では、あなたの中核となる仕事は、ほぼ無限の可能性の中から最適な解決策を見つけ出すことです。言い換えれば、デザインについてできる限り多くを学び始めるべきだということです。複数のアプローチを検討し、デザインを洗練させた後は、Figma MCPを使ってデザインの変更をコードベースに簡単に反映させることができます。プロダクト開発がターミナル、プロンプトボックス、ビジュアルUI、あるいは手描きのスケッチから始まる場合でも、最終的にすべてが集約される場所としてFigmaを位置づけたいと考えています」と語りました。