この記事の注目ポイント：FigmaがAnthropicのClaude Codeと連携する新機能「Claude Code to Figma」を発表。ブラウザで動く実際のUI（localhost／staging／production）をそのままFigmaの編集可能なフレームに変換できる、という話だよ。
3分で読めるように、導入の意図、使い方イメージ、現場での利点と落とし穴まで、実務で役立つポイントをやさしく解説していくよ。
深掘り解説
まず何が起きるのかを端的に言うと、コードで動いているUIをビジュアルのキャンバスに逆変換して、デザイナーが直接編集できるようにする機能なんだ。
仕組みは、FigmaのMCP（Model Control Protocol）サーバー経由でClaude Codeと接続する形。Claude Code内から「Send this to Figma」的な操作で、ブラウザ上のレンダリング結果をFigmaのフレーム／レイヤー構造にマッピングして取り込めるようになるよ。
導入の流れはざっくり次の通り。アカウントでFigmaのパーソナルアクセストークンを作り、Claude Code側でMCP接続を有効にする。UIを生成・実行したあと、送信コマンドでFigmaへコピー。Figma上でレイヤーやコンポーネントを編集して、差分やバージョンを比較できるんだ。
この機能の主なメリットはデザイナーと開発者のズレを減らすこと。デザイナーは実際に動くUIを即座に可視化・修正でき、開発者は実行結果のスクリーンショットではなく編集可能なアセットを共有できる。デザインとコードの往復が短くなるのが最大の利点だね。
ただし注意点もあるよ。第一に、変換の精度は「初期バージョン」では完璧じゃない可能性が高い。色やスペーシング、コンポーネント構造は多くの場合うまくマップされるが、複雑なカスタムコンポーネントや動的な状態（アニメーション、条件付きレンダリング）は手作業が残ることが想定される。
第二にセキュリティ面。FigmaのパーソナルアクセストークンやMCPサーバー経由での通信は権限管理とログ管理を厳密にやる必要があるよ。ローカルで動く開発環境やステージングのUIをそのまま送ると、内部情報や未発表の実装が外部に出るリスクがあるから、ワークスペースの共有範囲を慎重に設定してね。
第三に運用面の課題。ワークフローがコード→キャンバス→コードの往復になることで、競合やソースの単一責任（どちらが“正しい”ソースか）は明確にルール化した方がいい。CIやバージョン管理、デザインシステムとの同期ポリシーを決めておくとスムーズだよ。
最後に実務TIPS。プロジェクトではまず小さな画面（ログインやプロフィールなど）でトライして精度を評価してみて。コンポーネント単位で送って差分を確認すると変換ルールが見えやすいよ。チーム内で「コードが先かデザインが先か」のルールを短期的に決めておくと混乱を避けられる。
まとめ
今回の発表は、「コードの収束」と「キャンバスの発散」をつなげる取り組みで、デザイナーとエンジニアの共同作業をかなり楽にするポテンシャルがあるよ。
ただし初期導入では変換の不一致や権限管理といった運用面の検討が必要。まずは小さなユースケースで試し、社内ルールとセキュリティ方針を固めながらスケールさせていくのがおすすめだよ。
気になる人は公式のガイドを見つつ、チームでワークショップを開いて実地検証してみてね。
参考リンク
※内容の正確性には万全を期していますが、最新の仕様や公式情報については、必ず上記の参考リンク先をご確認ください。
