Cansu Arı Logo
Blog
Nedir?

Design Token Nedir? UI Sistemlerinde Tek Kaynak Gerçeği

Renk, font, spacing... Hepsi tek bir kaynaktan kontrol edilsin istiyorsanız, Design Token’larla tanışın!

  • #Tasarım
  • #UI
Skip to content

Design Token’larla Tutarlılık

Tasarım sistemlerinde her şeyin aynı görünmesini sağlamak, bazen bir renk kodu uğruna ekip arkadaşınla uzun Slack tartışmalarına girmek kadar zor olabilir. İşte tam da burada sahneye Design Token’lar çıkıyor.

Design Token’lar, bir tasarım sistemindeki tüm stil değişkenlerinin (renk, font, padding, border-radius, shadow, opacity... aklına ne gelirse) tek bir kaynakta tutulduğu dijital sihirli etiketlerdir. Böylece tasarımcı Figma’da ne görüyorsa, geliştirici kodda da aynı şeyi görür. Bu da “Figma’da farklı, prod’da farklı çıkıyor” dramalarını tarihe gömer. 😇

{
  "color.primary": "#007AFF",
  "color.secondary": "#FF9500",
  "spacing.sm": "8px",
  "font.family.primary": "Inter, sans-serif",
  "border.radius.md": "6px",
  "shadow.sm": "0 1px 2px rgba(0,0,0,0.1)"
}

Nasıl Çalışır?

Kısaca özetlersek: Design Token = Tasarım Kararının Kod Hali. Yani bir “primary color” veya “base spacing” değeri aslında birer token. Bu değerler JSON, YAML, CSS ya da SCSS değişkenleri olarak saklanabilir. Daha sonra build sürecinde otomatik olarak iOS, Android ve Web formatlarına dönüştürülür.

Bir token değiştiğinde, tüm UI evrende o değişiklik yankılanır. Renk tonunu biraz koyulaştırdın mı? Birkaç saniye içinde her buton, her link, her ikon yeni halini alır. (Sihir değil, sistem!)

Neden Kullanılır?

  • Tutarlılık: Tüm platformlarda aynı görsel dil.
  • Merkezi yönetim: Renk değişikliği mi var? Sadece bir dosyayı güncelle, herkes mutlu.
  • Ölçeklenebilirlik: 10 kişiyle başlayan ekip 100 kişiye çıktığında bile kaos yaşanmaz.
  • Tema desteği: Light, Dark veya “Şirketin 10. yılı özel mor teması” -- hepsi tek dosya ile mümkün.
  • Otomasyon: Figma’daki token değiştiğinde kod deposu da güncellenebilir (evet, 2025’te hâlâ manuel kopyalayanlar var ama artık gerek yok).

Uygulama Örneği

Bir tokens.css dosyasında şöyle tanımladığını düşünelim:
:root {
  --color-primary: #007aff;
  --spacing-md: 16px;
  --radius-sm: 4px;
}
Ve React bileşeni de kabaca şöyle olabilir:
<button style={{ backgroundColor: 'var(--color-primary)', padding: 'var(--spacing-md)', borderRadius: 'var(--radius-sm)' }}>
  Buton
</button>
Artık markanız logosunu, ana rengini ya da tipografisini değiştirirse panik yok. Token dosyasını güncelle, build’i al, kahveni iç. ☕

Design System Entegrasyonu

Token yönetimi için Figma Tokens, Style Dictionary, Theo, Tokens Studio gibi araçlar kullanılır. Bu araçlar sayesinde tasarım dosyası ve kod tabanı arasında otomatik bir köprü kurulur. Tasarımcı Figma’da “primary” rengi değiştirdiğinde, aynı değişiklik otomatik olarak tokens.json dosyasında da güncellenir. Böylece “geliştirici güncellememiş” bahanesi de tarih olur. ”Bahane” diyoruz da tabii ki bütün bunlar ürün tutarlığı için ”insan hatalarını” minimize ederek, ekibin iletişimini de doğru yönlendirir.

Gerçek Hayat Örneği

IBM, Adobe, Salesforce, Shopify gibi devler yıllardır bu yöntemi kullanıyor. Çünkü 10 farklı ürün, 6 platform, 3 marka varyasyonu ile aynı dili korumak manuel olarak imkânsız. Design Token sistemi, markaların “görsel DNA”sını koruyarak, hem hız hem de bütünlük sağlar.

Üstelik sadece dev markalar için değil -- startup'lar da bundan faydalanabilir, hatta faydalanması uzun vadede çok daha yönetilebilir olur. Sonuçta bir projeyi küçük diye baştan savma yapmıyoruz dimi?! 😉
Küçük bir ekip bile token tabanlı sistemle çalıştığında, kodda inline style cehennemi yaşanmaz, her şey daha okunabilir ve sürdürülebilir olur.

Sonuç

Design Token’lar, UI dünyasının Esperanto’su gibidir -- herkes aynı dili konuşur. Bir kez sistem oturdu mu, tüm platformlarda aynı görünümü elde etmek sadece bir “commit” uzağındadır. Tasarım kararlarını kod haline getir, ve ekibinle birlikte tek kaynak gerçeğini yaşa.

“Token’lar sadece kodu değil, ekip iletişimini de güzelleştirir.”

All tags
  • Tasarım
  • UI
Prev
Next