Tasarım Belirteçleri Nedir

Tasarım belirteçleri; renkler, boşluklar, tipografi ve gölgeler gibi tasarım kararlarını teknoloji bağımsız bir biçimde depolayan, adlandırılmış değişkenlerdir. Tasarım araçları ile kod arasında köprü kurarak platformlar arasında tutarlılık sağlarlar.

Belirteçler olmadan değerler CSS, iOS ve Android kod tabanlarında tekrarlanır. Tek bir doğru belirteç kaynağı, marka rengini değiştirdiğinizde bu değişikliğin tüm platformlarda aynı anda uygulanmasını sağlar.

Yaygın kategoriler şunlardır: renk (marka, anlamsal, nötr), tipografi (yazı tipi ailesi, boyut, kalınlık, satır yüksekliği), boşluk (4px ızgarası), yarıçap, gölge ve animasyon (süre, yumuşatma).

Belirteçler JSON, YAML veya W3C Tasarım Belirteci Biçimi olarak depolanır. Her belirtecin bir adı, değeri, türü ve isteğe bağlı açıklaması vardır. Dönüşümler, bunları platforma özgü çıktılara dönüştürür.

Genel belirteçler ham değerlerdir: color-blue-500: #3b82f6. Takma ad belirteçleri, genel belirteçlere anlamsal olarak başvurur: color-action-primary: {color-blue-500}. Bileşenler ham değerler yerine takma ad belirteçlerine başvurur.

CSS özel özellikleri, web belirteçleri için doğal çıktı biçimidir. spacing-4 adlı bir belirteç --spacing-4: 1rem hâline gelir ve stil sayfasının tamamında margin: var(--spacing-4) olarak kullanılır.

Figma Tokens eklentisi ve Tokens Studio, tasarım belirteçlerini Figma ile kod depoları arasında senkronize eder. Tasarımcılar ve geliştiriciler aynı belirteç söz varlığını paylaşarak teslim sırasında oluşan çeviri hatalarını ortadan kaldırır.

Belirteçler zaman içinde gelişir: eski değerleri, kullananları bozmadan geçiş eşlemeleri sağlayarak kullanımdan kaldırın. Belirteç paketlerinin anlamsal sürümlemesi, kullanan ekipleri geriye dönük uyumsuz değişiklikler konusunda bilgilendirir.

Aynı belirteç JSON'u web için CSS değişkenleri, iOS için Swift sabitleri ve Android için XML kaynakları oluşturur. Tek bir tanım dosyası, tasarım kararlarının platformlar arasında farklılaşmasını önler.

Renk ve boşluk belirteçleriyle başlayın. Sabit kodlanmış değerleri dosya dosya değiştirin. Kalan sabit kodlanmış tasarım kararlarını bulmak için kod tabanında ham onaltılık değerleri ve piksel sabitlerini arayın.

Takma ad belirteçleri temalandırmayı mümkün kılar: bir takma adın işaret ettiği genel belirteci değiştirerek bileşen koduna dokunmadan temanın tamamını değiştirebilirsiniz. Açık/koyu/marka temalarının tümü aynı takma ad katmanından türetilir.

Genel belirteç ile takma ad belirteci arasındaki fark nedir?

Tasarım belirteçleri, tasarım kararlarını platformdan bağımsız bir biçimde kodlayan adlandırılmış değişkenlerdir. Genel belirteçler ham değerleri tutar; takma ad belirteçleri anlamsal anlam sağlar. Birlikte tutarlı, sürdürülebilir ve çok platformlu tasarım sistemlerine güç verirler.