Kenapa Saya Selalu Desain di Figma Sebelum Menulis Satu Baris Kode Pun

Salah satu pelajaran paling mahal yang pernah saya pelajari: jangan langsung koding tanpa desain.

Di awal karir, saya sering langsung buka VS Code begitu dapat requirement. Hasilnya? Sering refactor besar-besaran di tengah jalan karena flow-nya tidak masuk akal untuk user.

Sekarang, setiap project SaaS wajib lewat Figma dulu — tidak peduli seberapa “simpel” proyeknya.

Kenapa Figma Dulu?

1. Iterasi di Figma 10x lebih cepat dari iterasi di kode

Mengubah layout di Figma butuh 30 detik. Mengubah layout yang sudah dikoding bisa butuh berjam-jam.

2. Menemukan masalah UX sebelum jadi masalah teknis

Saat desain Socialchat, saya menemukan bahwa flow “assign chat ke agent” awalnya butuh 5 langkah. Di Figma, saya bisa eksperimen hingga turun jadi 2 klik — sebelum ada satu baris kode pun.

3. Presentasi ke client/stakeholder lebih mudah

Mockup di Figma bisa langsung di-share link-nya. Client bisa langsung klik-klik dan kasih feedback spesifik.

Proses Saya

Step 1: Information Architecture

Sebelum bikin visual apapun, saya buat konten apa saja yang ada di setiap halaman dalam format teks sederhana:

Dashboard
├── Header (greeting, quick stats)
├── Active conversations (count, latest)
├── Pending tasks
└── Recent activity

Inbox
├── Channel filter (All, WhatsApp, Instagram...)
├── Conversation list (with search)
└── Chat panel (messages, reply box, agent assign)

Step 2: Low-fidelity Wireframe

Baru setelah itu saya masuk Figma, mulai dengan wireframe hitam-putih. Fokus pada layout dan flow, bukan visual.

Step 3: Design System First

Sebelum desain halaman, saya tentukan dulu:

Color tokens: primary, background, surface, text variants
Typography scale: heading sizes, body, caption
Component library: Button, Input, Card, Badge, Table

Colors:
  Primary: #4537D2
  Surface: #18181B
  Text: #FFFFFF
  Text Muted: #71717A

Typography:
  H1: 36px / 700 / -0.02em
  H2: 24px / 600
  Body: 14px / 400 / 1.6
  Caption: 12px / 400

Spacing: 4px base unit
  xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px

Step 4: High-fidelity Design

Baru di sini visual mulai serius. Biasanya saya desain:

Default state
Hover/focus state
Empty state
Error state
Loading state

Step 5: Developer Handoff

Export ke Dev Mode di Figma. Developer bisa langsung inspect spacing, typography, dan warna tanpa tanya-tanya.

Yang Sering Dilupakan Developer

Empty states — tampilan ketika belum ada data.

Ini seringkali dilewati karena “nanti aja kalau sudah ada data”. Padahal user pertama kali buka app selalu lihat empty state.

Error states — apa yang terjadi kalau API gagal?

❌ "Error 500"
✅ "Gagal memuat percakapan. Coba lagi?"

Loading states — skeleton atau spinner?

Skeleton memberikan kesan halaman lebih cepat load karena user tahu data sedang dimuat.

Kesimpulan

Investasi waktu di Figma sebelum koding selalu terbayar. Untuk project Socialchat yang saya kerjakan, waktu desain di Figma menghemat estimasi 40% waktu implementasi karena keputusan UX sudah selesai sebelum menyentuh kode.