Not1 dk okuma
Tasarım Sistemlerinde Token (Design Token) Mimarisi
Figma ve kod arasındaki köprü: Primitif tokenlar, semantik tokenlar ve tema yönetimi.
Büyüyen projelerde en büyük kaos, bir butonun rengi değiştiğinde yüzlerce CSS dosyasında arama yapmaktır. Design Token mimarisi, tasarım değerlerini tek bir kaynaktan yönetir.
3 Katmanlı Token Hiyerarşisi
- Primitive Tokens (Temel Değerler): Ham renk ve ölçü isimleri (örn:
--blue-500: #3b82f6,--space-4: 16px). - Semantic Tokens (Anlamsal Değerler): Amaca yönelik atamalar (örn:
--color-primary-action: var(--blue-500),--card-padding: var(--space-4)). - Component Tokens (Bileşen Değerleri): Doğrudan butona veya karta bağlı değerler (örn:
--button-bg: var(--color-primary-action)).
Bu sayede karanlık mod veya yeni bir tema eklerken tek yapmanız gereken Semantic Token katmanını değiştirmektir.