生成AI開発ツール「Claude Code」で書いたコードから、デザインツール「Figma」上に直接プロトタイプを送り込めるようになりました。最新のFigma MCPサーバーアップデートにより、コードで動く試作品を素早くFigmaキャンバスに反映し、複数バージョンを並べて検討できるワークフローが実現します。
新機能の概要と狙い
Claude CodeからFigmaキャンバスへ「ダイレクト出力」
今回のアップデートでは、Claude Codeで作成した動作するプロトタイプを、そのままFigmaキャンバス上に送信できるようになりました。これにより、コードベースで作ったUIやインタラクションのアイデアを、即座にFigma上で視覚的なデザイン案として確認・共有できます。
Figma MCPサーバーアップデートの役割
この連携の裏側を支えるのが、最新アップデートが行われた「Figma MCPサーバー」です。MCP（Model Context Protocol）は、外部ツールとAIアシスタントをつなぐための仕組みで、今回のアップデートにより、Claude Codeで生成・編集した成果物をFigmaに安全かつスムーズに受け渡せるようになりました。
「コードで作り、Figmaで比較検討する」新しい流れ
コードでプロトタイプを作成し、それをFigmaキャンバスに送り込むことで、複数のUI案や挙動パターンをFigma上に並べて比較することが可能になります。デザイナーやPM、エンジニアが同じ画面を見ながら議論しやすくなり、意思決定までのスピードが上がることが期待されます。
開発・デザイン現場にもたらされるメリット
デザイナーとエンジニアのコラボレーション強化
これまで、エンジニアがコードで試したUIは、動画キャプチャやスクリーンショットで共有されることが多く、細かな挙動やレイアウトの違いをFigma上で再現するには手間がかかっていました。新機能により、コードから直接Figmaに反映できるため、以下のようなコラボがしやすくなります。
- エンジニアが試作したUIを、デザイナーがFigma上で即座にレビュー
- デザイナーがFigmaで修正案を作り、再びコード側の改善にフィードバック
- PMやクライアントが、候補UIをFigma上で横並びで比較・評価
プロトタイピング〜レビューの時間短縮
プロトタイプを一度ブラウザやアプリとして立ち上げてから、スクリーンショットや説明資料を作る従来のプロセスに比べ、Claude CodeからFigmaへの直接送信は大きな時間短縮につながります。作っては共有し、フィードバックを受けて修正する「短いサイクル」を何度も回しやすくなる点が現場にとっての大きなメリットです。
複数バージョンを同時に検証できる価値
Figmaキャンバスに複数のプロトタイプ案を送り込み、画面を並べることで、「どのレイアウトが読みやすいか」「どのボタン配置が押しやすいか」といった比較検討が視覚的かつ直感的に行えます。ABテストやユーザビリティテストの前段階として、チーム内での素早い評価・絞り込みに活用できるでしょう。
活用のヒントと今後の広がり
プロダクト初期段階での「アイデア爆速検証」
プロダクト開発の初期フェーズでは、アイデアの数をどれだけ早く試せるかが重要です。Claude Codeで素早くUI案をコード化し、気になる案をそのままFigmaに送り込むことで、デザイン面・機能面の両方から妥当性をチェックできます。仕様が固まりきっていない段階での「探索的プロトタイピング」に特に向いたワークフローといえます。
デザインシステムとの連携可能性
Figma上で運用しているデザインシステムと、コード側のコンポーネント実装を近づけていく取り組みにおいても、この新機能は役立ちます。Claude Codeで試した新しいコンポーネント案をFigmaに送って合意形成をとり、その後で正式にデザインシステムやコンポーネントライブラリへ取り込む、といった流れもスムーズになることが期待されます。
まとめ
最新のFigma MCPサーバーアップデートにより、Claude Codeで構築した動作するプロトタイプをFigmaキャンバスへ直接送信できるようになりました。これにより、コードベースの試作とFigmaでのビジュアル検討がシームレスにつながり、チーム全体でのコラボレーションや意思決定が加速します。今後、AIとデザインツールの連携が進む中で、このようなワークフローはプロダクト開発の新しい標準の一つになっていくかもしれません。
