Belirteç Araçları: Style Dictionary
Style Dictionary aracını kullanarak tasarım belirteçlerini platformlar arasında dönüştürün ve dağıtın.
Belirteç Araçları: Style Dictionary, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Style Dictionary Nedir?
Style Dictionary, Amazon tarafından geliştirilen açık kaynaklı bir derleme aracıdır. Bir belirteç JSON kaynağını CSS özel özellikleri, SCSS değişkenleri, iOS Swift sabitleri, Android XML'i ve JavaScript/TypeScript modülleri gibi platform çıktılarında dönüştürür; tüm bunları tek bir doğruluk kaynağından üretir.
Proje Yapısı
Belirteçleri tokens/ dizininde JSON veya JSON5 dosyaları olarak düzenleyin. Style Dictionary tüm dosyaları otomatik olarak birleştirir. Dosyaları kategoriye göre ayırın: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Belirteç JSON Biçimi
Her belirteç, bir value anahtarına ve isteğe bağlı type, description ve comment alanlarına sahip iç içe bir nesnedir. Style Dictionary, çıktıda kullanılacak nokta gösterimli adlar oluşturmak için iç içe yapıyı düzleştirir.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Yapılandırma Dosyası
config.json; kaynakları (belirteç dosyalarını), platformları (web, iOS, android) ve her platforma yönelik dönüşümleri/biçimleri belirtir. Her platform farklı dönüşümler uygulayabilir ve farklı dosya biçimleri üretebilir.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Dönüşümler
Dönüşümler, derleme sırasında belirteç değerlerini değiştirir: color/css renkleri onaltılık biçimde düzenler, size/rem px değerlerini rem'e dönüştürür, name/cti/kebab ise iç içe kategori-tür-öğe yapısından kısa çizgili adlar oluşturur.
Biçimler
Biçimler, çıktı dosyasının içeriğini belirler. Yerleşik biçimler: css/variables bir CSS :root bloğu, scss/variables SASS değişkenleri, javascript/module ise bir JS nesnesi dışa aktarır. Özel biçimler, gereken her türlü çıktı yapısını sağlar.
Belirteçler Arasındaki Başvurular
Küme parantezi söz dizimini kullanarak diğer belirteçlere başvurun: {"value": "{color.brand.primary}"}. Style Dictionary, derleme zamanında başvuruları çözümler ve somut değerler üretir. Başvurular, takma adlarla genel belirteçler arasındaki eşlemeyi oluşturur.
Özel Dönüşümler
Projeye özgü ihtiyaçları karşılamak için özel dönüşümler kaydedin: renklerden alfa kanalını kaldırın, tasarım aracındaki opaklık değerlerini dönüştürün veya satıcı önekleri ekleyin. Özel dönüşümler, yerleşik dönüşümler gibi derleme işlem hattına eklenir.
Derlemeyi Çalıştırma
npx style-dictionary build komutunu çalıştırın veya bu komutu npm derleme komut dosyanıza ekleyin. Çıktı dosyaları yapılandırılmış buildPath dizinlerine gider. Oluşturulan dosyaları kaydedebilir veya sürekli tümleştirme ortamında derleme zamanında oluşturabilirsiniz; her iki yaklaşım da yaygındır.
Figma ile Tümleştirme
Figma için Tokens Studio, belirteç JSON'unu bir GitHub deposuyla eşitler. JSON değiştiğinde Style Dictionary sürekli tümleştirme sürecinde çalışır ve güncellenmiş CSS ile platform dosyalarını otomatik olarak oluşturur. Tasarım değişiklikleri, elle kopyalayıp yapıştırmaya gerek kalmadan koda aktarılır.
Belirteç Sürümlendirme
Belirteç paketinizi npm üzerinde sürümlendirin. Kullanıcılar belirli bir sürüme sabitlenir ve yükseltmeyi bilinçli olarak yapar. Değişiklik günlükleri eklenen, kullanımdan kaldırılan ve silinen belirteçleri belgeler. Anlamsal sürümlendirme, geriye dönük uyumsuz değişiklikleri güvenli güncellemelerden ayırır.
Bilgi Kontrolü
Style Dictionary'de bir "dönüşüm" ne işe yarar?
Özet
Style Dictionary, tek bir belirteç JSON kaynağını yapılandırılabilir dönüşümler ve biçimler aracılığıyla platforma özgü çıktılara dönüştürür. Figma'dan koda belirteç eşitlemesini, çok platformlu tutarlılığı ve ekiplerin bilinçli şekilde kullanıp yükseltebileceği sürümlendirilmiş belirteç paketlerini mümkün kılar.
Sıkça Sorulan Sorular
“Belirteç Araçları: Style Dictionary” dersi ücretsiz mi?
Evet — “Belirteç Araçları: Style Dictionary” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Belirteç Araçları: Style Dictionary” dersinde ne öğreneceğim?
Style Dictionary aracını kullanarak tasarım belirteçlerini platformlar arasında dönüştürün ve dağıtın. CSS 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.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS 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 4. dersidir.
“Belirteç Araçları: Style Dictionary” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS 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
- Tasarım Belirteçleri Nedir
- Belirteç Adlandırma Kuralları
- CSS Değişkenleriyle Çok Markalı Tema Uygulama
- Belirteç Araçları: Style Dictionary