Figma ke Godot UI: Eksport Hierarki Control dengan AI Studio (Langkah demi Langkah)

Tajuk

Figma ke Godot UI: Eksport Hierarki Control dengan AI Studio (Langkah demi Langkah)

Penerangan

Import UI permainan Figma ke Godot: kekalkan struktur Frame dalam VberAI Studio, eksport hierarki nod Control, kemudian sahkan susun atur dan Tema dalam editor.

Kandungan (Markdown, tanpa frontmatter)

Kebanyakan UI permainan bermula dalam Figma: menu utama, HUD, skrin kedai, tetapan. Dalam Godot, anda memerlukan pokok Control yang boleh diselenggara—MarginContainer, VBoxContainer, TextureRect, Label, Button, dan Tema—bukan folder PNG yang tidak dikumpulkan.

Kesesakan biasa adalah di tengah: reka bentuk sentiasa mengubah Frame manakala jurutera membina semula kontena dan anchor secara manual. Artikel ini merangkumi satu laluan yang boleh diulang: gunakan VberAI Studio (AI Studio untuk ringkas) untuk menukar struktur Figma menjadi hierarki Control yang sedia Godot, dari import hingga pemeriksaan editor.

Untuk membandingkan bila membina secara manual vs AI Studio masuk akal, lihat Figma ke Godot: Manual vs AI Studio. Untuk laluan Unity, lihat Figma ke Unity UI.

Kriteria Selesai: Apa Maksud “Dalam Godot”

Tekstur sahaja tidak dikira. Anda juga perlu mempunyai:

1. Pokok nod yang memetakan kepada Frame Figma yang bermakna (bar atas, senarai, bar bawah, dan sebagainya)
2. Krom utama yang bertahan di bawah saiz 16:9, potret, dan tetingkap tanpa menala semula keseluruhan pokok
3. Lapisan teks yang kekal sebagai Label (atau nod teks projek anda) apabila boleh—bukan dibakar ke dalam imej
4. Cara untuk mengeksport semula selepas perubahan krom Figma, bukannya membina semula scene dari awal

Isyarat, pengikatan data, dan kunci penyetempatan masih kekal dalam Godot. AI Studio menghapuskan “bina semula shell susun atur dari mock”.

Prasyarat

