Bir design system, tek tek ekranları tek tek tasarlamak yerine; renk, tipografi, boşluk, bileşen ve kuralları tek bir kaynaktan yönetip her üründe tutarlı biçimde tekrar kullanmanı sağlayan yaşayan bir sistemdir. Stil rehberi (style guide) ile karıştırılır ama farkı şudur: bir doküman yalnızca "neye benzemeli" diye anlatırken, design system aynı zamanda çalışan kodu, hazır bileşenleri ve bunları nasıl birleştireceğini de verir. Yani hem tasarımcının hem geliştiricinin aynı dili konuşmasını sağlar.
Design system tam olarak neyi çözer?
Küçük bir projede butonun rengini doğrudan ekrana yazarsın, sorun olmaz. Ama on, yirmi, elli ekran olunca her yere dağılmış küçük kararlar (bir yerde #3b82f6, başka yerde #3a80f0) tutarsızlığa ve bakım kabusuna dönüşür. Design system bu kararları merkezîleştirir ve şu sorunları çözer:
- Tutarlılık: Her sayfada aynı buton, aynı aralık, aynı gölge.
- Hız: Yeni bir ekran kurmak hazır parçaları dizmek kadar kolaylaşır.
- Bakım: Marka rengini değiştirmek tek bir değeri güncellemekle biter.
- Ortak dil: Tasarımcı "primary buton" der, geliştirici aynı bileşeni bilir.
Katman 1: Tasarım token'ları (design tokens)
Token, bir tasarım kararının isimlendirilmiş en küçük birimidir. Ham bir #1e293b değeri yerine ona color-text-primary gibi anlamlı bir ad verirsin. Böylece değer değişse bile isim sabit kalır ve her yer otomatik güncellenir. En temiz yaklaşım iki kademeli token kullanmaktır: önce ham değerler (primitive), sonra anlamsal (semantic) takma adlar.
:root {
/* Primitive: ham değerler */
--blue-500: #3b82f6;
--slate-900: #0f172a;
--space-2: 8px;
--space-3: 12px;
/* Semantic: niyeti anlatan takma adlar */
--color-action: var(--blue-500);
--color-text: var(--slate-900);
--radius-button: 8px;
}
.btn-primary {
background: var(--color-action);
color: white;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-button);
}Karanlık temaya geçmek istediğinde yalnızca semantic token'ları yeniden tanımlarsın; bileşenlerin koduna dokunmazsın. İşte ölçeklenebilirliğin kalbi budur.
Katman 2: Bileşenler (components)
Token'lar boyaysa bileşenler tuğladır. Buton, input, kart, modal, navigasyon... Her biri token'ları kullanan, tekrar tekrar yerleştirilebilen kapalı bir parçadır. İyi bir bileşen varyantlarıyla birlikte tasarlanır: bir butonun primary/secondary/ghost halleri, hover ve disabled durumları, küçük/orta/büyük boyutları. Bunları tek tek değil, sistematik düşünmek gerekir.
- Atomik yaklaşım: Küçük parçalar (atom) birleşip daha büyük parçaları (molekül, organizma) oluşturur.
- Tek sorumluluk: Bir bileşen bir işi iyi yapar; içine iş mantığı gömmezsin.
- Erişilebilirlik baştan: Klavye odağı, kontrast ve ARIA etiketleri bileşenin içine gömülür.
Katman 3: Dokümantasyon ve kullanım kuralları
En iyi token ve bileşenler bile, kimse nasıl kullanılacağını bilmiyorsa işe yaramaz. Dokümantasyon her bileşenin ne işe yaradığını, ne zaman kullanılacağını (ve ne zaman kullanılmayacağını) örneklerle anlatır. Pratikte üç parça önerilir: canlı bileşen örnekleri, kopyalanabilir kod, ve "do / don't" kuralları. Storybook gibi araçlar bileşenleri izole ortamda göstermek için yaygındır; tasarım tarafında Figma kütüphaneleri aynı token ve bileşenleri tasarımcılara açar.
Küçük bir ekip bunu nasıl kurar?
Sıfırdan dev bir sistem kurmaya çalışmak çoğu küçük ekip için tuzaktır. Daha gerçekçi yol kademeli ilerlemektir:
- 1. Envanter çıkar: Mevcut ürününde kaç farklı buton, renk, font boyutu var? Genelde olması gerekenin çok üstündedir.
- 2. Token'larla başla: Renk, tipografi ve boşluk ölçeğini sabitle. En yüksek getiriyi buradan alırsın.
- 3. En çok kullanılan 5–10 bileşeni standartlaştır: Buton, input, kart yeter; her şeyi aynı anda yapma.
- 4. Tek kaynak ilkesini koru: Tasarım (Figma) ve kod aynı isimleri kullansın; ikisi ayrışırsa sistem ölür.
- 5. Sürümle ve iletişim kur: Değişiklikleri belgele, ekibe duyur; design system bir ürün gibi yaşar.
Tone.js veya benzeri özel bir araca ihtiyacın yok; düz CSS değişkenleri ve iyi adlandırılmış bir bileşen klasörü bile küçük bir ekip için fazlasıyla yeterli bir başlangıçtır.
Sık Sorulan Sorular
Design system ile style guide aynı şey mi?
Hayır. Style guide marka kurallarını (logo, renk, ton) anlatan bir dokümandır. Design system bunu içerir ama ek olarak çalışan kod, yeniden kullanılabilir bileşenler ve token'lar sunar. Style guide "neye benzemeli" der; design system "işte hazır parça, al kullan" der.
Tek kişilik bir proje için design system gereksiz mi?
Hafif bir sürümü neredeyse her zaman değerlidir. Tek başına bile çalışsan, renk ve boşluk token'larını sabitlemek ileride kendi kararlarını hatırlamanı ve tutarlı kalmanı sağlar. Tam teşekküllü bir bileşen kütüphanesine gerek olmayabilir, ama token katmanı her ölçekte kazandırır.
Hangi araçla başlamalıyım?
Token'lar için yalın CSS custom property'leri yeter. Bileşenleri belgelemek için Storybook, tasarım tarafında Figma kütüphaneleri yaygın seçimlerdir. Araçtan çok ilkeler önemli: tek kaynak, anlamsal isimler ve kademeli büyüme.
Tutarlı ve ölçeklenebilir bir arayüz mü istiyorsun? Marka renklerinden çalışır bir bileşen kütüphanesine kadar design system kurulumunda yardımcı olabilirim. Benimle iletişime geç ve projeni konuşalım.