Checklist Handoff Figma / PSD: Cara Desain UI Game Menghindari Rework

Saat tim engineering mengerjakan ulang UI, separuh waktu masalahnya bukan estetika—melainkan handoff yang tidak memenuhi kebutuhan engine. Anda merevisi frame di Figma atau Photoshop, lalu engineering harus memotong ulang, membangun ulang Canvas, dan menyelaraskan ulang anchor. Timeline molor.

Berikut adalah checklist pra-handoff yang mencakup skenario pencarian berintensi tinggi: Figma export Unity, PSD import Unity UI, game UI slicing, reskin event, dan UI multibahasa. Bagian penutup menjelaskan kesenjangan antara “hanya PNG” dan ekspor terstruktur; alat hanyalah referensi.

---

Apa yang sebenarnya dibutuhkan engineering

Mereka butuh	Bukan ini
Hierarki bernama (tombol, panel, item list)	Satu JPG layar penuh
Tombol normal / pressed / disabled	Satu gambar yang “terlihat bisa diklik”
Layer teks yang bisa diganti	Semua dirasterkan sebagai display type
Posisi relatif dan semantik anchor	Referensi layout + 20 PNG terpisah
Struktur prefab yang bisa dipakai ulang	Bangun ulang dari nol setiap event

Tes penerimaan satu baris: Setelah diimpor ke Unity UGUI / Godot Control / Cocos UI, mengganti teks atau reskin seharusnya tidak memerlukan pembangunan ulang seluruh tree.

---

12 pemeriksaan sebelum handoff

Struktur dan penamaan

#	Pemeriksaan	Catatan
1	Nama Frame / group yang semantik	Panel_Shop, Btn_Buy—bukan Group 12
2	Pisahkan layer interaktif vs dekoratif	Background, border, icon, text
3	Item list sebagai group yang bisa dipakai ulang	List_Item bisa diduplikasi
4	Sembunyikan draft dan Frame usang	Mengurangi noise saat ekspor

State dan spesifikasi

#	Pemeriksaan	Catatan
5	State tombol lengkap	normal / pressed / disabled (atau konvensi penamaan tim)
6	Tandai area 9-slice / stretch	Panel dan input sebaiknya tidak di-scale paksa
7	Resolusi target dan safe area	Mobile portrait: notch dan bottom bar
8	Strategi font	Layer teks untuk lokalisasi; display type ditandai terpisah

Live ops dan lokalisasi

#	Pemeriksaan	Catatan
9	Ruang lebih untuk panjang teks	Bahasa Jerman / Spanyol sering 30%+ lebih panjang dari Inggris
10	Reskin = visual saja	Skin event: layout sama, art dan warna baru
11	Lokalisasi: teks vs layout	Ideal: struktur sama, beberapa file bahasa
12	Format ekspor terdokumentasi	PSD berlapis / link Figma, atau penamaan slice yang disepakati

Persiapan Figma: Alur kerja Figma → Unity. Persiapan PSD: Impor PSD ke Unity UI dalam 5 menit.

---

Tiga jalur handoff (perbandingan objektif)

Jalur	Pendekatan	Paling cocok untuk	Titik masalah
A. Slicing manual	Ekspor PNG + screenshot layout; engineering membangun manual	UI minimal, demo sekali pakai	Setiap revisi = potong ulang dan bangun ulang
B. Plugin engine	Figma Converter, Psd-Exporter, dll.	Tim dengan spesifikasi tetap	Multi-engine sering berarti ulang; kualitas plugin bervariasi
C. Canvas terstruktur	File berlapis → canvas game → pemisahan in-place → ekspor Prefab	UI multi-layar, reskin sering / peluncuran global	Memerlukan adopsi alur ekspor berorientasi game

Jalur C umum pada produk seperti VberAI Studio: parsing PSD / Figma → pemisahan UI yang mempertahankan layout → ekspor ke Unity / Godot / Cocos (lihat memisahkan UI game ke engine). Desainer tetap bisa bekerja di Figma; setelah disetujui, gunakan ekspor terstruktur alih-alih mengekspor 20 PNG secara manual setiap revisi.

---

Skenario desainer yang umum

Game UI slicing / in-place slice

Jika konsep layar penuh hanya berupa PNG, engineering menebak batas tombol. Alur yang lebih aman: letakkan layar di canvas → pisahkan kontrol in place (in-place slicing) sehingga data posisi ikut bersama pemisahan—hindari “slice terlihat benar tapi semuanya bergeser di engine.”

Ekspor Figma ke Unity / Godot

Jika plugin hanya menghasilkan paket sprite datar, engineering tetap harus membangun ulang tree RectTransform / Control. Saat mengevaluasi, tanyakan: apakah hasilnya berupa Prefab / hierarki, atau zip gambar terpisah? Perbandingan Godot: Figma → Godot manual vs alur kerja AI.

Reskin UI game (musiman / event)

Halloween, Natal, dll.: layout sama, aset tema baru. Jika setiap reskin berarti potong ulang dan bangun ulang, irama live-ops melambat. Alat reskin harus menjaga struktur node tidak berubah (reskin UI dan varian tema).

Terjemahan UI game / Figma multibahasa

Jebakan peluncuran global: teks terjemahan meluber keluar layout. Alur ideal: tukar string saja, jangan reflow Frame (terjemahan UI sekali klik). Di Figma.

Ikon dan aset semi-transparan

Ikon skill dan UI VFX sering memerlukan penghapusan background sebelum impor (rambut, transparansi, glow). Matting generik mengaburkan tepi; alat berorientasi game menekankan alpha (matting glow / VFX).

---

Kaitannya dengan alat gambar AI

Midjourney, Jimeng, GPT Image 2, dll. bagus untuk arah visual; jika tujuannya engine, Anda tetap perlu pemisahan dan hierarki. Kombinasi umum:

Konsep UI layar penuh AI → desainer menata layer di Figma → ekspor terstruktur ke engine

Jangan anggap “satu gambar sekelas poster” sebagai handoff final. Perbandingan alat: Generator art desain game AI.

---

FAQ

Bisakah saya handoff hanya dengan PNG? Boleh untuk demo; UI produksi akan sering di-rework. Minimal sertakan catatan layout dan aturan penamaan.

Apakah Figma Auto Layout harus sempurna? Tidak perlu sesempurna web—tetapi pengelompokan dan penamaan lebih penting daripada menggeser piksel.

Apa maksud engineering dengan “slice-nya salah”? Biasanya: state hilang, 9-slice salah.

Reskin vs mengulang UI? Reskin: struktur sama, visual baru. Ulang: hierarki juga berubah. Live ops sebaiknya tetap di jalur reskin.

Apakah desainer perlu belajar Unity? Tidak perlu scripting—tetapi dasar Canvas / Anchor / Prefab sangat memangkas biaya komunikasi.

Apakah VberAI Studio sama dengan Google AI Studio? Tidak. Yang pertama adalah canvas game dan ekspor engine; yang kedua adalah lingkungan pengembangan AI umum milik Google. Lihat perbandingan.