Pernahkah kamu mengerjakan project dimana tombol "Submit" di halaman Login berbeda dengan tombol di halaman Profile? Warnanya sedikit beda, *border-radius*-nya tidak sama, atau ukurannya meleset 2 pixel?

Itulah yang terjadi jika aplikasi membesar tanpa adanya Design System. Di artikel ini, saya akan berbagi pengalaman saat me-revamp platform Kelas Pintar, bagaimana kami menyelaraskan ribuan komponen agar konsisten di web dan mobile.

01 Mengapa Design System Penting?

Design system bukan sekadar kumpulan aset UI di Figma. Ia adalah "Single Source of Truth". Keuntungannya bukan cuma untuk desainer, tapi juga untuk kita para developer:

  • Kecepatan Development: Kita tidak perlu bikin komponen dari nol setiap kali ada fitur baru.
  • Maintainability: Ganti warna brand? Cukup ubah di satu tempat (token), semua komponen ter-update.
  • Skalabilitas: Memudahkan onboarding developer baru karena pola kodenya sudah standar.
💡 Pro Tip: Design system yang baik adalah yang "hidup". Ia harus terus dievaluasi seiring berkembangnya kebutuhan produk.

02 Audit UI: Langkah Pertama

Sebelum membangun sistem baru, kita harus tahu seberapa berantakan sistem yang lama. Kumpulkan semua screenshot tombol, input, dropdown, dan tipografi yang ada. Biasanya kamu akan kaget menemukan 15 jenis warna biru yang berbeda padahal seharusnya hanya ada satu warna brand.

03 Menerapkan Atomic Design

Kami menggunakan metodologi Brad Frost: Atomic Design. Ini sangat cocok jika kamu menggunakan React karena polanya sangat mirip dengan component-based architecture:

  • Atoms: Elemen terkecil (Button, Input, Label).
  • Molecules: Gabungan atom (Search Bar = Input + Button).
  • Organisms: Gabungan molekul (Header = Search Bar + Navigation + Logo).

04 Design Tokens

Ini adalah bagian favorit saya. Design tokens adalah variabel (JSON/CSS) yang menyimpan nilai desain seperti warna, spacing, dan font-size. Dengan tokens, desainer di Figma dan developer di VS Code menggunakan nama variabel yang sama.

// Contoh Design Token (JSON)
{
  "color": {
    "brand": { "primary": "#7c3aed" },
    "surface": { "neutral": "#f7f8fc" }
  },
  "spacing": {
    "md": "16px",
    "lg": "24px"
  }
}

05 Maintenance & Dokumentasi

Jangan biarkan komponenmu terkubur di kode. Gunakan tools seperti Storybook agar tim bisa melihat dan mencoba komponen secara terisolasi tanpa harus menjalankan aplikasi utama.

Ingat, musuh utama design system bukanlah teknologi, melainkan komunikasi. Pastikan desainer dan developer selalu sinkron sebelum merilis komponen baru.

❓ Pertanyaan yang Sering Ditanya

Apa perbedaan antara UI Kit dan Design System?
UI Kit hanyalah kumpulan elemen visual di software desain. Design System jauh lebih luas, mencakup dokumentasi, prinsip desain, panduan penulisan (copywriting), hingga library kode yang siap pakai (reusable components).
Kapan waktu terbaik membangun Design System?
Waktu terbaik adalah di awal project saat pondasi sedang dibangun. Namun, jika project sudah berjalan, audit UI adalah langkah awal untuk mulai mengkonsolidasi elemen yang berantakan menjadi sebuah sistem.
Tools apa yang direkomendasikan untuk dokumentasi Design System?
Untuk desainer, Figma adalah standar industri. Untuk developer, Storybook sangat direkomendasikan untuk mendokumentasikan komponen secara terisolasi. Untuk dokumentasi menyeluruh, tools seperti Zeroheight atau Notion sering digunakan.

Mau belajar UI/UX Engineering?

Saya membuka mentoring privat bagaimana mengubah desain Figma menjadi kode React yang clean dan scalable.

Tanya Jadwal Kelas →