Membangun Design System dari Nol

Apa Itu Design System?

Design system sering disalahartikan sebagai "UI Kit" atau "Component Library". Padahal, design system jauh lebih dari itu. Design system adalah ekosistem lengkap yang mencakup:

• Design Tokens — Warna, spacing, typography, shadow
• Components — Button, input, card, modal, dll
• Patterns — Cara komponen bekerja bersama
• Guidelines — Dokumentasi dan best practices
• Governance — Proses kontribusi dan update

Mulai dari Mana?

Audit Visual

Langkah pertama yang saya lakukan adalah visual audit. Saya screenshot semua halaman produk yang ada, lalu mapping:

• Berapa banyak variasi warna yang dipakai?
• Berapa jenis font dan ukuran?
• Berapa banyak variasi button?
• Apakah spacing konsisten?

Hasilnya sering mengejutkan — satu produk bisa punya 47 variasi warna dan 12 ukuran font yang berbeda.

Design Tokens First

Sebelum membuat komponen, saya selalu mulai dari design tokens:

:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
}

Kenapa tokens dulu? Karena tokens adalah fondasi. Semua komponen akan mereferensi tokens ini, sehingga kalau kita perlu mengubah warna brand, cukup ubah di satu tempat.

Komponen: Quality Over Quantity

Kesalahan umum saat membangun design system adalah langsung membuat semua komponen sekaligus. Approach saya berbeda:

1. Mulai dari 5 komponen paling sering dipakai — Button, Input, Card, Badge, Modal
2. Buat robust — Semua states (default, hover, active, disabled, loading)
3. Dokumentasikan — Kapan pakai, kapan tidak pakai
4. Iterate berdasarkan feedback

"A design system is only as good as the team's ability to adopt and maintain it."

Naming Convention

Naming yang konsisten sangat penting. Saya mengikuti pola:

• component/variant/state
• Contoh: button/primary/hover, input/outlined/focus

Untuk design tokens:

• category-property-variant
• Contoh: color-primary-500, space-md, font-size-lg

Lessons Learned

Setelah membangun 3 design system untuk tim yang berbeda, beberapa pelajaran:

1. Start small, iterate fast — Jangan tunggu sempurna
2. Libatkan developer dari awal — Design system bukan hanya urusan designer
3. Dokumentasi ≠ opsional — Tanpa docs, adoption akan rendah
4. Maintenance > creation — Yang sulit bukan membuatnya, tapi merawatnya

---

Apakah Anda sedang membangun design system? Atau memiliki pertanyaan? Feel free to reach out.