Apa Itu Token Desain

Token desain adalah variabel bernama yang menyimpan keputusan desain—warna, jarak, tipografi, bayangan—dalam format yang tidak bergantung pada teknologi. Token menjembatani alat desain dan kode serta memastikan konsistensi di berbagai platform.

Tanpa token, nilai akan diduplikasi di seluruh basis kode CSS, iOS, dan Android. Satu sumber kebenaran token berarti perubahan warna merek akan memperbarui setiap platform secara bersamaan.

Kategori umum meliputi: warna (merek, semantik, netral), tipografi (font-family, ukuran, ketebalan, tinggi baris), jarak (kisi 4px), radius, bayangan, dan animasi (durasi, pelandaian).

Token disimpan sebagai JSON, YAML, atau W3C Design Token Format. Setiap token memiliki nama, nilai, tipe, dan deskripsi opsional. Transformasi mengubahnya menjadi keluaran khusus platform.

Token global adalah nilai mentah: color-blue-500: #3b82f6. Token alias merujuk token global secara semantik: color-action-primary: {color-blue-500}. Komponen merujuk token alias, bukan nilai mentah.

Properti kustom CSS adalah keluaran alami untuk token web. Token bernama spacing-4 menjadi --spacing-4: 1rem dan digunakan di seluruh lembar gaya sebagai margin: var(--spacing-4).

Pengaya Figma Tokens dan Tokens Studio menyinkronkan token desain antara Figma dan repositori kode. Desainer dan pengembang menggunakan kosakata token yang sama, sehingga menghilangkan kesalahan penerjemahan saat serah terima.

Token terus berkembang: tandai nilai lama sebagai usang tanpa merusak penggunanya dengan menyediakan pemetaan migrasi. Penerapan versi semantik pada paket token memberi sinyal perubahan yang merusak kepada tim pengguna.

JSON token yang sama menghasilkan variabel CSS untuk web, konstanta Swift untuk iOS, dan sumber daya XML untuk Android. Satu berkas definisi menghilangkan perbedaan keputusan desain antarplatform.

Mulailah dengan token warna dan jarak. Ganti nilai hardcode satu per satu berkas. Jalankan pencarian di basis kode untuk menemukan nilai heksadesimal mentah dan literal piksel yang masih digunakan dalam keputusan desain hardcode.

Token alias memungkinkan penerapan tema: ubah token global yang dirujuk oleh suatu alias, dan seluruh tema akan berubah tanpa menyentuh kode komponen. Tema terang, gelap, dan merek semuanya berasal dari lapisan alias yang sama.

Token desain adalah variabel bernama yang menyandikan keputusan desain dalam format yang tidak bergantung pada platform. Token global menyimpan nilai mentah; token alias memberikan makna semantik. Bersama-sama, keduanya mendukung sistem desain yang konsisten, mudah dipelihara, dan lintas platform.