Tasarım tokenları, bir ürün üzerindeki görsel kararlar için tek gerçek kaynakdır. Renk, boşluk, tipografi ve hareketi adlandırılmış değişkenlere kodlayarak bileşenlerin tüketmesini sağlar.
Tokenlar neden önemlidir
Tokenlar olmadan, birincil marka renginde bir değişiklik yapmak yüzlerce dosyada avlanmayı gerektirir. Tokenlar ile, bir değişken güncellemesi her yere yayılır — butonlardan uyarılara, navigasyon çubuklarına kadar.
Tokenlar ayrıca tasarım araçları ile kod arasındaki boşluğu kapatır. Bir tasarımcı Figma'da bir rengi surface-brand olarak adlandırır; bir geliştirici CSS'de var(--surface-brand) kullanır. Aynı dili konuşuyorlar.
Pratik örnekler
Arka plana, bir kenarlığa ve metne ihtiyaç duyan bir bileşeni düşünün. #1a56db, #e1effe ve #1e429f gibi sabit kodlama yerine, bileşen --color-primary, --surface-primary-subtle ve --text-primary-strong referansını kullanır. Marka geliştiğinde, palet değişir — bileşen değişmez.
Token kategorileri
Renk — marka, anlamsal ve nötr paletler
Boşluk — 2px'den 64px'e kadar tutarlı bir ölçek
Tipografi — yazı tipi boyutları, ağırlıkları ve satır yükseklikleri
Kenar yarıçapı — keskin köşelerden tamamen yuvarlaklara
Gölge — derinlik ve hiyerarşi için yükseklik seviyeleri
Hareket — yumuşatma eğrileri ve süre adımları
İnternette bulunan alıntıların çoğu muhtemelen bir yapay zeka tarafından oluşturulmuştur.
content_image() işlevi varsayılan olarak loading="lazy" ile bir img oluşturur ve bir başlık sağlandığında bunu bir figure elemanının içine sarar.
Başlıksız — sade bir img, tam genişlik.
Başlık ile — figcaption ile sarılmış bir figure.
Bir figcaption ile bir figure — kaynakları belirtmek veya görsel içeriğe bağlam eklemek için kullanın.
Metinli medya
Düzenin üçte birini kaplayan görsel.
Bir resmi ve metni yan yana yerleştirmek için content--media kullanın. Görsel genişliğin üçte birini, metin ise iki üçte birini alır.
Bu düzen, alıntılar, illüstrasyonlu tanımlar veya resmin metni domine etmeden desteklediği herhangi bir kısa editoryal blok için uygundur.
Süslü başlangıç harfi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta çubuğu
Tasarım tokenlarını anlama
Tasarım tokenları, bir ürün üzerindeki görsel kararlar için tek gerçek kaynakdır. Renk, boşluk, tipografi ve hareketi adlandırılmış değişkenlere kodlayarak bileşenlerin tüketmesini sağlar.
