Belajar UI Designer - Handoff Design-Developer

#Pendahuluan

Setelah di episode 12 desain sudah bisa diprototipekan dan diuji, pada episode ini kita menyerahkannya ke pihak yang akan membangun: developer. Handoff adalah jembatan antara desain dan kode — dan di jembatan inilah kualitas desain sering "bocor": spacing yang tidak tercatat, warna yang tidak ada di token, aset yang tidak diekspor.

Mengapa handoff perlu dianggap sebagai deliverable desain, bukan pekerjaan admin? Karena developer tidak membaca pikiran. Setiap detail yang tidak terdokumentasi akan diterjemahkan dengan tebakan — dan tebakan berbeda per orang. Handoff yang baik membuat implementasi setia pada desain tanpa developer harus menanyakan ulang hal-hal kecil.

#Dev Mode Figma

Dev Mode adalah mode Figma khusus developer: developer melihat spesifikasi (size, spacing, fill, radius, font) secara langsung di atas layer, tanpa mengganggu file desain. Yang membuat handoff efektif:

Kebersihan struktur — nama layer yang jelas dan terorganisir (Button/Primary/Default, bukan Frame 47).
Auto layout — developer membaca gap, padding, direction langsung dari struktur, bukan menebak dari koordinat.
Variables — token ditampilkan sebagai variabel (color.primary), bukan hex acak, sehingga developer bisa memetakan langsung ke design token kode.
Sections — kelompokkan halaman dalam sections (Beranda, Transaksi, Profile) agar navigasi cepat.

Tip

Nama layer yang rapi adalah salah satu investasi handoff termurah. Adopsi konvensi penamaan Komponen/State/Ukuran (misal Button/Primary/Md) sejak episode 6 — developer dan desainer masa depan akan berterima kasih setiap kali membuka file.

#Spesifikasi yang Wajib Ada

Developer butuh angka, bukan perasaan. Satu layar yang siap handoff punya spesifikasi:

Layout — grid, margin halaman, dan bagaimana elemen mengalir (responsive rule episode 11).
Spacing — padding & gap tiap container, nilai dari spacing scale.
Typography — font, size, weight, line-height, letter-spacing per teks.
Color — hex/token per elemen, termasuk state hover/pressed.
Radius & border — nilai sudut, ketebalan border, dan jenisnya.
Elevation — shadow dengan offset, blur, dan spread yang presisi.

Contoh spesifikasi kartu transaksi

Card / Transaksi
  background : color.surface        #FFFFFF / #171A21
  border     : 1px color.border     radius 12px
  padding    : space.inset (16px)   gap 8px
  body       : type.body (16px / 1.5 / Medium) color.text.primary
  nominal    : type.body (16px / 1.5 / SemiBold) color.semantic.success
  icon       : 20px, ikon kategori

Bila semuanya berasal dari token, spesifikasi ini hampir "menulis sendiri" — developer tinggal memetakan ke variabel di kode.

#Ekspor Aset

Tidak semua aset bisa dirender dari kode. Ikon kustom, ilustrasi, dan logo perlu diekspor dengan benar:

Format — SVG untuk ikon & grafis vektor (ringan, scalable); PNG untuk aset raster; WebP/AVIF untuk foto.
Ukuran — ekspor sesuai kebutuhan nyata (ikon 20 px → ekspor 1x atau 2x untuk @2x display), jangan ekspor raksasa "untuk aman".
Nama file — deskriptif dan konsisten (icon-arrow-right.svg, bukan icon 2 (final) copy.svg).

SVG yang diekspor dari Figma harus dicek: bersihkan nama path, pastikan tidak ada style inline yang menyulitkan re-theming, dan ukuran file masuk akal. Ilustrasi kompleks terkadang lebih baik ditangani sebagai komponen atau file terpisah.

Warning

Jangan ekspor screenshot layar sebagai gambar untuk menggantikan komponen. Developer tidak bisa menerapkan state hover pada gambar — mereka butuh elemen asli (teks, button, dsb). Screenshot hanya boleh untuk konteks, bukan untuk "mengganti" desain yang bisa dirakit dari kode.

#Dokumentasi Pemutus Ambiguitas

Bagian handoff yang paling sering dilupakan adalah mendokumentasikan perilaku, bukan hanya tampilan. Hal-hal yang harus tercatat:

State — apa yang terjadi saat hover, focus, error, loading, dan disabled (sudah kita bangun di episode 8).
Empty & error — bagaimana tampilan saat data kosong atau aksi gagal.
Perilaku responsive — apa yang berubah saat layar menyempit/melebar (episode 11).
Konten panjang — apa yang terjadi saat teks sangat panjang atau nomor sangat besar (nomor saldo 12 digit!).
Kasus tepi — angka negatif, nilai nol, karakter panjang tanpa spasi.

Sumber terbaik untuk dokumentasi ini adalah Storybook (episode 9): setiap komponen punya stories untuk tiap state dan kasus tepi — developer membaca perilaku dari kode contoh, bukan dari catatan yang bisa terlewat.

#Praktik: Handoff Bersih

Pilih satu layar lengkap (beranda Kantongin) dan rapikan nama layer + sections.
Pastikan semua warna/type memakai variables/token — tidak ada nilai hex nembak.
Dokumentasikan di halaman Spec: layout, spacing, dan perilaku responsive layar itu.
Ekspor 2-3 aset (ikon kategori, logo) dengan format dan ukuran yang benar.
Undang developer (atau rekan) melihat file dalam Dev Mode — catat pertanyaan yang mereka tanyakan, lalu jawab lewat dokumentasi.

#Common Pitfalls

Layer bernama "Frame 47" — developer tidak tahu isinya; struktur menjadi tebakan.
Spesifikasi tidak lengkap — developer menebak state hover, padding, atau shadow.
Aset diekspor asal — ukuran raksasa, format salah, nama acak.
Menyerahkan screenshot — developer tidak bisa menerapkan state/interaksi dari gambar.
Perilaku tidak didokumentasikan — konten panjang dan kasus tepi baru "ditemukan" saat sudah dikoding.

#Penutup

Pada episode 13 ini, kalian telah menyiapkan handoff yang membuat desain Kantongin diimplementasikan secara setia.

Inti yang harus dibawa pulang:

Dev Mode bekerja baik bila struktur file rapi: nama layer jelas, Auto layout, dan variables.
Spesifikasi lengkap = layout, spacing, type, color, radius, elevasi — semuanya dari token.
Ekspor aset dengan format, ukuran, dan nama yang tepat; hindari screenshot pengganti.
Dokumentasikan perilaku (state, empty, responsive, kasus tepi), bukan hanya tampilan.

Di episode 14 selanjutnya kita akan membahas usability dasar — keterbacaan, affordance, feedback, dan heuristik Nielsen untuk mengevaluasi antarmuka Kantongin. Sampai jumpa di episode 14!