Design Tokens
Mengenali nilai warna, jarak, radius, dan typography yang berulang lalu memberi nama berdasarkan peran visualnya.
Tujuan belajar
- Menjelaskan design token sebagai nilai visual bernama yang digunakan ulang
- Membedakan nilai sekali pakai dari nilai yang sudah menjadi aturan visual berulang
- Memberi nama token berdasarkan peran, bukan hanya angka atau warna mentah
- Memulai token kecil yang mendukung perubahan UI nyata tanpa membuat sistem besar terlalu awal
Isi lesson
6 blok- 1.Beri nama pada aturan visual yang berulangBelum selesaiWajib
- 2.Nilai card diberi nama berdasarkan perannyaBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan membuat token hanya untuk menyembunyikan angkaBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Beri nama pada aturan visual yang berulang
WajibDesign token adalah nilai visual bernama yang dipakai ulang: warna surface, warna border, jarak antar elemen, radius card, atau ukuran text. Ia bukan daftar semua angka dan hex code yang pernah muncul di CSS. Token berguna ketika sebuah nilai sudah menjadi aturan yang ingin dijaga di beberapa tempat. Dengan token, perubahan surface atau spacing tidak perlu mencari nilai mentah di banyak file, dan nama token memberi alasan mengapa nilai itu dipakai.
Mulai dari pengulangan yang nyata. Jika CourseCard, LessonSummary, dan ResourcePanel memakai background terang, border halus, padding serupa, serta radius sama, itu kandidat token. Sebaliknya, offset 1px khusus untuk icon yang belum dipakai tempat lain belum perlu diberi nama global. Token yang baik menyederhanakan pilihan visual, bukan menciptakan katalog nilai yang lebih sulit dicari daripada CSS sebelumnya.
Bagian ini memengaruhi progres lesson.
Nilai card diberi nama berdasarkan perannya
Wajib:root {
--color-surface: #ffffff;
--color-border-subtle: #d8dee9;
--space-card: 1.5rem;
--radius-card: 0.75rem;
}
.course-card,
.lesson-summary {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-card);
padding: var(--space-card);
}Nama --color-surface menjelaskan peran background, bukan fakta bahwa nilainya saat ini putih. --color-border-subtle membedakannya dari border focus atau destructive. --space-card dan --radius-card memang terhubung ke satu pattern card yang berulang. Pada sistem yang lebih besar token dapat menjadi scale yang lebih umum, tetapi module ini mengutamakan nama yang jelas bagi kebutuhan project saat ini.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususName course card design tokens
Ganti nilai surface, border, padding, dan radius yang berulang dengan token CSS bernama berdasarkan peran card.
Tujuan awal: Fokus di tab CSS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Nilai mana yang paling layak menjadi design token pada tahap awal project?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
OpsionalJangan membuat token hanya untuk menyembunyikan angka
--blue-7, --space-17, atau --value-12 dapat menghilangkan nilai mentah tetapi belum memberi alasan pemakaian. Mulai dengan nama yang dapat dibaca consumer seperti --color-action-primary, --color-text-muted, atau --space-card. Bila project sudah memiliki scale serta aturan naming yang stabil, raw token dan semantic token dapat dipisah. Itu belum diperlukan untuk setiap project kecil.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Design token adalah nilai visual bernama yang digunakan ulang sebagai aturan UI.
- Buat token dari pengulangan nyata, bukan dari setiap angka atau hex code di codebase.
- Nama token sebaiknya menjelaskan peran visual agar perubahan di masa depan tetap masuk akal.
- Token awal yang kecil lebih berguna daripada sistem nilai besar tanpa consumer nyata.
- Berikutnya, kita membuat color serta spacing tokens dengan CSS custom properties yang dipakai beberapa component.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Beri nama pada aturan visual yang berulang.