2026年、FigmaとAnthropicが歴史的な提携を発表し、Claude Codeで生成したコードをFigmaキャンバスに直接インポートできる「Code to Canvas」機能がリリースされた。コードとデザインの間に長年存在していた壁が、ついに取り払われる瞬間が訪れたのだ。
従来のデザイン開発フローでは、エンジニアがコードを書き、デザイナーがそれをFigmaで再現するという二度手間が常態化していた。このプロセスは時間的なロスを生むだけでなく、コードとデザインの間に微妙なズレが生じる温床にもなっていた。「Code to Canvas」はまさにこの課題に真正面から切り込む機能だ。
Claude Codeの強みは、単にコードを生成するだけでなく、UIコンポーネントの構造を意味的に理解した上でコードを出力できる点にある。この意味理解があるからこそ、生成されたコードをFigmaのレイヤー構造やコンポーネント体系に正確にマッピングすることが可能になった。AIがデザインシステムの「翻訳者」として機能する新時代の幕開けだ。
デザイナーにとってこの連携は、エンジニアリングの知識がなくても実装済みコンポーネントをデザインファイルに取り込めることを意味する。一方エンジニアは、自分が書いたコードがデザインツール上でどう見えるかをリアルタイムで確認しながら開発を進められる。両者のコラボレーションが根本から変わる可能性を秘めている。
この動きはデザインツール業界全体にも大きな波紋を広げている。ノーコード・ローコードツールがデザインからコードへの変換（Design to Code）を推進してきたのに対し、今回のCode to Canvasはその逆方向、つまりCode to Designという新しいパラダイムを提示している。デザインとエンジニアリングの境界が双方向に溶けていく流れは、もはや止められない潮流だ。
ただし、この技術を最大限に活かすためには、デザイナーとエンジニアの双方が互いの領域への理解を深めることが不可欠だ。AIが橋渡し役を担うとはいえ、デザイントークンやコンポーネント設計の原則を知らなければ、生成されたキャンバスを適切に扱うことは難しい。ツールの進化と並行して、職能の進化も求められる時代だ。
FigmaとClaude Codeの連携は、デザインと開発の未来がいかに密接に絡み合っているかを如実に示している。AIを活用したワークフローの革新は、単なる効率化にとどまらず、クリエイティブな発想そのものを解放する可能性を持っている。今こそデザイナーもエンジニアも、この変化の波に乗るための準備を始めるべき時だ。
