Arsitektur Token Desain Semantik: Token Global, Semantik, dan Komponen
Cara menyusun token desain dalam tiga tingkatan, mendukung tema dan beberapa merek, dan mengirimkannya ke web, iOS dan Android menggunakan format W3C DTCG.
Pengambilan Inti
Kebanyakan sistem desain yang matang menggunakan tiga tingkatan token: global (nilai mentah seperti blue-600), semantik (tujuan, seperti color.action.primary) dan komponen (penggunaan spesifik, seperti button.background). Komponen merujuk pada token semantik, token semantik merujuk pada token global, dan tema atau merek hanya menukar lapisan semantik. Simpan dalam format W3C DTCG dan buat kode platform dengan alat build.
Tiga tingkatan
Material Design menjelaskan tiga kelas token: referensi, sistem, dan komponen. Banyak tim menyebutnya global, semantik, dan komponen. Namanya berbeda-beda, namun idenya sama: pisahkan nilai-nilai mentah dari keputusan tentang bagaimana nilai-nilai tersebut digunakan.
- Global (referensi): setiap nilai mentah dalam sistem, seperti blue-600, space-4, font-size-16, spring-gentle.
- Semantik (sistem): untuk apa suatu nilai, seperti color.text.primary, color.action.primary, motion.enter.
- Komponen: bagaimana satu komponen menggunakan sistem, seperti button.background atau dialog.motion.open.
Mengapa token semantik penting
Jika sebuah tombol menggunakan warna biru-600 secara langsung, setiap perubahan tema berarti mengedit setiap komponen. Jika menggunakan color.action.primary, mode gelap, kontras tinggi, atau merek baru hanya mengubah apa yang ditunjukkan oleh color.action.primary. Material mencatat bahwa token memungkinkan penerapan palet kontras tinggi atau mengubah skala tipe seluruh sistem dengan cara yang persis seperti ini.
Tema dan berbagai merek
Untuk produk multi-merek atau label putih, simpan satu set token semantik dan komponen serta satu palet global per merek. Setiap tema merupakan pemetaan dari token semantik ke nilai global. Versi stabil pertama dari spesifikasi Token Desain W3C (2025.10), dirilis pada Oktober 2025, menambahkan tema dan dukungan multi-merek, ruang warna modern seperti Display P3 dan OKLCH, serta alias dan referensi tingkat komponen.
Token gerak juga ada di sini
Durasi, kurva pelonggaran, dan pegas mengikuti tingkatan yang sama. Token global mungkin lembut karena kekakuan dan redamannya; tanda semantik motion.enter menunjuk ke sana; komponen token sheet.motion.open menunjuk ke motion.enter. Tambahkan tema gerakan tereduksi yang memetakan ulang token gerakan menjadi pemudaran singkat.
Mengirim token ke setiap platform
Simpan token di repositori sebagai DTCG JSON, satu-satunya sumber kebenaran. Alat build seperti Style Dictionary mengubahnya menjadi variabel CSS, Swift, Kotlin, Flutter, atau format lainnya. Alat desain yang membaca format yang sama dapat tetap sinkron, dan alat pengkodean AI dapat membaca JSON secara langsung.
- Sumber kebenaran: DTCG JSON di Git, diulas seperti kode
- Bangun: bertransformasi ke setiap platform pada setiap perubahan
- Sinkronisasi alat desain: impor atau plugin, jangan pernah menyalin nilai secara manual
- Linting: melarang nilai mentah dalam komponen
Kunci Principles untuk Diingat
- Tiga tingkatan: global (nilai), semantik (tujuan), komponen (penggunaan)
- Komponen merujuk pada token semantik, bukan nilai mentah
- Tema dan merek memetakan ulang lapisan semantik
- Format W3C DTCG mencapai versi stabil pertamanya (2025.10) pada Oktober 2025
- Sertakan token gerakan dan tema gerakan yang dikurangi
Pertanyaan yang Sering Diajukan
Sumber
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Grup Komunitas Token Desain W3C
- Design Tokens Community Group — desaintokens.org
- Style Dictionary — styledictionary.com