FigmaからUnity UIへ：VberAI AI Studioでデザインフレームをプレハブに変換

Figma → Unity がパイプライン中盤でなぜ壊れるのか

ほとんどのゲームUIは Figma で始まります。メニュー、HUDバー、ショップシート、モーダルスタックのフレーム。そのレイアウトを Unity に持っていくには、通常、PNGをエクスポートし、Canvasの下にドロップし、アンカー、フォント、ネストされたパネルを手作業で再構築する必要があります。

この引き継ぎこそが時間を奪います。

• デザイナーはFigmaで反復し、エンジニアはUGUIで同じ構造を再構築する
• レイヤー名とグループ化は、フラットなスプライトダンプではほとんど残らない
• 小さなFigmaの修正が、またRectTransformの作業に午後を費やす原因になる

本当に必要なのは 構造の保存、つまりフレームが階層になることであり、別のPNGパイプラインではありません。

有用なFigma → Unity パスとは

プロダクション対応の引き継ぎは、次の3つを行うべきです。

1. インポート：名前付きフレームとグループを保持したままFigmaファイルをインポート
2. キャンバス上で直感的に操作し、レイアウトとアセットを調整
3. UnityのUIコンポーネント/プレハブとして エクスポートまたは同期 し、エディタ内でプレビュー可能にする（エンジン階層、Web HTMLではない）

VberAI AI Studio（略称：AI Studio）は、このループを中心に構築されています。デザインファイルを読み込み → 階層を検査 → オプションでAI編集 → Unity向けエクスポート。デザインシステムやC#の配線を置き換えるのではなく、「このパネルをCanvasで再作成する」という反復作業を排除します。

また、Unity MCP を使用すれば、後でCursorやClaude Codeからインポートしたプレハブを調整できます。この記事では、デザインからUnity UIへのパスに焦点を当てます。

まずFigmaファイルを準備する

AI Studioは、ファイルがUI構造として読み取り可能な状態で最適に動作します。

プラクティス	重要な理由
フレームに明確な名前を付ける（Panel_HUD、Btn_Play、List_Item）	名前がノード/GameObjectのラベルになる
マージされたフラットなアートボードよりもグループを優先する	階層がインポート後も維持される
可能な限りテキストをテキストレイヤーとして保持する	TextMeshPro / UI Text のマッピングが向上
一貫した間隔とオートレイアウトを使用する	アンカーとレイアウトグループがよりきれいに変換される
スクラッチフレームと未使用のバリアントを非表示にする	エクスポートツリーのノイズが減る

単一のフラットなスクリーンショットを納品することは避けてください。それではスライスを再度行うことになり、問題を先送りにするだけです。

ワークフロー：インポート → 編集 → Unityにエクスポート

1. Figmaデザインをインポートする

1. VberAI で VberAI AI Studio を開く
2. Figma から新しいインポートを開始し、Figmaファイルをアップロードする
3. レイヤー/フレームツリーが目的の画面と一致していることを確認する

左側に構造、中央にキャンバスプレビュー、右側にエンジンエクスポートオプションが表示されます。これはバッチ画像コンバーターではなく、デザインツールに似ています。

2. エクスポート前に階層を検査する

以下を確認します。

• パネルのネスト（ヘッダー/ボディ/フッター）
• ボタンのヒットエリアと装飾アイコンの区別
• 編集可能なままにすべきテキストレイヤー
• ナインスライスまたはストレッチ可能な背景と固定アイコンの区別

問題があればここで命名とグループ化を修正します。Unityインポート前に問題を発見する方が、壊れたプレハブを後でデバッグするより安上がりです。

3. デザインに手を加える必要がある場合は自然言語編集を使用する

チームがよく使うプロンプトの例：

• 「タイトルとプライマリボタンの間の垂直方向の間隔を詰める」
• 「ショップリストのアイテムの高さを揃える」
• 「ドラフトバッジを非表示にして、メインCTAを残す」

目的はチャットでゲームを再設計することではありません。階層がUnityオブジェクトになる 前に、レイアウトと構造を修正することです。

4. Unity用にエクスポートまたは同期する

ターゲットとして Unity を選択し、スプライトのみの出力よりも UI階層/プレハブ 出力を優先します。

その後、Unityで：

1. パッケージを明確なフォルダにインポートする（Assets/UI/Generated/）
2. プレハブをCanvas（またはUIルート）の下に配置する
3. 16:9 と縦長のモバイルアスペクト比で簡易テストを行う
4. 通常通りC#でボタンとデータバインディングを配線する

インタラクションロジックは引き続き自分で担当します。手動で全てのImage/Text/LayoutGroupをFigmaに合わせて再構築する手間が省けます。

手動エクスポートとの使い分け

アプローチ	最適なケース
手動PNG + 再構築	単発のマーケティングスプラッシュ、高度なカスタムシェーダー
AI Studio Figma → Unity	メニュー、HUD、ショップ、設定—繰り返し構造
AI Studio + Unity MCP	同じ画面を、AIクライアントで一括リネーム/イベント配線

Godot固有の比較については、Figma to Godot: Manual vs AI Studio を参照してください。PSDに特化したUnityの簡単な手順については、How to Import PSD to Unity UI in 5 Minutes を参照してください。

FAQ

これはFigmaの「コード化」プラグインと同じですか？ これらのツールは多くの場合、Webスタックを対象としています。ゲームUIにはCanvas/RectTransform（またはエンジン同等品）、フォント、プレハブの慣習が必要です。エンジン対応のエクスポートは、Webコード生成とは別の問題として扱ってください。

デザイナーはFigmaを使い続ける必要がありますか？ はい。AI Studioはデザイン構造を消費しますが、アートディレクションを発明するわけではありません。レイアウトとトークンのソースオブトゥルースとしてFigmaを維持してください。

Figma MCPについてはどうですか？ Figma MCP は、AIクライアントがFigmaとライブで通信する場合（フレームの読み取り、コメント、デザインの微調整）に便利です。Figmaデザイン → Unity ゲームUIの場合、実用的なパスは依然としてAI Studioでのインポート → 階層 → Unityエクスポートです。Unity MCP は、プレハブが配置された 後 に、エディタ自動化が必要な場合に使用します。

すべての画面が初回エクスポートでピクセルパーフェクトになりますか？ フォント、セーフエリア、ローカライゼーションについてはレビューが必要です。利点は、手動での再作成に何時間もかかる代わりに、構造の転送が数分で済むことです。

次のステップ

1. Figmaで実際のメニュー画面のフレーム名を整理する
2. VberAI AI Studio で実行する
3. Unityパッケージをインポートし、前回の手動再構築と時間を比較する

その後、画面にエディタ内自動化が必要な場合は、Unity MCP に接続し、AIコーディングクライアントから反復します。