Design token dari spesifikasi desain
Langkah pertama saat menerima desain bukan langsung membuat komponen, tapi mengekstrak design token: warna, spacing, radius, dan font yang dipakai berulang. Simpan sebagai custom property. Kalau desainer nanti mengubah warna brand, kamu hanya mengedit satu baris. Simpan token itu di satu berkas terpisah agar mudah ditemukan, dan beri nama berdasarkan perannya (--warna-primer) bukan wujudnya (--biru).
👀 Contoh dulu
/* Dari panel Figma:
Primary #0ea5e9
Danger #dc2626
Radius 8px */
:root {
--primary: #0ea5e9;
--danger: #dc2626;
--radius: 8px;
}
.btn-utama { background: var(--primary); border-radius: var(--radius); }
.btn-hapus { background: var(--danger); border-radius: var(--radius); }Hasilnya: Semua komponen memakai token yang sama, sehingga desain konsisten dan perubahan warna brand cukup di satu tempat.
💡 Langkah pertama menerima desain: kumpulkan nilai yang BERULANG jadi token, jangan sebar nilai mentah ke tiap komponen.
📝 Sekarang giliranmu
Spesifikasi dari Figma: warna primer #4f46e5, warna teks #111827, radius 12px, spacing dasar 8px. Deklarasikan sebagai --primary, --text, --radius, dan --space di :root.