FigmaからGodot UIへ：AI StudioでControl階層を書き出す（手順）

ゲームUIの多くはまず Figma で固まります。メインメニュー、HUD、ショップ、設定画面などです。Godot 側で欲しいのは、メンテできる Control ツリー——MarginContainer、VBoxContainer、TextureRect、Label、Button、そして Theme——であり、グループ化されていない PNG の束ではありません。

よく詰まるのは中盤です。デザイン側は Frame を直し続け、実装側はコンテナとアンカーを手で組み直します。本稿では、繰り返せる一本の道筋だけを書きます。VberAI Studio（以下 AI Studio）で Figma の構造を Godot 向けの Control 階層にし、取り込みからエディタ確認まで進める方法です。

手組みと AI Studio のどちらが向くかを比べたいときは、FigmaからGodot：手動 vs AI Studio を見てください。Unity 向けの同系統は FigmaからUnity UI です。

完了条件：「Godotに入った」とは何か

テクスチャが出ただけでは完了ではありません。少なくとも次を満たします。

1. ノードツリーが意味のある Figma Frame（トップバー、リスト、ボトムバーなど）に対応している
2. 16:9、縦画面、ウィンドウ化でも、メインの枠組みをツリー全体の手直しなしで保てる
3. テキスト層はできるだけ Label（またはプロジェクトで決めたテキストノード）のままにし、画像に焼き込まない
4. Figma で枠を直したあと、シーンをゼロから作り直さずに再エクスポートできる

シグナル、データバインド、ローカライズキーは引き続き Godot 側です。AI Studio が省くのは「モックどおりにレイアウト殻を作り直す」作業です。

前提条件

項目	内容
Figma	画面ごとに Frame が分かれ、名前が読める
AI Studio	VberAI Studio を開ける
Godot	できれば Godot 4.x プロジェクト。書き出し先は Godot
リソース規約	UI シーンの置き場（例：res://ui/generated/）と Theme の置き場を先に決める

画面全体を一枚に潰したスクショだけ渡すのは避けてください。手動スライスに引き戻されます。

手順1：FigmaをUIツリーらしく整える

取り込む前の短い整理は、エンジン内でノードをバラすより安いです。

やり方	理由
Frame 名をはっきり付ける（Panel_HUD、Btn_Play、List_Item）	名前が Godot のノード名になる
グループは Frame / Auto Layout で表現し、画面全体の結合レイヤーを減らす	取り込み後も階層が分かる
文言はできるだけテキスト層のまま	Label への対応がしやすい
九スライスの土台と固定アイコンを分ける	伸び方のルールが明確になる
下書き Frame と未使用バリアントを隠す	書き出しツリーのノイズが減る

手順2：AI StudioでFigmaを取り込む

1. VberAI Studio を開く
2. 新規取り込みで Figma を選び、デザインファイルをアップロードする（製品が対応する Figma 連携でも可）
3. レイヤー / Frame ツリーで、納品する画面だけを確認する。ファイル内の下書き全部ではない

理想は左に構造、中央にキャンバス、右にエンジン向け書き出しオプションです。構造が合ってから書き出します。

手順3：書き出す前に階層を確認する

キャンバス側で特に見る点：

• パネル入れ子がヘッダー / 本体 / フッター（またはチームの枠規約）に対応しているか
• ボタンの当たり判定と装飾アイコンが分かれているか
• ローカライズする文がまだテキスト層か
• 伸びる土台と固定サイズのアイコンが区別されているか

名前やグループがおかしければ、できるだけ AI Studio 内で直します。Godot に入ってから壊れた .tscn をほどく方が高いです。

レイアウトを少し直すときは、自然言語で意図を書いても構いません（タイトルと主ボタンの間隔を詰める、リスト行の高さを揃える、下書きバッジを隠す、など）。目的はエンジンオブジェクトになる前に枠を整えることであり、会話で美術一式を作り直すことではありません。

手順4：Godot向けに書き出す

対象エンジンを Godot にし、「スプライトのみ」ではなく Control 階層 / シーン を優先します。

書き出し後、Godot では次を行います。

1. 合意したフォルダへ置く（例：res://ui/generated/）
2. CanvasLayer かプロジェクトの UI ルートに、書き出したシーンを載せる
3. ルートが妥当な Control（またはコンテナ）ツリーか確認する
4. エディタで複数解像度をプレビューする
5. ボタンの pressed などのシグナルとデータ埋め込みは、いつもどおり GDScript / C# でつなぐ

ロジックはプロジェクト側のままです。省けるのは、Figma から TextureRect / Label / コンテナを一つずつ手積みすることです。

手順5：エディタ受け入れチェックリスト

確認項目	合格の目安
ノード名	主要な Frame に対応し、無意味な Node2D / Control 連番だらけでない
レイアウト	ウィンドウを伸ばしても枠が使い物にならないほど崩れない
テキスト	Label の文言変更のために画面全体を再書き出ししなくてよい
Theme	フォントや色をプロジェクト Theme に繋げられる、または Theme の手作業がまだ必要だと分かっている
再書き出し	Figma の枠を直したあと、再書き出しで差し替え／並列配置できる。行き詰まりにならない

フォント差し替え、セーフエリア、ローカライズは普通もう一度通ります。それは通常の仕上げであり、パイプライン失敗ではありません。

よくある質問

Figmaの「コード化」プラグインと同じですか？
多くは Web 向けです。Godot が要るのは Control / コンテナ / Theme の約束です。エンジン向け書き出しと Web の codegen は別物です。

それでもFigmaでデザインしますか？
します。AI Studio はデザイン構造を受け取り、美術の方向は決めません。レイアウトとトークンは引き続き Figma が正です。

この段階でGodot MCPは何をしますか？
AI Studio がデザイン → Control 構造を担当します。Godot MCP はシーンがプロジェクトに入ったあと、Cursor などからノード名変更、シグナル接続、ツリー確認などに使います。MCP は「画像から全画面 UI を生成する」ものではありません。導入は Godot MCP のインストール を参照してください。

初回書き出しはピクセル単位で一致しますか？
たいていはしません。得は、半日の手組みではなく分単位で構造を移せることです。ピクセルと Theme は Godot で詰めます。

改版後のやり直し方

Figmaの変更	すすめ
枠の行列入れ替え、新しいタブ	AI Studio 経由で再書き出し
アイコン色や文言だけ	まず Godot のシーン / Theme / 翻訳表で直す
画面まるごとの新アートボード	新規書き出し → 新しい .tscn、または合意パスを差し替え