Item	Nota
Figma	Skrin dibahagikan kepada Frame dengan nama yang boleh dibaca
AI Studio	Akses ke VberAI Studio
Godot	Pilih projek Godot 4.x; tetapkan sasaran eksport ke Godot
Konvensyen aset	Persetujuan pada folder scene UI (cth. res://ui/generated/) dan penempatan Tema

Elakkan menghantar satu tangkapan skrin penuh yang diratakan—itu menarik anda kembali ke pemotongan manual.

Langkah 1: Susun Figma Supaya Ia Membaca Seperti Pokok UI

Pembersihan ringkas sebelum import lebih murah daripada membahagikan nod dalam enjin kemudian.

Amalan	Mengapa
Nama Frame yang jelas (Panel_HUD, Btn_Play, List_Item)	Nama menjadi nama nod Godot
Gunakan Frame / Auto Layout untuk kumpulan; elakkan menggabungkan skrin penuh	Hierarki kekal dikenali selepas import
Kekalkan salinan sebagai lapisan teks apabila boleh	Pemetaan Label lebih mudah
Asingkan panel nine-slice daripada ikon tetap	Peraturan regangan kekal jelas
Sembunyikan Frame draf dan varian yang tidak digunakan	Kurang bunyi dalam pokok eksport

Langkah 2: Import Figma dalam AI Studio

1. Buka VberAI Studio
2. Mulakan import, pilih Figma, dan muat naik fail (atau gunakan sambungan Figma yang disokong produk)
3. Dalam pokok lapisan / Frame, sahkan skrin yang anda benar-benar hantar—bukan setiap draf dalam fail

Sebaik-baiknya anda melihat struktur di kiri, pratonton kanvas di tengah, dan pilihan eksport berorientasikan enjin di kanan. Sahkan struktur sebelum anda mengeksport.

Langkah 3: Buktikan Hierarki Sebelum Eksport

Pada kanvas, periksa:

• Sarang panel sepadan dengan kepala / badan / kaki (atau konvensyen krom anda)
• Kawasan sentuh butang berasingan daripada ikon hiasan
• Salinan yang boleh disetempatkan masih lapisan teks
• Panel yang boleh diregangkan vs ikon saiz tetap dibezakan

Betulkan penamaan atau pengumpulan dalam AI Studio apabila anda boleh. Menguraikan .tscn yang rosak dalam Godot memakan kos lebih.

Untuk tweak susun atur kecil, terangkan niat dalam bahasa semula jadi (ketatkan jarak tajuk-ke-butang utama, seragamkan ketinggian item senarai, sembunyikan lencana draf). Matlamatnya adalah untuk menyelesaikan krom sebelum ia menjadi objek enjin—bukan untuk melukis semula keseluruhan set seni melalui sembang.

Langkah 4: Eksport untuk Godot

Tetapkan enjin sasaran ke Godot. Pilih hierarki Control / scene daripada “sprites sahaja”.

Selepas eksport, dalam Godot:

1. Letakkan aset dalam folder yang dipersetujui (cth. res://ui/generated/)
2. Lampirkan scene yang dieksport di bawah CanvasLayer atau akar UI projek anda
3. Sahkan akar adalah pokok Control (atau kontena) yang munasabah
4. Pratonton beberapa resolusi dalam editor
5. Sambungkan isyarat pressed dan lain-lain, serta pengisian data, dengan GDScript / C# seperti biasa

Logik kekal dalam projek. Apa yang anda langkau ialah menyusun setiap TextureRect / Label / kontena secara manual daripada Figma.

Langkah 5: Senarai Semak Penerimaan Editor

Semakan	Kriteria lulus
Nama nod	Memetakan kepada Frame utama; bukan timbunan indeks Node2D / Control yang tidak bermakna
Susun atur	Krom kekal boleh digunakan apabila tetingkap diregangkan
Teks	Menukar salinan Label tidak memerlukan mengeksport semula keseluruhan skrin sebagai seni
Tema	Fon dan warna boleh disambungkan ke Tema projek, atau anda tahu Tema masih memerlukan laluan manual
Eksport semula	Selepas perubahan krom Figma, eksport baharu boleh menggantikan atau duduk di sebelah scene—bukan membuat anda tersekat

Penggantian fon, kawasan selamat, dan penyetempatan biasanya masih memerlukan laluan. Itu adalah penggilapan biasa, bukan saluran paip yang gagal.

Soalan Lazim

Adakah ini sama dengan plugin Figma “ke kod”?
Kebanyakan plugin tersebut menyasarkan web. Godot memerlukan konvensyen Control / kontena / Tema. Eksport mesra enjin bukan produk yang sama dengan penjanaan kod web.

Adakah kita masih mereka bentuk dalam Figma?
Ya. AI Studio menggunakan struktur reka bentuk; ia tidak menetapkan hala tuju seni. Susun atur dan token masih datang dari Figma.

Di manakah Godot MCP sesuai?
AI Studio mengendalikan reka bentuk → struktur Control. Godot MCP membantu selepas scene berada dalam projek—namakan semula nod, sambungkan isyarat, periksa pokok dari Cursor dan klien serupa. MCP tidak “menjana UI penuh dari imej”. Pemasangan: Godot MCP install.

Adakah eksport pertama akan menjadi piksel-sempurna?
Biasanya tidak. Kemenangan adalah migrasi struktur dalam beberapa minit dan bukannya pembinaan semula setengah hari; piksel dan Tema selesai dalam Godot.

Cara Menjalankan Semula Selepas Perubahan Reka Bentuk

Perubahan Figma	Cadangan
Baris/lajur krom, tab baharu	Eksport semula melalui AI Studio
Tona ikon atau salinan sahaja	Pilih scene Godot / Tema / jadual terjemahan
Papan seni penuh baharu	Eksport baharu → .tscn baharu atau gantikan laluan yang dipersetujui