Claude Code to Figma使ってみた

2023年中盤ぐらいから仕事でもプライペートでもAIを使わない日がなくなってしまったし、Google検索をすることもほとんどなくなった。

僕はデザインとフロントエンドのちょうど中間あたりをフラフラ漂っているクラスタなのだが、Claude Code to Figmaというドンピシャっぽいのが発表されたので、週末触ってみていた。

Claude Code to Figma(Code to Canvas) は、2026年2月17日にFigmaとAnthropicが発表した新機能で、Claude Codeで生成したコードをFigmaの編集可能デザインに変換することができるツール。

これはUIコードをブラウザでレンダリングし、Figma MCPサーバー内のツールでlocalhostをキャプチャし、Figmaファイルに変換する。 また利用にはCLIやコードエディタの対応プラグインUI経由で対話的に行う。

どうだろう?

この内容から分かるように、 これすなわち基本的にはブラウザのスクショを理解しようとするツール なのだ(今のところ)

となると現時点ではFigma MCPのget_design_contextの利用。すなわちDesign to Codeの方がまだ信頼感のある情報を渡せるということになる。

まだまだこれからだ!

Anthropicの爆進が続いているので、是非とも今後の激アツの展開を期待している 🔥