Belajar UI/UX Design - Design System & Design Tokens

#Pendahuluan

Setelah di episode 9-11 kita membangun palet, type scale, komponen, dan prototype, pada episode ini kita membakukan semuanya menjadi satu sumber kebenaran: design system dengan design tokens. Inilah yang membedakan proyek "yang kebetulan konsisten" dari produk yang konsisten karena sistem.

Mengapa penting? Bayangkan KasirKita punya 3 desainer dan 5 developer. Tanpa sistem, masing-masing akan menggunakan biru yang "mirip-mirip" dan spacing yang "kira-kira 10px". Design system menyatukan semua — satu komponen, satu token, satu bahasa — sehingga tim lebih cepat dan pengguna selalu melihat produk yang koheren.

#Prinsip Design System

Design system adalah kumpulan standar + komponen + dokumentasi yang dipakai berulang. Prinsip intinya:

1. Single source of truth — setiap keputusan desain didefinisikan sekali, dipakai di semua tempat.
2. Reusable, bukan copy-paste — komponen dikembangkan sekali, di-instance di banyak layar.
3. Versioned & governed — perubahan lewat proses review, bukan asal edit.
4. Dokumentasi — setiap keputusan punya alasan tertulis, bukan sekadar hasil.

#Governance

Governance adalah aturan siapa yang boleh mengubah sistem dan bagaimana:

• Adder — semua orang boleh menambahkan (proposal token baru), asal mengikuti template.
• Approver — tim design system (atau design lead) menyetujui penambahan/perubahan.
• Changelog — setiap perubahan tercatat versi & alasannya, supaya developer tahu apa yang berubah di tiap rilis.

Untuk KasirKita yang tim kecil, governance cukup sederhana: satu pemilik sistem, semua perubahan lewat pull request & review. Governance penuh untuk tim besar dibahas di episode 25.

#Komponen Reusable

Dari episode 10, komponen kit kita tinggal distandarkan:

Buttons   → primary / secondary / ghost / danger (5 state)
Inputs    → default / hint / error / disabled
Cards     → product / transaction / summary
Feedback  → toast (success, error, warning) / modal / skeleton
Navigation → tab bar / header / pagination

Setiap komponen punya varian + property (misal tombol: size, state, icon), bukan salinan yang berbeda. Perubahan warna tombol cukup sekali — semua instance ikut berubah.

#Design Tokens (DTCG)

Design tokens adalah nilai visual (warna, spacing, type, radius) yang disimpan sebagai variabel dengan nama terstruktur. Standar industri kini DTCG (Design Tokens Community Group) — format JSON terbuka agar token bisa dipertukarkan antar tool (Figma, Style Dictionary, code).

#Naming Convention

Nama token mengikuti hierarki: kategori → properti → varian. Contoh:

{
  "color": {
    "background": { "default": { "$type": "color", "$value": "#FFFFFF" } },
    "text": {
      "primary":   { "$type": "color", "$value": "#1A1A1A" },
      "muted":     { "$type": "color", "$value": "#5C5F66" }
    },
    "brand": {
      "primary": { "$type": "color", "$value": "#0E7490" }
    },
    "status": {
      "success": { "$type": "color", "$value": "#15803D" },
      "warning": { "$type": "color", "$value": "#C2410C" },
      "danger":  { "$type": "color", "$value": "#B91C1C" }
    }
  }
}

Keuntungannya: token semantik (color.text.primary) memisahkan makna dari nilai (#1A1A1A). Jika brand berganti warna, cukup ubah nilai token — seluruh aplikasi ikut tanpa menyentuh satu pun layar.

#Token Space dan Type

{
  "spacing": {
    "xs": { "$type": "dimension", "$value": "4px" },
    "sm": { "$type": "dimension", "$value": "8px" },
    "md": { "$type": "dimension", "$value": "16px" },
    "lg": { "$type": "dimension", "$value": "24px" },
    "xl": { "$type": "dimension", "$value": "32px" }
  },
  "font": {
    "body": { "$type": "fontFamily", "$value": "Plus Jakarta Sans" },
    "mono": { "$type": "fontFamily", "$value": "JetBrains Mono" }
  }
}

Di Figma, token dipetakan lewat Variables (panel Design): buat Collection color, spacing, type, lalu hubungkan setiap style ke variable. Hasilnya, developer bisa membaca variabel yang sama persis saat handoff (episode 22).

#Praktik: Design System Mini + Tokens

Di file KasirKita, bangun sistem:

1. Collection Variables: color (background, text, brand, status), spacing (xs-xl), font, radius.
2. Style & component: terapkan variables ke komponen kit episode 10.
3. Documentation page: satu frame "Home" design system berisi palet, type scale, komponen, dan panduan pemakaian singkat.
4. Ganti nilai uji: ubah satu token (misal brand.primary) dan perhatikan semua layar berubah konsisten.

#Common Pitfalls

• Design system sebagai museum — komponen dibuat tapi tidak dipakai karena "yang ada sudah cukup"; wajibkan adopsi di setiap layar baru.
• Token ganda — color.brand.blue dan color.primary menyimpan nilai sama; satu sumber kebenaran saja.
• Tanpa governance — semua orang edit komponen inti tanpa review; sistem cepat kacau.
• Sistem menutup kreativitas — design system adalah basis, bukan penjara; aturan penyimpangan yang disengaja harus tertulis.

#Penutup

Pada episode 12 ini, kalian telah membakukan keputusan visual KasirKita menjadi design system dengan tokens.

Inti yang harus dibawa pulang:

• Design system = standar + komponen + dokumentasi, dikelola dengan governance yang jelas.
• Komponen reusable di-instance, bukan di-copy-paste; perubahan menyebar otomatis.
• DTCG tokens menyimpan nilai visual sebagai variabel terstruktur yang bisa diekspor lintas tool.
• Naming convention semantik (color.text.primary) memisahkan makna dari nilai, sehingga skala brand tidak merusak desain.

Di episode 13 selanjutnya kita akan memastikan sistem ini berpihak pada semua orang: accessibility (A11y) & WCAG — POUR, keyboard navigation, screen reader, dan kontras, lengkap dengan audit KasirKita. Sampai jumpa di episode 13!