Membangun Design System dari Nol

Jujur saja, dari dulu saya paling tidak suka yang namanya perencanaan. Bikin design guideline di awal proyek itu bagi saya bagian yang paling membosankan, seperti mengerjakan daftar tugas panjang sebelum sempat mengutak-atik desain.

Saya tahu fungsinya, guideline itu jadi pakem waktu membuat halaman-halaman berikutnya. Tapi tetap saja saya tidak bisa fokus di situ. Yang ada di kepala cuma keinginan langsung ngedesain tanpa patokan, buta sedikit ya sudah, gas saja.

Yang akhirnya menyadarkan saya justru ide-ide spontan yang muncul di tengah kerja. Ide itu bagus-bagus, muncul sendiri tanpa direncanakan, lalu dari situ saya sadar mau tidak mau memang harus dan wajib bikin design guideline. Apalagi sekarang ada istilah tokenisasi juga, jadi keputusan yang dulu cuma nongol di kepala ikut tertulis jadi variabel yang bisa dipakai ulang.

Di unip.studio, kebiasaan lama itu pernah kejadian. Tiap kali bikin halaman baru saya berdebat sendiri di kepala soal warna primary yang mau dipakai. Buka file warna lama, tutup lagi, pilih yang lain, besoknya berubah lagi. Percaya deh, siklus seperti itu makan waktu lebih banyak dari yang saya akui.

Sekarang semua keputusan warna, tipografi, dan radius ditulis sekali di satu file token, lalu dipakai ulang di skills, portfolio, dan blog. Keputusan yang sama tidak perlu diambil dua kali, dan warna tidak muncul "kira-kira". Ini cara saya membangun design system dari nol.

Mulai dari token, bukan dari komponen

Kalau kamu pernah membuat tombol dulu lalu baru menyadari ada tiga versi warna primary dan dua macam radius di file yang sama, kamu tidak sendirian. Saya melihat pola itu sering di proyek orang lain, dan saya juga pernah melakukannya sendiri. Karena itu design system di sini dimulai dari token, variabel kecil yang jadi sumber kebenaran bersama.

Di unip.studio, token yang dipakai hanya tiga kelompok:

• Warna: primary burnt orange, accent teal, background cream, masing-masing punya varian hover.
• Tipografi: serif untuk headline, sans untuk body. Dua keluarga font, itu saja.
• Radius: satu angka dasar yang dipakai hampir semua komponen. Radius 8 atau 12 itu kelihatannya cuma beda dua digit, tapi pernah bikin saya bolak-balik lebih lama dari memilih nama domain. Sekarang pertanyaan itu berhenti muncul tiap bikin halaman.

Begitu token-nya ada, pertanyaan "warna apa yang dipakai?" berhenti muncul karena jawabannya selalu sama.

Definisikan sekali, ekspor ke dua arah

Menjaga desain dan kode tetap sinkron adalah bagian yang paling sering bolong. Yang saya lakukan:

1. Tulis token di satu tempat. Di web modern, CSS variables adalah titik temu paling murah, bisa dibaca CSS langsung dan dipetakan ke Tailwind lewat @theme.
2. Petakan ke utility. Karena token sudah berupa CSS variable, Tailwind bisa membacanya langsung. text-primary di kode = --color-primary di file token.
3. Di Figma, pakai variabel dengan nama yang sama. Nama yang identik membuat perbincangan "yang mana primary-nya?" hampir tidak pernah terjadi lagi.

Komponen dari yang paling dipakai dulu

Jangan bangun 30 komponen sekaligus. Mulailah dari yang muncul di setiap halaman: kartu, tombol, link, heading. Di unip.studio, satu komponen kartu dipakai untuk skills, portfolio, dan blog, variasinya cuma isi dan aksen sedangkan desainnya tetap sama.

Kalau sebuah komponen disalin dua kali, itu kandidat ekstraksi. Kalau cuma sekali, biarkan saja.

Dokumentasikan seperlunya

Design system tidak butuh situs dokumentasi raksasa untuk studio kecil. Dokumentasi setinggi itu menyenangkan sekali waktu dibuat, tapi jarang dibuka lagi setelah minggu pertama. Cukup:

• Daftar token dengan nilainya.
• Satu halaman contoh tiap komponen beserta state-nya (default, hover, disabled).
• Catatan kapan tidak memakai komponen tertentu.

Hemat waktu setelah halaman kedua

Di awal memang terasa seperti kerja tambahan, apalagi buat saya yang dari sononya paling tidak suka bagian perencanaan. Tapi hitungannya berubah setelah halaman kedua dan ketiga dibuat. Waktu yang dulu habis untuk memilih warna dan spacing kini tinggal menyusun yang sudah ada.

Yang tersisa jadi soal komposisi dan cerita, dan diskusi radius 8 atau 12 sudah lama tidak muncul lagi tiap bikin halaman baru. Jadi ya, mau tidak mau, guideline ini memang harus ada, sekarang saya menulisnya sekalian di awal supaya tidak kena lagi seperti dulu.