【速報】Figma × Claude Code 連携が発表 — AIで作ったUIを編集可能なFigmaデザインに変換

何が起きたか

Figmaが「Claude Code to Figma」機能を正式発表。 Claude Codeで作成したUIを、編集可能なFigmaデザインに即座に変換できるようになった。

• Figma MCPサーバーをインストール
• Claude Codeで「Send this to Figma」と入力
• 生成されたUIが編集可能なFigmaレイヤーとして取り込まれる

逆方向も可能 — Figmaで磨いたデザインをコードに戻すこともできる。

一次ソース

Building in code is one way to move an idea forward. With AI-powered workflows like Claude Code, it's even easier to spin up explorations, where you can prompt, iterate, and adjust interfaces in real time. The challenge becomes: how to bring that work into a shared space where you can take it further?

— Figma公式ブログ

詳細

できること

機能	説明
Code to Canvas	Claude Codeで生成したUIをFigmaフレームに変換
Canvas to Code	FigmaデザインをMCP経由でコードに反映
フロー一括取り込み	複数画面を一度にキャプチャし、シーケンスを保持
ローカルホスト対応	本番/ステージング/localhost すべて対応

なぜ重要か

1. デザイナー ↔ エンジニアの分断を解消

   • コードから始めてもデザインで仕上げられる
   • デザインから始めてもコードに渡せる

2. ソロ開発者の武器

   • デザインスキルがなくてもClaude Codeで高品質UIを生成
   • Figmaで微調整して完成度を高められる

3. MCP（Model Context Protocol）の実用例

   • Claude → Figma の直接連携
   • 将来的に他のツールとも同様の連携が期待できる

関連プロダクト

• Claude Code - Anthropicのコーディング特化AI
• Claude - Anthropicの対話型AI

今後の展望

Figma CEO Dylan Field氏は「AIコーディングツールで誰でもソフトウェアを作れる時代」に言及。この発表は、デザインツールがコードファーストのワークフローに適応する象徴的な一歩。

Cursorやv0など、他のAIコーディングツールとの連携拡大も期待される。

---

この記事は速報のため、詳細が判明次第更新します。