Developer Handoff — Dari Desain ke Kode
Handoff adalah proses di mana desain berpindah dari designer ke developer. Handoff yang baik = development yang lancar. Handoff yang buruk = bolak-balik revisi tanpa akhir.
Apa yang Harus Ada di Handoff
1. Design Specs
- Ukuran font, warna, spacing — dalam nilai yang exact (bukan "agak besar")
- Gunakan design tokens jika ada
- Responsive behavior — apa yang berubah di mobile vs desktop
2. Assets
- Ikon dalam format SVG
- Gambar sudah di-optimize (WebP/AVIF)
- Logo dalam berbagai ukuran
3. Interaction Notes
- Hover states
- Animasi/transisi
- Loading states
- Error states
- Edge cases (teks panjang, gambar tidak tersedia)
4. Component Documentation
- Variants (primary, secondary, dll)
- States (default, hover, disabled)
- Props yang bisa dikustomisasi
Tools untuk Handoff
| Tool | Kelebihan |
|---|---|
| Figma (Dev Mode) | Inspect langsung, copy CSS |
| Zeplin | Specs tergenerate otomatis |
| Storybook | Interactive component docs |
Design Review
Setelah developer implement, lakukan design review:
- Pixel comparison — overlay desain di atas implementation
- Responsive check — test di berbagai ukuran layar
- Interaction check — test semua states dan animasi
- Edge cases — teks panjang, data kosong, loading
Tips untuk Developer
- Bertanya sebelum berasumsi — jika spesifikasi tidak jelas, tanya designer
- Implement token, bukan hardcode —
var(--color-primary)bukan#2563EB - Flag edge cases — "Apa yang terjadi jika nama user 50 karakter?"
- Share early — tunjukkan progress, jangan tunggu selesai 100%
Tips untuk Designer
- Sediakan semua states — jangan hanya happy path
- Annotate — tambahkan notes untuk behavior yang tidak obvious
- Use consistent naming — nama layer di Figma = nama component di kode
- Maintain design system — keep tokens dan components up to date
Tim terbaik bekerja secara kolaboratif, bukan sequential. Designer dan developer terlibat dari awal dan saling memberi feedback sepanjang proses.
