Tasarım Sistemi (Design System) Nedir?
Kısa tanım
Tasarım sistemi, bir ekibin ürün arayüzlerini tutarlı biçimde kurmak için ortak kullandığı, belgelenmiş yeniden kullanılabilir bileşenler, design token'lar ve kurallar bütünüdür. Genellikle kodda yaşayan bir bileşen kütüphanesini, buna karşılık gelen tasarım dosyalarını ve kullanım, erişilebilirlik ve içerik yönergelerini kapsar; kendi sahibi ve sürümleri olan, yaşayan bir ürün olarak yönetilir.
Diğer adları: design system, UI tasarım sistemi
Bir tasarım sisteminin içinde ne var?
Tasarım sistemi tek bir dosya değil, birbirine bağlı parçalardan oluşan bir yapıdır:
- Design token'lar: Renk, boşluk, yazı boyutu, köşe yuvarlaklığı, gölge gibi en küçük tasarım kararlarının adlandırılmış değerleri.
- Bileşenler: Buton, form alanı, kart, modal gibi parçaların hem tasarım dosyasındaki hem koddaki karşılıkları; tüm durumlarıyla birlikte.
- Kalıplar (patterns): Bileşenlerin birlikte kullanıldığı tekrar eden çözümler; örneğin bir form ve hata mesajlarının nasıl kurgulanacağı.
- Yönergeler: Hangi bileşen ne zaman kullanılır, erişilebilirlik kuralları, yazım dili ve ton.
- Dokümantasyon ve yönetim: Sistemi anlatan bir kaynak, sürüm notları, değişiklik önerme ve onaylama süreci.
Design token'lar kodda nasıl görünür?
Token'lar, tasarım kararını tek bir yerde tutup her yerde aynı adla kullanmayı sağlar. CSS custom property'leriyle basit bir örnek:
:root {
/* Temel (primitive) token'lar: ham değerler */
--mavi-600: #1d4ed8;
--bosluk-4: 1rem;
/* Anlamsal (semantic) token'lar: kullanım amacı */
--renk-aksiyon: var(--mavi-600);
--kose-kontrol: 6px;
}
.buton {
background: var(--renk-aksiyon);
padding: calc(var(--bosluk-4) / 2) var(--bosluk-4);
border-radius: var(--kose-kontrol);
}Bileşen ham renge değil, anlamsal token'a bağlıdır. Marka rengi değiştiğinde ya da karanlık tema eklendiğinde yalnızca token değerleri güncellenir; yüzlerce bileşene tek tek dokunmak gerekmez. Token'ları tasarım araçları ve farklı platformlar arasında ortak bir formatta taşımak için W3C bünyesindeki Design Tokens Community Group da bir standart üzerinde çalışmaktadır.
Stil rehberi, UI kit ve tasarım sistemi farkı
| Kavram | Kapsam |
|---|---|
| Stil rehberi | Logo, renk paleti, tipografi gibi marka ve görsel kurallar |
| UI kit | Tasarım aracında hazır arayüz parçaları; genellikle kod karşılığı yoktur |
| Bileşen kütüphanesi | Kodda yeniden kullanılabilir arayüz bileşenleri |
| Tasarım sistemi | Yukarıdakilerin hepsi, artı token'lar, yönergeler, dokümantasyon ve yönetim süreci |
Ne zaman gerekir?
Birden fazla ürün, büyüyen bir ekip ya da çok sayıda sayfa şablonu varsa tasarım sistemi kendini hızla amorti eder: aynı buton beş farklı şekilde yeniden yapılmaz, yeni ekranlar mevcut parçalarla hızla kurulur, erişilebilirlik düzeltmesi bileşende bir kez yapılır ve her yere yansır. Tek sayfalık bir tanıtım sitesi içinse kapsamlı bir sistem kurmak çoğu zaman gereğinden ağırdır; birkaç token ve iyi tanımlanmış birkaç bileşen yeterli olabilir. Pratik bir başlangıç, mevcut arayüzde tekrar eden parçaları toplayıp ortaklaştırmaktır.
Tasarım sistemi, UI tasarımı kararlarını kalıcı ve paylaşılabilir hâle getirir; responsive davranış da her sayfada yeniden düşünülmek yerine bileşenin içine yerleşir.
Sık yapılan hatalar
- Sistemin yalnızca tasarım dosyasında var olması; kod tarafında karşılığı olmayınca tasarım ve ürün zamanla birbirinden uzaklaşır.
- Sahipsiz bırakmak. Kimin bakım yaptığı, değişikliklerin nasıl onaylandığı belli değilse sistem kısa sürede eskir.
- Gereğinden katı kurmak; ekipler ihtiyaçlarını karşılayamayınca sistemin dışında kendi çözümlerini üretir.
- Bileşenleri belgelememek; ne zaman hangisinin kullanılacağı yazmıyorsa aynı iş için farklı bileşenler seçilir.
- Erişilebilirliği her ekipte ayrı ayrı çözülecek bir konu saymak; odak durumu, etiketler ve kontrast bileşenin içinde baştan doğru olmalıdır.