Frontend Academy · Ders

Style Dictionary ile Tasarım Belirteçleri

Renk, aralık ve tipografi belirteçlerini JSON'da tanımlamayı ve Style Dictionary ile bunları CSS değişkenlerine, JS sabitlerine veya iOS/Android biçimlerine dönüştürmeyi öğrenin.

Style Dictionary ile Tasarım Belirteçleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Tasarım Belirteçleri Nedir

Tasarım belirteçleri, bir tasarım sisteminin adlandırılmış ilkel değerleridir: renkler, boşluklar, yazı tipi boyutları, kenarlık yarıçapları ve gölgeler. Bunlar tek doğruluk kaynağıdır — her bileşen stillerini bunlardan türetir.

Belirteçler Neden Önemlidir

Belirteçler, tasarım kararlarını uygulamadan ayırır. color.primary değerini bir kez maviden yeşile değiştirin; onu kullanan her bileşen güncellenir. Ayrıca aynı tasarımı web, iOS ve Android'de sunmanızı sağlarlar.

Belirteçlerin Saklanması

Belirteçleri JSON veya YAML biçiminde saklayın — platformlar arasındaki araçların kullanabileceği tarafsız biçimlerdir. JSON en yaygın olanıdır.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon), tasarım belirteçleri için fiilî derleme aracıdır. Belirteçleri okur ve CSS değişkenleri, SCSS, JS sabitleri, iOS Swift ve Android XML gibi birden çok çıktı biçimine dönüştürür.

npm install -D style-dictionary

Yapılandırma

Girdi belirteçlerini ve çıktı platformlarını açıklayan style-dictionary.config.js dosyasını oluşturun.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Derlemeyi Çalıştırma

Tüm platformları üretmek için CLI'yi çalıştırın.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Oluşturulan CSS Çıktısı

Tutarlı bir adlandırma düzenine sahip CSS değişkenleri (ad alanlı kebap biçimi).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Oluşturulan JS Çıktısı

JS/TS kodunda kullanılacak JS nesnesi (Tailwind yapılandırması, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Belirteç Adlandırma Kuralları

Değişmez adlar (color.blue-500) yerine anlamsal adlar (color.primary) kullanın. Anlamsal belirteçler, adları yeniden adlandırmadan değerleri değiştirmenizi sağlar. İki katmanlı sistem: değişmez palet (blue-500) → anlamsal takma ad (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Belirteçlerle Tema Oluşturma

Temaları (açık/koyu) desteklemek için farklı girdilerle birden çok platform derleyin — adlar aynı, değerler farklı olsun.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Belirteç Kategorileri

Yaygın kategoriler: renk, boşluk, tipografi (yazı tipi ailesi, boyut, satır yüksekliği, ağırlık), kenarlık (yarıçap, genişlik), gölge, geçiş (süre, hızlanma/yavaşlama), z-endeksi, kesme noktası.

Belirteç Kayıt Araçları

Style Dictionary'nin ötesinde: Tokens Studio (Figma eklentisi), Specify, Supernova. Tasarımcıların belirteçleri Figma'da yönetmesine ve kod tabanıyla otomatik olarak eşitlemesine olanak tanırlar.

Hızlı Kontrol

Tasarım belirteçlerini Style Dictionary ile kullanmanın temel yararı nedir?

Özet: Tasarım Belirteçleri

Belirteçler, adlandırılmış ilkel değerlerdir (renk, boşluk, tipografi) — bir tasarım sisteminin tek doğruluk kaynağıdır. JSON olarak saklanır. Style Dictionary, bunları CSS değişkenlerine, JS'ye, iOS'a ve Android'e dönüştürür. Değişmez adlar (blue-500) yerine anlamsal adlandırma (primary) kullanılır. İki katman: palet → anlamsal takma ad. Temalar ayrı derlemelerle oluşturulur. Tokens Studio aracılığıyla Figma'dan eşitlenir.

Sıkça Sorulan Sorular

“Style Dictionary ile Tasarım Belirteçleri” dersi ücretsiz mi?

Evet — “Style Dictionary ile Tasarım Belirteçleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Style Dictionary ile Tasarım Belirteçleri” dersinde ne öğreneceğim?

Renk, aralık ve tipografi belirteçlerini JSON'da tanımlamayı ve Style Dictionary ile bunları CSS değişkenlerine, JS sabitlerine veya iOS/Android biçimlerine dönüştürmeyi öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Style Dictionary ile Tasarım Belirteçleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Storybook: Hikâyeler, Denetimler ve Belgeler
Style Dictionary ile Tasarım Belirteçleri
npm'ye Sürümleme ve Yayınlama
Tasarım Sistemini Kullanma

← Frontend Academy Sayfasına Dön