FigmaとAnthropicが提携 — AIで作ったUIを、Figma上で直接編集・レビューできるように - ニュース

デザインツール大手のFigmaとAnthropicが提携を発表しました。
新機能「Claude Code to Figma」により、Claude Codeで生成したUIを編集可能なFigmaフレームとして取り込めるようになります。
デザイナーと開発者のレビュー・修正のやりとりが、具体的にどう効率化されるのかを整理します。

概要

Figma MCPサーバー（MCP = 外部ツールとAIをつなぐ共通接続方式）を介して、Claude Codeで動作中のUIをFigma上の編集可能なレイヤーとして取り込める仕組み。
画面キャプチャの画像ではなく、多くの視覚要素を維持した編集可能なフレームとして扱える点がポイントです。

詳細

1. 従来のワークフローと何が変わるのか

これまでの開発フローでは、デザイナーがFigmaでUIを作成し、仕様書を書き、開発者がそれを見ながらコードに手動変換するのが一般的でした。
逆に、開発者がプロトタイプをコードで先に作った場合はどうか。
デザイナーが確認できるのは「動いている画面のスクリーンショット」程度で、デザインツール上で直接修正する手段がなかったのが実情です。

Claude Code to Figmaは、この確認・修正の往復を短縮します。
開発者がClaude Codeで作ったUIをブラウザ上でキャプチャすると、Figmaがその構造を解析し、編集可能なフレームとしてキャンバスに配置。
デザイナーはそこから直接レイアウトの調整やコメントの追加ができ、「スクリーンショットを見て指示を出す」段階をスキップできます。

2. 具体的なワークフロー（4ステップ）

実際の使い方は次の通りです。

Claude Codeでビルド — ローカルサーバーでUIを構築
画面をキャプチャ — ライブブラウザの状態をFigma互換フレームに変換
Figmaに配置 — キャンバス上で編集可能なアーティファクトとして表示
チームで協働 — コードに触れずに注釈追加・デザイン比較・意思決定

以下のデモ動画で実際のフローを確認できます。

セットアップには、FigmaデスクトップアプリのDev Mode MCPか、リモートMCP（Webブラウザ経由）のいずれかを有効化し、Claude Code側でMCP接続を追加します。

3. デザイナーと開発者、それぞれのメリット

デザイナーにとって:
複数のAI生成案を並べて比較検討できるようになりました。
コードに触れることなくフローの構造をテストし、既存デザインシステムとの整合性も確認可能。

開発者にとって:
Figma上のデザインフレームをClaude Codeにリンクすれば、デザインシステムとの一貫性を保ちやすくなる。
ただし、最終的な品質はプロンプトや実装条件にも左右されるため、MCPは「デザイン情報へのアクセスを容易にする仕組み」と捉えるのが正確です。

今回の新機能「Claude Code to Figma」はコード→デザイン方向の統合です。
逆方向（デザイン→コード）は、Figma MCPサーバーの既存機能として利用可能。
両方を組み合わせることで、デザインと開発を行き来する制作スタイルが実現できます。

出典

画像の引用

動画は Muzli Blog から引用