Sıfırdan Tasarım Sistemi Kurmak: Token Mimarisinden Bileşen Kütüphanesine
Bir ürün büyüdükçe her ekran biraz daha farklılaşır: aynı butonun beş farklı gölgesi, üç ayrı mavi tonu, birbirini tutmayan boşluklar ortaya çıkar. Bu tutarsızlık hem kullanıcı deneyimini bozar hem de geliştirme hızını yavaşlatır. Tasarım sistemi, bu kaosu önleyen; kararların tek bir kaynaktan yönetildiği yaşayan bir üründür. Bu yazıda sıfırdan sağlam bir tasarım sistemini nasıl inşa edeceğinizi katman katman ele alıyoruz.
Tasarım Token'ları: Sistemin Atomları
Tasarım token'ları, renk, tipografi, boşluk ve gölge gibi görsel kararların isimlendirilmiş değişkenler olarak saklanmasıdır. Doğrudan #2563EB yazmak yerine color-primary tanımlarsanız, markanın rengini değiştirmek yüzlerce dosyada değil tek bir yerde gerçekleşir.
Token'ları üç katmanda kurgulamak en sürdürülebilir yaklaşımdır:
- Temel (primitive) token'lar: Ham değerler, örneğin
blue-500,space-4. - Anlamsal (semantic) token'lar: Bağlama göre isim, örneğin
color-action-primary,surface-danger. - Bileşen token'ları: Belirli bileşene özel, örneğin
button-primary-background.
Bu ayrım sayesinde koyu tema, marka yenileme veya erişilebilirlik ayarları anlamsal katmandan tek dokunuşla yönetilir.
Bileşen Hiyerarşisi ve Atomik Tasarım
Token'lar hazır olduğunda bileşenleri atomik tasarım mantığıyla kurgulayın: atomlar (buton, giriş alanı), moleküller (arama çubuğu), organizmalar (üst menü) ve şablonlar. Her bileşenin tek bir sorumluluğu olmalı; bir kart bileşeni hem içerik hem düzen hem de iş mantığını taşımaya başladığında yeniden kullanılabilirliğini kaybeder.
Bileşenleri tasarlarken varyantları (birincil/ikincil), durumları (hover, disabled, loading) ve boyutları baştan tanımlayın. Eksik durumlar, sonradan sisteme dışarıdan eklenen ve tutarlılığı bozan yamalara dönüşür.
Figma ile Kod Arasında Tek Doğruluk Kaynağı
Tasarım sistemi yalnızca Figma'da yaşarsa, geliştiriciler onu manuel yorumlar ve kopukluk başlar. Amaç tek doğruluk kaynağı (single source of truth) oluşturmaktır. Token'ları JSON formatında tutup Style Dictionary gibi araçlarla hem CSS değişkenlerine hem de Figma değişkenlerine besleyebilirsiniz.
- Figma Variables ile token'ları senkronize edin.
- Bileşen isimlerini kod bileşenleriyle birebir eşleştirin.
- Storybook üzerinden canlı bir bileşen dokümantasyonu yayınlayın.
Dokümantasyon ve Kullanım Kuralları
İyi bir bileşen kütüphanesi, ne zaman kullanılacağını anlatmadığında yarım kalır. Her bileşen için ne zaman kullanılır, ne zaman kullanılmaz ve erişilebilirlik notları içeren bir kullanım rehberi yazın. "Birincil buton bir ekranda yalnızca bir kez kullanılır" gibi net kurallar, tasarımcılar arası yorum farklarını ortadan kaldırır.
Yönetişim ve Katkı Modeli
Tasarım sistemi bir proje değil, süreklilik gerektiren bir üründür. Kimin değişiklik yapabileceği, yeni bir bileşenin nasıl önerileceği ve sürüm yönetiminin nasıl işleyeceği baştan tanımlanmalıdır. Semantik sürümleme (major/minor/patch) kullanarak ekiplerin kırıcı değişikliklerden haberdar olmasını sağlayın.
Merkezi bir ekibin her şeyi ürettiği model küçük şirketlerde işe yarasa da büyüdükçe darboğaza dönüşür; "federe" modelde ürün ekipleri katkı sunar, çekirdek ekip kalite kapısı görevi görür.
Benimseme Metrikleri ile Başarıyı Ölçün
Sistem kurmak yeterli değildir; kullanıldığını kanıtlamalısınız. Benimseme oranı (sistem bileşenlerinin toplam bileşenlere oranı), tekrarlanan özel kod sayısı ve tasarımdan geliştirmeye teslim süresi gibi metrikler yatırımın geri dönüşünü gösterir.
Bir tasarım sistemi, doğru kurulduğunda ekiplerin tekrar tekrar aynı kararları vermesini engeller ve enerjiyi gerçek ürün problemlerine yönlendirir. Küçük başlayın, token'lardan yola çıkın ve sistemi kullanıcı ihtiyaçlarıyla birlikte büyütün; olgun bir sistem bir gecede değil, disiplinli iterasyonlarla ortaya çıkar.