Tasarım Belirteçleri Nedir ve Neden Önemlidir

Tasarım belirteçleri, bir tasarım sisteminin adlandırılmış ve yeniden kullanılabilir değerler olarak ifade edilen atomik kararlarıdır. Bir stil dosyasına #3b82f6 değerini sabit olarak yazmak yerine color-primary-500: #3b82f6 tanımlar ve bu ada her yerde başvurursunuz. Ad anlam taşır; her başvuruyu güncellemeden değer değiştirilebilir.

Belirteçler her görsel özelliği kapsar: renk belirteçleri (color-primary-500: #3b82f6), boşluk belirteçleri (spacing-4: 16px), tipografi belirteçleri (font-size-lg: 18px, font-weight-bold: 700), kenar yuvarlaklığı belirteçleri (radius-md: 8px), gölge belirteçleri ve animasyon süresi belirteçleri. Birlikte, görsel dilin tamamını kodlarlar.

Belirteçler, tasarım ve mühendislik arasında paylaşılan tek bir doğruluk kaynağı oluşturur. Tasarımcılar değerleri Figma'da tanımlar, mühendisler bunları kodda kullanır. Marka rengi değiştiğinde tek bir belirteç değerini güncellersiniz ve bu belirteci kullanan her bileşen değişikliği otomatik olarak yansıtır — binlerce dosyada bulup değiştirme yapmanız gerekmez.

Belirteçler olmadan renk ve boşluk değerleri stil sayfalarına, bileşen dosyalarına ve yardımcı sınıflara sabit olarak yazılır. Mavi bir renk farklı dosyalarda #3b82f6, rgb(59, 130, 246) ve blue-500 olarak görünebilir. Marka rengini değiştirmek için tüm kullanımları bulup değiştirmek gerekir; bazılarını atlama riski yüksektir.

Tasarım belirteçleri, çoklu tema sistemlerinin temelini oluşturur. Koyu modda color-background ve color-text gibi anlamsal belirteçler, etkin temaya bağlı olarak farklı ilkel değerlere işaret eder. Her bileşeni değil, tek bir eşlemeyi değiştirirsiniz. Açık ve koyu temalar bileşen kodunu paylaşır; yalnızca belirteç değerleri farklıdır.

Birden fazla markaya hizmet veren bir SaaS platformunda belirteçler, kodu çoğaltmadan marka özelleştirmesine olanak tanır. Marka A birincil renk olarak maviyi, Marka B ise yeşili kullanır; yalnızca anlamsal belirteç eşlemeleri farklıdır. Düğme bileşeninin kodu aynıdır; bileşen color-action-primary değerini okur ve bu değer markaya göre farklı bir renge çözümlenir.

Belirteçler katmanlar halinde düzenlenir. İlkel belirteçler ham değerlerdir: color-blue-500: #3b82f6. Anlamsal belirteçler anlamı ifade eder: color-action-primary: {color-blue-500}. Bileşen belirteçleri en özeldir: button-primary-background: {color-action-primary}. Bu hiyerarşi, “ne” ile “nerede kullanıldığı”nı birbirinden ayırır.

Anlamsal belirteçler, çoklu tema desteğinin anahtarıdır. Açık temada color-background: {color-white} kullanılır. Koyu temada color-background: {color-gray-900} kullanılır. Bileşenler belirli bir renge değil, color-background değerine başvurur. Tema değiştirildiğinde anlamsal belirteç eşlemeleri değiştirilir; bileşenlerde hiçbir değişiklik yapılması gerekmez.

Figma Değişkenleri (2023'te tanıtıldı), Figma içindeki tasarım belirteçleridir. Tasarımcılar, mühendislerin kodda uyguladığı belirteç hiyerarşisinin aynısını Figma'da tanımlar. Tokens Studio for Figma veya resmi Figma Tokens eklentisi gibi araçlar, Figma değişkenlerini JSON'a aktarır; Style Dictionary de bunları CSS değişkenlerine veya JS nesnelerine derler.

W3C Tasarım Belirteçleri Topluluk Grubu, tasarım belirteçleri için standart bir JSON biçimi geliştiriyor. Amaç birlikte çalışabilirliktir: herhangi bir tasarım aracıyla (Figma, Sketch) ve herhangi bir derleme aracıyla (Style Dictionary, Theo, Panda CSS) çalışabilen bir belirteç dosyası. Spesifikasyon biçimini benimsemek, belirteç sisteminizi geleceğe hazırlar.

Tasarım belirteçleri yönetişim kararları gerektirir: yeni belirteçleri kimlerin ekleyebileceği (tasarım, mühendislik veya her ikisi), belirteçlerin nasıl sürümleneceği, kullanımdan kaldırılan belirteçlerin nasıl devreden çıkarılacağı ve belirteç değişikliklerinin bunları kullanan ekiplere nasıl duyurulacağı. Yönetişim olmadan belirteç sistemleri zamanla dağılır; sistemin yanında yeni sabit değerler ortaya çıkar ve sistemin amacı boşa çıkar.

Tasarım belirteci katmanları hiyerarşisinde anlamsal belirteçler neyi temsil eder?

Tasarım belirteçleri, bir tasarım sisteminin sözlüğünü oluşturan adlandırılmış atomik değerlerdir (renkler, boşluklar, tipografi). Tasarım ile kod arasında tek bir doğru kaynağı oluştururlar. Üç katmanlı hiyerarşi — ilkel (ham değerler), anlamsal (anlam) ve bileşen (belirli kullanım) — çoklu tema ve çoklu marka desteği sağlar. Figma Değişkenleri ve W3C Tasarım Belirteçleri spesifikasyonu, tasarım ile mühendislik arasındaki eşgüdümü ilerletiyor. Belirteç yönetişimi, sistemin zaman içinde tutarlı kalmasını sağlar.