こんにちは、ハヤマです。
今回は、Figmaで新たに実装された機能「Code to Canvas」が興味深かったので、
こちらについて理解を深めていきたいと思います。
（本記事は、普段コーディングを担当しないWebデザイナーの目線から書いています）
Code to Canvasとは
2026年2月17日に発表された「Code to Canvas」は、FigmaとAnthropic社のAI「Claude（クロード）」との連携によって誕生した新機能です。
これにより、AIエージェント型コーディングツール（※）が生成したUIのコードを、ブラウザでの表示をキャプチャし、そのままFigmaの編集可能なデザインとして取り込めるようになりました。
※Code to Canvasのサポート対象クライアントはこちら
Code to Canvasでできること
従来のデザインとコードの関係は、デザイナーがデザイン → エンジニアがコードに変換と、制作フローが一方通行でした。
「Code to Canvas」では、その逆を実現。AIエージェントがUIのコードを生成 → ブラウザでの表示をキャプチャ → そのままFigmaに編集可能なデザインとして取り込むことができます。
ポイントは「書き出した画像」ではなく「本物のデザインデータ」である点。テキスト、矩形、画像、ベクターなど、レイアウトを構成する要素として表示されます。
Figmaに読み込んだあとは、通常のオブジェクトと同じようにデータを編集したり、チームメンバーにコメントをもらったりすることができます。
補足
・Code to Canvasは、ブラウザ経由でデータのやりとりをするためWebページのみ対象（iOSアプリの取り込みは対象外）となります。
・Figmaは無料プラン（Starterプラン）から利用が可能とのこと。
使用例
大まかな流れは以下の通り。
- 対象のAIエージェントで「（例）こんなボタンのUIを作って」とプロンプトを入力
- AIエージェントがHTMLやCSSなどのコードを生成
- 生成したコードをFigmaに送ると、キャンバス上に編集可能なフレームとして展開
- Figmaでデザインを整えたあとにコードを逆生成、チーム間で共有を行う
デザインを仕上げる前にプロトタイプを素早く作りたい時や、エンジニア⇔デザイナー間で認識合わせをしたい時、複数パターンを比較検討したい時…そんなスピード感を重視したい場面で特に役立ちそうです。
デザイナーの仕事は「なくなる」のではなく「変わる」
Code to Canvasのような機能が登場すると、「デザイナーの仕事がAIに奪われる？」と心配になる方もいるかもしれません。でも、少し視点を変えてみてください。
AIが得意なのは、「指示されたものをすばやく形にすること」。一方でデザイナーが本来担うのは「何を作るべきかを考え、ユーザーの体験を設計する力」です。
モックアップを量産するといった作業をAIが担ってくれるなら、デザイナーはより「どんな体験にしたいか」「どのUIがユーザーに伝わるか」という創造的な判断に集中できます。
（逆にClaude CodeなどのAIエージェントに対する理解が深まれば、今後はデザイナーだけで完結できるものも増えていきそうです）
Figmaは今、そういった「デザイナーが思考に集中できる環境」を整える方向に進化しています。
さいごに
Code to Canvasは、デザイン → コードという従来の一方通行な関わりにおいて、双方向ワークフローを叶えるための“架け橋”を提示してくれました。
生成時のトークンコストや生成されたデザインパーツの整合など考慮する点はありますが、チームでのプロジェクトの推進力を高める手段としても興味深いです。
今後も理解を深めていきたいと思います。
