Tanpa sistem desain, setiap desainer dan pengembang membuat keputusan kecil sendiri: warna biru yang sedikit berbeda, gaya tombol baru, nilai spasi lainnya. Setelah satu tahun, produk tersebut memiliki lusinan produk yang hampir duplikat. Sistem desain menggantikan keputusan berulang tersebut dengan keputusan bersama.
Kebanyakan sistem desain memiliki tiga lapisan. Token desain adalah nilai bernama, seperti color.primary, space.4 atau motion.duration.short, yang menyimpan keputusan mentah. Komponen, seperti tombol, masukan, kartu, dan dialog, dibuat dari token tersebut dan mencakup setiap status. Pedoman mendokumentasikan cara menggunakan setiap komponen, cara menulis label dan pesan, dan aturan aksesibilitas apa yang berlaku.
Sistem desain ada di dua tempat: di alat desain, sebagai pustaka komponen, dan di kode, saat pengembang paket menginstal. Menjaga keduanya tetap sinkron adalah bagian tersulit. Ketika tombol berkode tidak lagi cocok dengan yang dirancang, orang-orang berhenti mempercayai sistem.
Gerak juga termasuk dalam sistem. Durasi, kurva pelonggaran, dan pengaturan pegas dapat menjadi token, dan komponen interaktif memerlukan perilaku yang ditentukan untuk mengarahkan, menekan, memuat, dan transisi. ExodeUI, yang kami buat, menyimpan perilaku tersebut dalam satu file terbuka dengan status dan fisika pegas, sehingga komponen yang sama diputar di React, Vue, SwiftUI, Flutter dan kerangka kerja lainnya.
Contoh publik yang terkenal termasuk Material Design dari Google, Pedoman Antarmuka Manusia Apple, Carbon dari IBM, dan Polaris dari Shopify. Membacanya adalah cara yang baik untuk melihat bagaimana sistem yang matang diatur.