Design System Nedir? Tutarlı Tasarımın Temeli
Seviye: Orta
Kategori: UX Design
Son güncelleme: Ocak 2025
Giriş
Aynı ürünün farklı sayfalarında farklı buton stilleri. Bir yerde 16px padding, başka yerde 20px. Mavi tonları birbiriyle uyumsuz. Mobilde farklı, desktop'ta farklı.
Tanıdık geldi mi?
Ekip büyüdükçe, ürün genişledikçe tutarlılık kayboluyor. Her tasarımcı kendi kararlarını veriyor. Her developer farklı yorumluyor. Sonuç: Frankenstein ürün.
Design system, bu kaosa son veren sistemdir. Ortak dil, ortak kurallar, ortak component'ler. Herkes aynı yapı taşlarını kullanır, tutarlılık garanti.
Bu yazıda design system'ın ne olduğunu, bileşenlerini ve nasıl başlayacağını öğreneceksin.
Design System Nedir?
Design System: Bir ürün veya ürün ailesinin tutarlı tasarımını sağlamak için kullanılan yeniden kullanılabilir component'ler, stil kuralları, pattern'ler, ilkeler ve dokümantasyondan oluşan kapsamlı ekosistem.
Design system sadece bir dosya veya kütüphane değil. Üç ayağı var:
1. Tasarım varlıkları: Figma component'leri, stiller, token'lar 2. Kod varlıkları: React/Vue/Swift component'leri 3. Dokümantasyon: Kurallar, kullanım rehberleri, ilkeler
Bu üçü senkronize çalıştığında design system işlevsel olur.
Neden Design System?
1. Tutarlılık
Aynı component her yerde aynı görünür ve çalışır. Kullanıcı deneyimi birleşik olur.
2. Verimlilik
Sıfırdan tasarlamak yerine, hazır component'leri birleştir. Tasarım süresi kısalır.
3. Ölçeklenebilirlik
Yeni sayfa, yeni özellik eklemek kolaylaşır. Temel yapı hazır.
4. İş birliği
Tasarımcı ve developer aynı dili konuşur. "Primary button" deyince herkes aynı şeyi anlar.
5. Bakım kolaylığı
Bir değişiklik merkezi olarak yapılır, her yere yayılır. Mavi tonu değişecek? Token'ı güncelle, bitti.
6. Kalite
Test edilmiş, erişilebilir, responsive component'ler. Her seferinde baştan düşünmek yok.
Design System Bileşenleri
1. Design Tokens
Tasarım kararlarının en küçük birimi. Platform-agnostik değişkenler.
Token kategorileri:
[TABLE] | Kategori | Örnekler | |----------|----------| | Color | color-primary, color-background, color-text | | Typography | font-size-lg, font-weight-bold, line-height-tight | | Spacing | spacing-xs, spacing-md, spacing-xl | | Border | border-radius-sm, border-width-default | | Shadow | shadow-sm, shadow-lg | | Animation | duration-fast, easing-default | [/TABLE]
Token yapısı örneği: color-primary-500: #6366F1 color-primary-600: #4F46E5 spacing-4: 16px spacing-8: 32px font-size-base: 16px border-radius-md: 8px
💡 Token isimlendirmesinde anlamlı ve tutarlı ol. "blue-500" yerine "color-primary-500" kullan. Böylece mavi yeşile dönse bile isim mantıklı kalır.
2. Foundation / Style Guide
Token'ların nasıl kullanılacağını tanımlar.
İçerir:
- Renk paleti ve kullanım kuralları
- Tipografi sistemi (scale, hierarchy)
- Spacing sistemi (grid, margin, padding)
- İkonografi kuralları
- Görsel dil (fotoğraf, illüstrasyon)
3. Component Library
Yeniden kullanılabilir UI elementleri.
Temel component'ler:
- Button (primary, secondary, ghost, disabled)
- Input (text, email, password, error state)
- Select / Dropdown
- Checkbox / Radio
- Card
- Modal / Dialog
- Toast / Notification
- Navigation (header, sidebar, tabs)
- Table
- Form
Her component için:
- Tüm varyasyonlar (size, state, type)
- Responsive davranış
- Erişilebilirlik gereksinimleri
- Kullanım rehberi
- Do's and don'ts
4. Patterns
Component'lerin birlikte nasıl kullanılacağını gösteren şablonlar.
Örnek pattern'ler:
- Form pattern (label + input + error + help text)
- Card grid pattern
- Empty state pattern
- Loading state pattern
- Error page pattern
- Navigation pattern
5. Dokümantasyon
Her şeyin nasıl kullanılacağını anlatan rehber.
İçerir:
- Genel ilkeler (tone of voice, accessibility)
- Token referansı
- Component kataloğu
- Pattern örnekleri
- Contribution guide
- Changelog
Atomic Design
Brad Frost'un Atomic Design metodolojisi, design system yapılandırmasında yaygın kullanılır.
5 seviye:
[TABLE] | Seviye | Açıklama | Örnek | |--------|----------|-------| | Atoms | En küçük birim, bölünemez | Button, input, label, icon | | Molecules | Atom grupları, basit fonksiyon | Search bar (input + button) | | Organisms | Molecule grupları, bölüm | Header (logo + nav + search + user) | | Templates | Sayfa iskeletleri | Blog post template | | Pages | Gerçek içerikli sayfalar | Specific blog post | [/TABLE]
Design System vs Diğerleri
Design System vs UI Kit
[TABLE] | Özellik | UI Kit | Design System | |---------|--------|---------------| | İçerik | Görsel component'ler | Component + kural + kod + döküman | | Yaşam döngüsü | Statik dosya | Yaşayan ekosistem | | Kod | Genellikle yok | Dahil | | Dokümantasyon | Minimal | Kapsamlı | | Governance | Yok | Süreç ve sahiplik var | [/TABLE]
Design System vs Style Guide
Style guide, design system'ın bir parçası. Sadece stil kurallarını içerir (renk, tipografi). Design system bunun üzerine component'ler, pattern'ler ve kod ekler.
Design System vs Component Library
Component library, design system'ın bir parçası. UI component koleksiyonu. Design system bunun üzerine token'lar, kurallar ve dokümantasyon ekler.
Popüler Design System Örnekleri
Material Design (Google)
- En kapsamlı ve detaylı
- Android'in temeli
- Web için Material UI (React)
- material.io
Human Interface Guidelines (Apple)
- iOS, macOS, watchOS için
- Platform-spesifik kurallar
- developer.apple.com/design
Carbon (IBM)
- Enterprise odaklı
- Erişilebilirlik güçlü
- React, Vue, Angular desteği
- carbondesignsystem.com
Polaris (Shopify)
- E-ticaret odaklı
- İçerik rehberleri güçlü
- polaris.shopify.com
Ant Design (Alibaba)
- Enterprise React component'leri
- Çin pazarı odaklı
- ant.design
Atlassian Design System
- Jira, Confluence için
- atlassian.design
Design System Nasıl Başlanır?
Küçük Başla
Tam teşekküllü sistem hemen gelmez. Önce:
Token'larla başla
Renk, tipografi, spacing tanımla
Temel component'leri oluştur
Button, input, card - en sık kullanılanlar
Dokümante et
Basit de olsa kullanım rehberi yaz
Pilot proje
Bir projede dene, feedback al
İtere et
Eksikleri tamamla, genişlet
Audit ile Başla
Mevcut ürünü audit et:
- Kaç farklı buton stili var?
- Kaç farklı renk kullanılıyor?
- Tutarsızlıklar nerede?
Bu audit, design system'ın kapsamını belirler.
Önceliklendir
Her şeyi aynı anda yapamazsın. Öncelik:
- En sık kullanılan component'ler
- En çok tutarsızlık olan alanlar
- En kritik kullanıcı akışları
Design System Araçları
Tasarım
[TABLE] | Araç | Özellik | |------|---------| | Figma | Component, variant, auto layout, token plugin'leri | | Sketch | Library, symbol, shared styles | | Adobe XD | Component, design token desteği | [/TABLE]
Token Yönetimi
- Tokens Studio (Figma plugin): Figma'da token yönetimi
- Style Dictionary (Amazon): Token'ları koda çevirme
- Theo (Salesforce): Token build tool
Dokümantasyon
- Storybook: Component dokümantasyonu, interactive playground
- Zeroheight: Design system dokümantasyon platformu
- Notion/Confluence: Basit döküman için
Kod
- Storybook: React, Vue, Angular component geliştirme
- Bit: Component paylaşımı
- Lerna/Nx: Monorepo yönetimi
Design System Governance
Sistem var, peki kim sahip? Nasıl güncellenir?
Sahiplik Modelleri
Centralized (Merkezi): Dedicated design system ekibi var. Tüm kararlar bu ekipten geçer.
Federated (Dağıtık): Farklı ekiplerden temsilciler bir araya gelir. Kararlar ortaklaşa alınır.
Hybrid: Core ekip temel sistemi yönetir, diğer ekipler katkıda bulunur.
Contribution Süreci
- Öneri/talep oluştur
- Review ve tartışma
- Tasarım + geliştirme
- Test
- Dokümantasyon
- Release
Versiyonlama
Design system'lar semantic versioning kullanır:
- Major (1.0 → 2.0): Breaking change
- Minor (1.0 → 1.1): Yeni özellik, geriye uyumlu
- Patch (1.0.0 → 1.0.1): Bug fix
Sık Yapılan Hatalar
1. Çok erken genişlemek
2. Tasarım ve kod senkronizasyonu
Figma'daki component ile koddaki farklıysa, sistem işe yaramaz. Sync mekanizması kur.
3. Dokümantasyon eksikliği
Component var ama nasıl kullanılacağı yok. Dokümantasyon olmadan adoption düşer.
4. Adoption zorlamak
Ekibi zorla değil, değer göstererek ikna et. "Bak ne kadar hızlı" daha etkili.
5. Güncellememek
Design system yaşayan organizma. Güncel tutulmazsa ölür.
6. Edge case'leri görmezden gelmek
"Standart dışı" ihtiyaçlar olacak. Bunları nasıl ele alacağını planla.
Küçük Ekipler İçin
Tam teşekküllü design system lüks görünebilir. Ama küçük ekipler de faydalanabilir:
Minimum viable design system:
- Renk token'ları (5-10 renk)
- Tipografi scale (4-5 boyut)
- Spacing scale (4-6 değer)
- 5-10 temel component
- Basit bir Notion sayfası dokümantasyon
Bu kadar bile tutarlılığı artırır ve tekrar eden işleri azaltır.
Şimdi Sen Dene
30 dakika
Görev: Mini design system token seti oluştur.
Senaryo: Yeni bir SaaS ürünü için temel token'ları tanımla.
Adımlar:
-
Renk token'ları (10 dk)
- Primary renk (5 ton: 100, 300, 500, 700, 900)
- Neutral/Gray (5 ton)
- Semantic: success, warning, error
- Background, surface, text renkleri
-
Tipografi token'ları (10 dk)
- Font family (1-2 font)
- Font size scale (xs, sm, base, lg, xl, 2xl)
- Font weight (regular, medium, bold)
- Line height (tight, normal, relaxed)
-
Spacing token'ları (5 dk)
- 4px base ile scale: 4, 8, 12, 16, 24, 32, 48, 64
-
Diğer token'lar (5 dk)
- Border radius: sm, md, lg, full
- Shadow: sm, md, lg
Çıktı: Figma'da veya Notion'da token listesi oluştur.
Özet
- Design system = component'ler + kurallar + kod + dokümantasyon
- Token'lar en küçük birim: renk, tipografi, spacing değişkenleri
- Atomic design: atom → molecule → organism → template → page
- UI kit statik, design system yaşayan ekosistem
- Küçük başla: token + temel component + basit döküman
- Governance önemli: sahiplik, contribution, versiyonlama
- Tasarım-kod senkronizasyonu kritik
- Popüler örnekler: Material, Carbon, Polaris, Ant Design
İlgili İçerikler
Önceki: Heuristic Evaluation Nedir?
Sonraki: Accessibility (Erişilebilirlik) Temelleri (yakında)
İlgili konular:
- UI Nedir?
- Component Tasarım İlkeleri (yakında)
- Figma'da Design System Kurma (yakında)
İlgili Roadmap: UI Designer Roadmap → Design Systems
Kaynaklar
Derinleşmek istersen:
- Design Systems 101 - NNGroup (İngilizce, 10 dk)
- Atomic Design - Brad Frost (Kitap, ücretsiz online)
- Design Systems Handbook - InVision (Kitap, ücretsiz)
- Design Tokens W3C (Standart taslağı)