Digital Transformation
Design Token (Token Desain)
TL;DR: Design token adalah variabel terstruktur yang menyimpan nilai desain inti seperti warna primer, ukuran font, radius border, dan jarak grid. Token disimpan terpusat (JSON, CSS variable, atau Figma library) lalu dipakai oleh kode dan file desain. Hasilnya: brand konsisten lintas web, mobile, email, dan presentasi tanpa setiap tim menebak ulang nilai hex atau px.
Apa itu Design Token?
Design token adalah cara mengubah keputusan desain dari "tersebar di mana-mana" menjadi "satu sumber kebenaran". Daripada developer hardcode #0066FF di 47 komponen dan desainer pakai #0067FE di Figma karena salah ketik, token color.primary.500 punya satu nilai yang dipakai semua orang.
Anatomi token tipikal di proyek Next.js + Tailwind yang Vito Atmo pakai:
{
"color": {
"brand": {"primary": "#1A56DB", "accent": "#F59E0B"},
"neutral": {"100": "#F3F4F6", "900": "#111827"}
},
"spacing": {"xs": "4px", "sm": "8px", "md": "16px"},
"radius": {"card": "12px", "button": "8px"}
}
File JSON ini lalu di-compile ke CSS variable, Tailwind config, dan Figma styles via Style Dictionary atau Tokens Studio.
Tier Token (Three-Tier Architecture)
Pola umum yang dipakai tim besar:
| Tier | Contoh | Tujuan |
|---|---|---|
| Global | color.blue.500 = #3B82F6 | Palet mentah, tidak punya makna brand |
| Alias | color.brand.primary = color.blue.500 | Beri makna brand ke nilai global |
| Component | button.primary.bg = color.brand.primary | Beri makna komponen ke alias |
Saat brand refresh, cukup ubah satu alias, semua komponen ikut update tanpa sentuh kode.
Kenapa Penting?
Untuk perusahaan Indonesia yang punya produk multi-channel (web utama, app mobile, dashboard internal, email transaksional), design token mencegah brand drift. Berdasarkan pengalaman Vito Atmo, tim 5+ orang yang tidak pakai token rata-rata punya 8-12 varian warna primer setelah 6 bulan, masing-masing "hampir mirip" tapi tidak identik. Token memutus rantai itu di hari pertama.
Pertanyaan Umum
Apakah CSS variable sudah cukup sebagai design token?
CSS variable adalah implementasi token di runtime, tapi belum cukup. Token sejati harus bisa di-export ke berbagai platform (Android XML, iOS plist, Figma styles, email HTML inline). Tools seperti Style Dictionary mengubah satu file JSON ke semua format itu.
Apakah design token cocok untuk proyek kecil?
Untuk proyek satu halaman atau MVP, token formal mungkin overkill. Tapi minimal pakai CSS variable di :root, supaya saat proyek tumbuh tidak perlu refactor besar.
Istilah Terkait