Bir tasarım sistemi olmadan, her tasarımcı ve geliştirici kendi başına küçük kararlar alır: biraz farklı bir mavi, yeni bir düğme stili, başka bir boşluk değeri. Bir yıl sonra ürünün düzinelerce neredeyse kopyası ortaya çıkıyor. Bir tasarım sistemi, tekrarlanan kararların yerini paylaşılan kararlarla değiştirir.
Çoğu tasarım sisteminin üç katmanı vardır. Tasarım belirteçleri, ham kararları depolayan color.primary, space.4 veya motion.duration.short gibi adlandırılmış değerlerdir. Düğmeler, girişler, kartlar ve diyaloglar gibi bileşenler bu belirteçlerden oluşturulur ve her durumu içerir. Yönergeler, her bir bileşenin nasıl kullanılacağını, etiketlerin ve mesajların nasıl yazılacağını ve hangi erişilebilirlik kurallarının geçerli olduğunu belgelemektedir.
Bir tasarım sistemi iki yerde yaşar: bileşen kitaplığı olarak tasarım aracında ve geliştiricilerin yüklediği paket olarak kodda. Bu ikisini senkronize tutmak işin en zor kısmı. Kodlanan düğme, tasarlanan düğmeyle artık eşleşmediğinde insanlar sisteme güvenmeyi bırakır.
Hareket de sisteme aittir. Süreler, hareket hızı eğrileri ve yay ayarları belirteç olabilir ve etkileşimli bileşenlerin fareyle üzerine gelme, basma, yükleme ve geçişler için tanımlanmış davranışlara ihtiyacı vardır. Yaptığımız ExodeUI, bu davranışı durumlar ve yay fiziği ile birlikte tek bir açık dosyada saklar, böylece aynı bileşen React, Vue, SwiftUI, Flutter ve diğer çerçevelerde oynatılır.
İyi bilinen halka açık örnekler arasında Google'ın Material Design'i, Apple'ın İnsan Arayüzü Yönergeleri, IBM'in Carbon ve Shopify'ın Polaris'i yer alır. Bunları okumak olgun bir sistemin nasıl organize edildiğini görmenin iyi bir yoludur.