FigmaとAnthropic「Code to Canvas」― AIが作ったコードをデザインに逆変換
デザインツール大手のFigmaとAnthropicが2026年2月17日（米国時間）、「Code to Canvas」機能を発表しました。
Claude Codeなどで生成されたUIコードを、Figma上の編集可能なデザインフレームに変換できる機能。
「コードからデザインへ」という逆方向の橋渡しが実現した形です。
概要
Code to Canvasは、ブラウザ上で動いているUIをキャプチャし、Figmaのキャンバスに編集可能なデザインとして取り込める機能。
FigmaはMCP Server（Model Context Protocol、AIツールと外部サービスをつなぐ標準規格）も提供しており、AIツールとの双方向連携を推進しています。
詳細
1. 使い方はシンプル ― UIをキャプチャしてFigmaに取り込む
操作手順は直感的。
ブラウザ上で動いているUI（本番環境でもローカル環境でも可）をキャプチャし、Figmaのキャンバスに取り込むだけ。
取り込んだデザインは通常のFigmaフレームとして自由に編集・注釈・比較が可能です。
2. デザイナーとエンジニアの双方向ワークフロー
これまでFigmaは「デザイン→コード」方向の連携が主流でした。
Code to Canvasはその逆、「コード→デザイン」方向を実現。
AIコーディングツールで素早くプロトタイプを作り、それをFigmaに取り込んでデザイナーが仕上げる、というワークフローが可能になります。
3. MCPで広がるAIツール連携
今回の連携基盤であるMCP（Model Context Protocol）は、AIツールと外部サービスを標準的な方法でつなぐ規格。
Figma以外のツールでもMCP対応が進んでおり、今後はAIコーディングツールと各種サービスの連携がさらに広がる可能性があります。
まとめ
「コードからデザインへの逆変換」は、これまで手作業が必要な領域でした。
Code to Canvasによりその壁がなくなり、デザイナーとエンジニアの連携がまた一歩スムーズになりそうです。