Claude CodeとFigmaが連携

【画像】Aibrary公式Pinterest

Claude Codeで作成したUIを、そのままFigmaのデザインデータに変換できる新機能「Claude Code to Figma」が2026年2月17日に公開されました。
Figma MCP（Model Context Protocol）サーバーを経由することで、コードとデザインを行き来する双方向のワークフローが実現。開発者・デザイナーの協業スタイルが大きく変わりそうです。

【出典元】From Claude Code to Figma: Turning production code into editable Figma designs

コードからFigmaへ、たった一言で変換できる

「Send this to Figma」とプロンプトを入力するだけで、ブラウザでレンダリングされたUIが自動的にFigmaの編集可能なレイヤーへ変換されます。本番環境・ステージング・localhostのいずれでも利用可能で、複数画面をまとめてキャプチャしてフロー全体を保持することもできます。

取り込んだフレームはそのままFigmaのキャンバス上で操作でき、複製・並べ替え・アノテーションの追加も自由自在です。コードを書き直すことなく、UIのパターンや課題を視覚的に整理できます。

コードとキャンバス、それぞれの得意分野を活かす

Figmaがこの機能を開発した背景には、コードとデザインそれぞれの特性に対する明確な考え方があります。

コードは「収束」に強いです。ブランチを切り、変更してリフレッシュすれば、ある一つの状態に到達できます。一方、Figmaのキャンバスは「発散・探索」に強く、全体像を並べて比較したり、チームで同じ成果物を見ながら議論したりするのに向いています。

これまでのワークフローでは、コードで作ったUIをチームに共有する際にスクリーンショットや録画が必要で、フィードバックにひと手間かかっていました。Claude Code to Figmaはそのギャップを埋め、コードファーストで始めた作業をそのままチームの共有スペースに持ち込めるようにしました。

4つの活用メリット

システム全体を一目で把握できる

複数スクリーンをサイドバイサイドで並べて比較できるため、デザインのパターンや矛盾・抜け漏れを早期に発見しやすくなります。特に多ステップのフローで効果を発揮します。

コードを書き直さずにアイデアを試せる

フレームを複製してレイアウトや構造を変更できるため、試したいアイデアをコードに反映する前に素早く検証できます。ボツになったアイデアもキャンバスに残しておけるので、後から振り返ることも可能です。

デザイナー・エンジニア・PMが同じ画面で議論できる

全員が同じ成果物・同じ精度のUIを共有することで、方向性の判断が早まります。意思決定が必要な場面で、認識のズレが起きにくくなります。

機能をユーザー体験に昇華できる

チームでアノテーションを加えたり、代替案を並べて考えたりすることで、動くだけのUIから「使い心地の良いプロダクト」へと磨き上げる議論がしやすくなります。

FigmaからコードへのラウンドトリップにFigma MCPを活用

Figmaでデザインを整えたら、そのままコードへ戻すことも可能です。Figma MCPサーバーを使えば、Figmaフレームへのリンクをプロンプトに添えるだけで、LLMがデザイン情報を参照しながらコードを生成してくれます。

Figma MCPサーバーはカラー値・タイポグラフィ・コンポーネント構造・レイアウトデータをAIが理解できる形で提供します。Claude Codeと組み合わせることで、デザインシステムに沿った一貫性のあるフロントエンドコードの生成が可能になります。

まとめ

Claude Code to Figmaは、コードとデザインの行き来を当たり前にする機能です。「まず動くものを作る」スピードを保ちながら、最初のバージョンをそのまま完成版にしてしまうトンネルビジョンから抜け出すきっかけになるかもしれません。
Figmaはコードからはじめても、プロンプトからはじめても、手描きスケッチからはじめても、すべてが集まる場所を目指しています。