Design System Nedir?
Design system, bir uygulamanın görsel ve etkileşim dilini tanımlayan kurallar, bileşenler ve token'lar bütünü. Renk paleti, tipografi, spacing, border radius, ikonlar ve bunların nasıl kullanılacağını belirleyen prensipler. Tek bir butonun rengini değil, tüm butonların nasıl görüneceğini ve davranacağını tanımlar. 2026 itibarıyla ciddi bir mobil uygulama geliştirmek istiyorsanız design system olmadan başlamak ileride çok pahalıya mal olur.
Neden Gerekli?
- Tutarlılık: Her ekranda aynı görsel dil
- Hız: Yeni ekran tasarlarken sıfırdan düşünmek yerine hazır bileşenler
- Ölçeklenme: Ekip büyüdüğünde herkes aynı kurallarla çalışır
- Bakım kolaylığı: Renk değişikliği tek yerden yapılır, tüm uygulamaya yansır
- Platform tutarlılığı: iOS ve Android arasında marka bütünlüğü
Renk Paleti Oluşturma
Temel Renkler
- Primary: Markanızın ana rengi. CTA butonlar, aktif tab'ler, linkler
- Secondary: Tamamlayıcı renk. Daha az öne çıkan aksiyonlar
- Background: Ana arka plan (light modda genelde beyaz veya açık gri)
- Surface: Kart, modal, bottom sheet arka planı
- On-Primary/On-Surface: Bu yüzeylerin üzerindeki metin/ikon rengi
Semantic (Anlamsal) Renkler
- Success: Yeşil tonları (onay, tamamlandı)
- Error: Kırmızı tonları (hata, silme)
- Warning: Turuncu/sarı (dikkat, uyarı)
- Info: Mavi tonları (bilgilendirme)
Her rengin en az 3-4 tonu olmalı (50, 100, 200, ..., 900 gibi). Material Design'ın renk sistemi burada iyi bir referans.
Tipografi Scale
Font boyutlarını rastgele seçmek yerine bir scale tanımlayın:
| Token | Boyut | Kullanım |
|---|---|---|
| xs | 11px | Caption, zaman damgası |
| sm | 13px | Yardımcı metin, etiket |
| base | 15px | Body text |
| lg | 17px | Alt başlık, liste başlığı |
| xl | 20px | Bölüm başlığı |
| 2xl | 24px | Sayfa başlığı |
| 3xl | 30px | Hero başlık |
Font weight olarak Regular (400) body'de, Medium (500) butonlarda, Semibold (600) başlıklarda ve Bold (700) ana başlıklarda kullanılır. Line-height genelde font boyutunun 1.4-1.6 katı olmalı.
Spacing Scale (4px Grid)
Tüm spacing değerlerini 4'ün katları olarak tanımlayın:
- 4px: Sıkı (inline elementler arası)
- 8px: Küçük (form elemanları arası)
- 12px: Orta-küçük (kart içi padding)
- 16px: Orta (bölümler arası, kart padding)
- 24px: Geniş (section arası)
- 32px: Çok geniş (sayfa bölümleri)
- 48px: Ekstra geniş (hero alanları)
4px grid kullanmak görsellerin hizalı ve düzenli görünmesini garantiler. Tasarımcı 13px padding koyduğunda "bu 12 mi 16 mı olmalı?" diye sorgulayın.
Border Radius Tutarlılığı
Uygulamadaki tüm elemanlar için radius değerlerini token'lara bağlayın:
- sm: 6px (badge, chip, küçük buton)
- md: 10px (input, kart)
- lg: 16px (modal, bottom sheet)
- xl: 24px (büyük kart, onboarding)
- full: 9999px (avatar, yuvarlak buton)
Bir uygulama içinde 3-4 farklı radius değeri yeterlidir.
Dark/Light Mode Token Sistemi
Renkleri doğrudan hex kodu olarak kullanmak yerine semantic token'lar tanımlayın:
- colors.background.primary: light #FFFFFF / dark #0A0A0A
- colors.background.secondary: light #F5F5F5 / dark #1A1A1A
- colors.text.primary: light #1A1A1A / dark #F5F5F5
- colors.text.secondary: light #6B7280 / dark #9CA3AF
- colors.border.default: light #E5E7EB / dark #2D2D2D
Bu yaklaşımla dark mode geçişi tek bir tema switch'i ile olur. Bileşenler token isimlerini kullanır, gerçek renk değerlerini bilmez.
Component Library Mantığı
Atomic Design hiyerarşisi:
- Atom: Buton, Input, Text, Icon, Badge
- Molecule: SearchBar (input + icon), ListItem (avatar + text + chevron)
- Organism: Header (logo + nav + avatar), Card (image + title + badge + buton)
Her bileşen props ile varyantlarını almalı (size: sm/md/lg, variant: primary/secondary/ghost), erişilebilirlik desteklemeli (accessibilityLabel, role) ve platform uyumlu olmalı.
Figma'dan Koda Geçiş
- Figma'da Auto Layout kullanın (CSS flexbox mantığı)
- Figma Variables ile token tanımlayın (renk, spacing, radius)
- Component props'ları Figma variant'ları ile eşleştirin
- Design token'ları JSON olarak export edip koda aktarın (Style Dictionary, Token Studio)
Tailwind/NativeWind ile Design System
NativeWind (Tailwind CSS for React Native) design system uygulamak için mükemmel bir araç:
- tailwind.config.js'de tüm token'lar tanımlanır
- Tema değişikliği tek dosyadan yapılır
- Dark mode: dark: prefix'i ile
- Custom token'lar: extend ile eklenir (colors.brand, spacing.18)
Ilham Kaynakları
- Radix Themes: Erişilebilir, token tabanlı bileşen sistemi
- Shadcn/ui: Copy-paste bileşenler (Radix + Tailwind)
- Tamagui: React Native için performanslı design system framework
- Gluestack UI: React Native bileşen kütüphanesi (NativeWind uyumlu)
- Apple HIG / Material 3: Platform yönergeleri her zaman referans
Design system, proje büyüdükçe değil, proje başlarken oluşturulmalı. Başta "gereksiz iş" gibi görünür ama 10 ekran sonra neden yaptığınızı anlarsınız. Küçük başlayın: renkler, tipografi, spacing ve 5-6 temel bileşen yeterli.