HTML dalam Sistem Desain

Sistem desain adalah pustaka bersama yang berisi komponen, token, pola, dan panduan yang digunakan di seluruh produk suatu organisasi. Bagian HTML dari sistem ini merangkum konvensi markah sehingga setiap produk menampilkan struktur tombol, modal, formulir, dan kartu yang konsisten.

Token adalah nilai desain atomik (warna: blue-500, jarak: 16px). Komponen adalah unit HTML+CSS+JS yang dapat digunakan ulang (Tombol, Modal, TextField). Pola adalah komposisi tingkat lebih tinggi (formulir masuk, kartu konten dengan avatar). Struktur HTML ditetapkan pada tingkat komponen; pola menggabungkan berbagai komponen.

Komponen menerapkan praktik terbaik: setiap Tombol menggunakan elemen <button> (bukan div) dengan atribut type yang tepat. Setiap modal membatasi fokus, mendukung Escape, dan memiliki peran ARIA yang tepat. Penggunaan komponen menghindari penerapan ulang aksesibilitas untuk setiap fitur produk.

Storybook merender setiap komponen secara terisolasi dengan berbagai properti dan variasi. Desainer dan manajer produk dapat melihat komponen yang tersedia tanpa membaca kode; pengembang dapat melihat contoh penggunaan tanpa mencari-cari di kode sumber. Storybook merupakan standar de facto untuk dokumentasi sistem desain.

Perlakukan sistem desain sebagai paket yang diterbitkan dengan semver. Perubahan HTML/CSS yang memutus kompatibilitas (mengganti nama kelas CSS yang diandalkan pengguna, menghapus ruang sisipan komponen) menaikkan versi mayor. Pengguna memperbarui secara sengaja sesuai jadwal mereka, bukan secara tiba-tiba.

Properti, ruang sisipan, dan bagian komponen yang diekspos adalah API publik. Setelah dirilis kepada pengguna, perlakukan semua itu sebagai hal yang mahal untuk diubah. Hentikan penggunaannya secara bertahap: tambahkan API baru di samping yang lama, catat peringatan untuk penggunaan lama, lalu hapus hanya setelah melewati periode yang terukur.

Token memungkinkan pemberian tema: tukar peta token warna, dan setiap komponen akan menggunakan palet baru. Pemberian merek berbeda (berbagai merek berbagi komponen dengan tampilan berbeda) menjadi mudah ketika token mengendalikan semuanya dan komponen merujuk token, bukan nilai yang ditulis langsung.

Untuk organisasi yang menggunakan banyak kerangka kerja (React, Vue, Angular), komponen web menawarkan satu penerapan yang berfungsi di mana saja. Bangun dengan Lit, FAST, atau JavaScript murni; gunakan dengan cara yang sama dalam kerangka kerja apa pun. Struktur HTML adalah kontraknya, bukan kerangka kerjanya.

Sistem desain menanamkan aksesibilitas ke dalam setiap komponen satu kali: penanganan papan ketik, peran ARIA, pengelolaan fokus, dan kontras warna. Tim produk yang menggunakan sistem ini memperoleh aksesibilitas tanpa harus membangun setiap fitur dari awal—hal ini secara terukur mengurangi kesalahan aksesibilitas di seluruh perusahaan.

Lacak produk mana yang menggunakan versi sistem desain yang mana. Alat seperti katalog komponen Backstage, bot Slack khusus yang memantau package.json, atau dasbor internal sederhana menunjukkan bagian yang belum menggunakan versi terbaru. Metrik adopsi membenarkan investasi yang berkelanjutan.

Tentukan siapa yang boleh menambahkan komponen: hanya tim sistem desain pusat? Kontribusi terfederasi dari tim produk? Setiap model memiliki kompromi. Tim pusat merilis lebih lambat tetapi menjaga kualitas; tim terfederasi bergerak cepat tetapi berisiko menyebabkan fragmentasi. Pilih secara sadar berdasarkan skala organisasi.

Sistem desain adalah produk yang terus berkembang. Tambahkan komponen saat pola baru muncul dalam produk, hentikan komponen yang tidak lagi sesuai, dan lakukan pemfaktoran ulang ketika keputusan mendasar perlu diubah. Perlakukan sistem sebagai perangkat lunak dengan peta jalan, bukan artefak yang sudah selesai.

Mengapa token desain (seperti warna: blue-500, jarak: 16px) lebih disukai daripada nilai yang ditulis langsung di dalam komponen?

Sistem desain mengemas token (nilai atomik), komponen (unit HTML yang dapat digunakan ulang), dan pola (komposisi tingkat lebih tinggi) ke dalam pustaka berversi yang digunakan bersama di berbagai produk. Gunakan Storybook untuk dokumentasi, komponen web untuk penggunaan lintas kerangka kerja, dan semver untuk kestabilan. Tanamkan aksesibilitas ke dalam setiap komponen, lacak adopsi, dan kembangkan sistem sebagai produk yang terus hidup.