Belajar Product Designer - Design Systems & Governance

#Pendahuluan

Setelah di episode 7 kita membangun prototype hi-fi fitur cek gejala, kalian mungkin menyadari satu hal: saat jumlah layar bertambah, warna biru yang "kurang lebih sama" mulai berbeda satu sama lain, dan tombol mulai punya radius sudut yang tidak konsisten. Inilah saatnya design system berperan.

Design system adalah kumpulan prinsip, tokens, komponen, dan dokumentasi yang menjadi satu sumber kebenaran (single source of truth) bagi desain dan kode. Governance adalah aturan yang menjaganya tetap hidup. Mengapa penting untuk product designer? Karena konsistensi bukan soal estetika — soal kecepatan dan kepercayaan: tim eng menerapkan komponen 5x lebih cepat, dan user memercayai produk yang tampak rapi dan terprediksi.

#Design Tokens: Angka di Balik Visual

Design tokens adalah nilai-nilai dasar yang menjadi bahan baku seluruh desain: warna, spacing, radius, typography, shadow, dan lainnya. Struktur token yang baik memisahkan level abstraksi:

Level	Contoh	Kegunaan
Primitive	`blue.500 = #1667D9`	Palet mentah
Semantic	`color.primary = blue.500`	Makna (primary/danger/success)
Component	`button.primary.bg = color.primary`	Penerapan di komponen

Kenapa pemisahan ini penting? Saat rebranding, cukup ganti nilai primitive blue.500 dan seluruh produk ikut berubah tanpa menyentuh komponen. Ini juga memudahkan kolaborasi dengan engineer (episode 13) karena token diterjemahkan langsung ke CSS variables.

Contoh token → CSS variable

:root {
  --color-primary: #1667d9;
  --color-danger: #d9264a;
  --space-2: 8px;
  --radius-md: 12px;
  --font-ui: "Inter", sans-serif;
}

Buatlah token awal Sehati: 3 warna utama (primary, danger untuk hasil triase merah, success untuk hijau), 4 skala spacing (4/8/12/16), dan 3 level radius. Cukup untuk memulai; tambahkan sesuai kebutuhan, bukan dari awal.

#Komponen: Blok yang Bisa Dipakai Ulang

Komponen adalah kombinasi token menjadi elemen siap pakai: button, input, card, dan seterusnya. Di Figma, komponen dibuat dengan variants (varian ukuran, state) dan properties (ikon opsional, teks bisa diubah). Prinsipnya: satu sumber, banyak pemakaian — ketika komponen diubah, semua instance ikut berubah.

Komponen Button dengan variants

Button
├─ Size: sm / md / lg
├─ Variant: primary / secondary / ghost
└─ State: default / hover / pressed / disabled
    → total varian terkelola, bukan 12 komponen terpisah

Note

Kesalahan paling umum saat mulai membangun design system: membuat komponen untuk semua kemungkinan sejak awal. Mulailah dari komponen yang dipakai 3+ layar. Aturan pragmatis: "3 use-cases" — abstraksi sebelum 3 pemakaian hanyalah spekulasi.

#Governance: Menjaga Design System Hidup

Design system mati bukan karena jarang dipakai, tetapi karena tidak dirawat. Governance adalah jawabannya: siapa yang boleh mengubah, bagaimana perubahan diajukan, dan kapan ditinjau.

Alur governance sederhana

Usulan perubahan → Reviewer design & eng
  → Impact check (tokens? komponen? docs?)
  → Setuju? → Update di Figma + code
  → Tidak?   → Kembalikan dengan alasan

Aturan awal yang cukup untuk Sehati:

Satu owner: product designer (kalian) memegang keputusan akhir soal sistem visual.
RFC untuk perubahan besar: perubahan token/komponen lewat alur usulan + review engineer.
Dokumentasi ringan: tiap komponen punya halaman Figma dengan nama, varian, dan cara pakai.
Audit berkala: setiap sprint, cek apakah ada desain yang "nakal" melenceng dari token.

#Membangun Fondasi Design System Sehati

Buka Figma, halaman 04 Design System, dan buat:

Tokens page: warna (primitive + semantic), spacing, radius, typography.
Komponen dasar: Button (3 varian × 3 state), Input, Card, Badge (untuk hasil triase), List Item.
Dokumentasi singkat: tulis satu halaman teks "cara pakai & kapan memakai" untuk tiap komponen.

Lalu uji: buka prototype episode 7 dan ganti semua elemen manual dengan komponen design system ini. Jika hasilnya sama — bagus, konsistensi terjaga.

#Penutup

Inti yang harus dibawa pulang:

Design system = prinsip + tokens + komponen + dokumentasi, satu sumber kebenaran desain & kode.
Token dipisah berlapis (primitive → semantic → component) agar mudah di-scale dan di-rebrand.
Komponen memakai variants & properties; bangun hanya yang dipakai 3+ layar.
Governance menjawab siapa mengubah, bagaimana mengubah, dan kapan meninjau.
Mulailah kecil: token dasar + 4-5 komponen sudah cukup untuk produk fase 1.

Di episode 9 selanjutnya kita akan membahas usability & interaction design — menerapkan 10 heuristic Nielsen, pola interaksi, dan desain states sehingga komponen design system Sehati bukan hanya konsisten, tetapi juga benar-benar mudah dipakai. Sampai jumpa di episode 9!