Design Token: Tasarım Kararlarını Adlandırılmış Değerlere Çevirmek

Design token nedir?

Design token (tasarım token'ı), bir tasarım sisteminde renk, tipografi, boşluk, köşe yuvarlaklığı, gölge ve hareket süresi gibi görsel kararları, platformdan bağımsız ve adlandırılmış değerler olarak saklayan yapıdır. 'marka mavisi' ya da 'ana düğme rengi' gibi bir ad, arkasındaki gerçek değere işaret eder.

Amaç, aynı kararı farklı yerlerde elle tekrar yazmamaktır. Token'lar tasarım araçları ile web, iOS ve Android kodu arasında ortak bir dil kurar; bir kez değişen değer her platforma aktarılır.

Token neden kullanılır?

Token'sız bir projede ana marka rengi tasarım dosyasında, web stil dosyasında ve mobil kodda ayrı ayrı yazılır. Marka rengi güncellenince her yer tek tek değiştirilir ve bir yer unutulur. Token ile renk tek kaynakta tanımlanır, bu kaynaktan platformlara dönüştürülür.

Bu yaklaşım şu faydaları getirir: tutarlılık, hızlı güncelleme, koyu tema ve çok markalı tema desteği, tasarımcı ve geliştirici arasında ortak adlandırma ve erişilebilirlik kurallarının (örneğin kontrast) merkezden yönetilmesi.

Token katmanları

Olgun sistemlerde token'lar genellikle katmanlara ayrılır:

• Ham (primitive) token'lar: Ham değerler. Örneğin mavi tonları, boşluk basamakları.
• Anlamsal (semantic) token'lar: Değerin kullanım amacını anlatır. 'Birincil eylem arka planı', 'hata metni rengi' gibi. Anlamsal token ham token'a işaret eder.
• Bileşen token'ları: Belirli bir bileşene özgü kararlar. Örneğin düğme dolgu rengi.

Koyu tema ya da farklı bir marka teması istendiğinde ham değerler aynı kalır, anlamsal katmandaki eşleşmeler değişir. Bu yüzden adlandırma değerin görünüşüne değil, amacına dayanmalıdır.

Örnek: koyu temaya geçiş

Örneğin bir ürün ekibi 'metin-birincil' adlı bir anlamsal token tanımlar. Açık temada bu token koyu gri bir ham değere, koyu temada açık gri bir ham değere bağlıdır. Bileşen kodu yalnızca 'metin-birincil' adını kullanır, hangi değere çözüldüğünü bilmez. Tema değiştiğinde tüm metinler kendiliğinden uyum sağlar.

Aynı mantık ikinci bir marka için de çalışır: yeni marka kendi ham değerlerini ve eşleşmelerini tanımlar, bileşenler değişmeden kalır.

Token'lar kodda nasıl dağıtılır?

Token'lar tipik olarak tek bir kaynak dosyada (çoğunlukla JSON ya da benzeri bir formatta) tutulur. Bir dönüştürme aracı, bu kaynaktan platforma özgü çıktılar üretir: web için CSS değişkenleri, iOS için Swift sabitleri, Android için XML ya da Kotlin tanımları. Bu hat sürekli entegrasyon sürecine bağlanırsa token değişikliği otomatik olarak sürümlenir ve yayımlanır.

Tasarım araçlarındaki değişkenler ile kod tarafındaki token kaynağı arasındaki senkronizasyon, çoğu ekibin en çok emek harcadığı noktadır.

Sık yapılan hatalar

• Token'ı değerine göre adlandırmak ('kırmızı-yüz' gibi) ve değer değişince adı yanıltıcı hale getirmek.
• Anlamsal katmanı atlayıp bileşenlerden ham token'a doğrudan bağlanmak; tema değişimi zorlaşır.
• Çok fazla token tanımlamak; kimsenin hatırlamadığı bir sözlük oluşur.
• Tasarım ve kod arasında tek kaynak belirlememek.
• Sürümleme ve değişiklik duyurusu olmadan token yayımlamak; tüketen ürünler sessizce bozulur.

Mindset programlarında design token

Mindset kataloğundaki Design Tokens ve Çok Markalı Tema Sistemleri programı token mimarisi ve isimlendirme, token'ların koda bağlanması ile çok markalı yönetim ve sürdürülebilirlik modüllerini içerir. Design Token Otomasyonu ve Kod Senkronizasyonu (Style Dictionary) programı ise token kaynağının yapılandırılması, Style Dictionary ile dönüştürme hattı, otomasyon, sürümleme ve yayın konularını kapsar.