Figma ke Godot UI: Ekspor Hirarki Kontrol dengan AI Studio (Langkah demi Langkah)

Sebagian besar UI game dimulai di Figma: menu utama, HUD, layar toko, pengaturan. Di Godot, Anda memerlukan pohon Control yang mudah dipelihara—MarginContainer, VBoxContainer, TextureRect, Label, Button, dan Theme—bukan folder berisi PNG yang tidak dikelompokkan.

Hambatan yang biasa terjadi ada di tengah: desain terus mengubah Frame sementara engineering membangun ulang container dan anchor secara manual. Artikel ini membahas satu jalur yang dapat diulang: gunakan VberAI Studio (disingkat AI Studio) untuk mengubah struktur Figma menjadi hirarki Control yang siap Godot, mulai dari impor hingga pemeriksaan di editor.

Untuk membandingkan kapan membangun manual vs AI Studio masuk akal, lihat Figma ke Godot: Manual vs AI Studio. Untuk jalur Unity, lihat Figma ke Unity UI.

Kriteria Selesai: Apa Artinya “Di Godot”

Tekstur saja tidak cukup. Anda juga harus memiliki:

1. Pohon node yang memetakan ke Frame Figma yang bermakna (bar atas, daftar, bar bawah, dan sebagainya)
2. Chrome utama yang bertahan pada ukuran 16:9, potret, dan jendela tanpa mengubah seluruh pohon
3. Lapisan teks yang tetap sebagai Label (atau node teks proyek Anda) jika memungkinkan—tidak dibakar menjadi gambar
4. Cara untuk mengekspor ulang setelah perubahan chrome Figma, alih-alih membangun ulang scene dari awal

Sinyal, pengikatan data, dan kunci lokalisasi tetap berada di Godot. AI Studio menghilangkan “membangun ulang kerangka tata letak dari mock”.

Prasyarat

Item	Catatan
Figma	Layar dibagi menjadi Frame dengan nama yang mudah dibaca
AI Studio	Akses ke VberAI Studio
Godot	Prefer proyek Godot 4.x; atur target ekspor ke Godot
Konvensi aset	Sepakati folder scene UI (mis. res://ui/generated/) dan penempatan Theme

Hindari mengirim satu screenshot layar penuh yang diratakan—itu akan menarik Anda kembali ke slicing manual.

Langkah 1: Atur Figma Agar Terbaca Seperti Pohon UI

Pembersihan singkat sebelum impor lebih murah daripada memisahkan node di engine nanti.

Praktik	Mengapa
Nama Frame yang jelas (Panel_HUD, Btn_Play, List_Item)	Nama menjadi nama node Godot
Gunakan Frame / Auto Layout untuk grup; hindari menggabungkan seluruh layar	Hirarki tetap dikenali setelah impor
Simpan salinan sebagai lapisan teks jika memungkinkan	Pemetaan Label lebih mudah
Pisahkan panel nine-slice dari ikon tetap	Aturan peregangan tetap jelas
Sembunyikan Frame draf dan varian yang tidak digunakan	Lebih sedikit kebisingan di pohon ekspor

Langkah 2: Impor Figma di AI Studio

1. Buka VberAI Studio
2. Mulai impor, pilih Figma, dan unggah file (atau gunakan koneksi Figma yang didukung produk)
3. Di pohon lapisan / Frame, konfirmasi layar yang benar-benar Anda kirim—bukan setiap draf di file

Idealnya Anda melihat struktur di kiri, pratinjau kanvas di tengah, dan opsi ekspor berorientasi engine di kanan. Konfirmasi struktur sebelum mengekspor.

Langkah 3: Buktikan Hirarki Sebelum Ekspor

Di kanvas, periksa:

• Penumpukan panel sesuai dengan kepala / badan / footer (atau konvensi chrome Anda)
• Area klik tombol terpisah dari ikon dekoratif
• Salinan yang dapat dilokalkan masih berupa lapisan teks
• Panel yang dapat diregangkan vs ikon ukuran tetap dibedakan

Perbaiki penamaan atau pengelompokan di AI Studio jika memungkinkan. Mengurai .tscn yang rusak di Godot memakan biaya lebih banyak.

Untuk penyesuaian tata letak kecil, jelaskan niat dalam bahasa alami (rapatkan jarak judul ke tombol utama, samakan tinggi item daftar, sembunyikan lencana draf). Tujuannya adalah menyelesaikan chrome sebelum menjadi objek engine—bukan menggambar ulang seluruh set seni melalui obrolan.

Langkah 4: Ekspor untuk Godot

Atur engine target ke Godot. Prefer hirarki Control / scene daripada “hanya sprite”.

Setelah ekspor, di Godot:

1. Tempatkan aset di folder yang disepakati (mis. res://ui/generated/)
2. Lampirkan scene yang diekspor di bawah CanvasLayer atau root UI proyek Anda
3. Konfirmasi root adalah pohon Control (atau container) yang masuk akal
4. Pratinjau beberapa resolusi di editor
5. Hubungkan sinyal pressed dan lainnya, serta pengisian data, dengan GDScript / C# seperti biasa

Logika tetap di proyek. Yang Anda lewati adalah menumpuk manual setiap TextureRect / Label / container dari Figma.

Langkah 5: Daftar Periksa Penerimaan Editor

Periksa	Kriteria lulus
Nama node	Memetakan ke Frame kunci; bukan tumpukan indeks Node2D / Control yang tidak berarti
Tata letak	Chrome tetap dapat digunakan saat jendela diregangkan
Teks	Mengubah salinan Label tidak memerlukan ekspor ulang seluruh layar sebagai seni
Theme	Font dan warna dapat terhubung ke Theme proyek, atau Anda tahu Theme masih perlu penyesuaian manual
Ekspor ulang	Setelah perubahan chrome Figma, ekspor baru dapat menggantikan atau berdampingan dengan scene—tidak membuat Anda terjebak

Pergantian font, area aman, dan lokalisasi biasanya masih perlu penyesuaian. Itu polesan normal, bukan pipeline yang gagal.

FAQ

Apakah ini sama dengan plugin Figma “to code”?
Sebagian besar menargetkan web. Godot membutuhkan konvensi Control / container / Theme. Ekspor yang ramah engine bukan produk yang sama dengan codegen web.

Apakah kami masih mendesain di Figma?
Ya. AI Studio mengonsumsi struktur desain; itu tidak mengatur arah seni. Tata letak dan token tetap berasal dari Figma.

Di mana peran Godot MCP?
AI Studio menangani struktur desain → Control. Godot MCP membantu setelah scene ada di proyek—mengganti nama node, menghubungkan sinyal, memeriksa pohon dari Cursor dan klien serupa. MCP tidak “menghasilkan UI penuh dari gambar”. Pengaturan: Instal Godot MCP.

Apakah ekspor pertama akan sempurna piksel?
Biasanya tidak. Keuntungannya adalah migrasi struktur dalam hitungan menit, bukan pembangunan ulang setengah hari; piksel dan Theme selesai di Godot.

Cara Menjalankan Ulang Setelah Perubahan Desain

Perubahan Figma	Saran
Baris/kolom chrome, tab baru	Ekspor ulang melalui AI Studio
Hanya tint ikon atau salinan	Prefer scene Godot / Theme / tabel terjemahan
Artboard baru sepenuhnya	Ekspor baru → .tscn baru atau ganti jalur yang disepakati