Peralatan Token: Style Dictionary
Transformasikan dan distribusikan token desain ke berbagai platform menggunakan alat Style Dictionary.
Peralatan Token: Style Dictionary adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa itu Style Dictionary?
Style Dictionary adalah alat pembangunan sumber terbuka dari Amazon yang mengubah sumber JSON token menjadi keluaran khusus platform: properti kustom CSS, variabel SCSS, konstanta Swift iOS, XML Android, serta modul JavaScript/TypeScript — semuanya dari satu sumber kebenaran.
Struktur Proyek
Atur token dalam direktori tokens/ sebagai berkas JSON atau JSON5. Style Dictionary menggabungkan semua berkas secara otomatis. Pisahkan berkas berdasarkan kategori: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Format JSON Token
Setiap token adalah objek bersarang dengan kunci value serta bidang opsional type, description, dan comment. Style Dictionary meratakan struktur bersarang menjadi nama dengan notasi titik untuk keluaran.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Berkas Konfigurasi
config.json menentukan sumber (berkas token), platform (web, iOS, Android), serta transformasi dan format untuk setiap platform. Setiap platform dapat menerapkan transformasi yang berbeda dan menghasilkan format berkas yang berbeda.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Transformasi
Transformasi mengubah nilai token selama kompilasi: color/css memformat warna sebagai heksadesimal, size/rem mengonversi piksel ke rem, dan name/cti/kebab menghasilkan nama kebab-case dari struktur kategori-jenis-item yang bersarang.
Format
Format menentukan isi berkas keluaran. Bawaan: css/variables menghasilkan blok :root CSS, scss/variables menghasilkan variabel SASS, dan javascript/module mengekspor objek JS. Format khusus memungkinkan bentuk keluaran apa pun yang diperlukan.
Referensi Antartoken
Rujuk token lain menggunakan sintaksis kurung kurawal: {"value": "{color.brand.primary}"}. Style Dictionary menyelesaikan referensi saat kompilasi dan menghasilkan nilai konkret. Referensi membuat pemetaan alias-ke-global.
Transformasi Khusus
Daftarkan transformasi khusus untuk menangani kebutuhan khusus proyek: hapus alfa dari warna, konversikan nilai opasitas dari alat desain, dan tambahkan prefiks vendor. Transformasi khusus masuk ke alur kerja kompilasi seperti transformasi bawaan.
Menjalankan Kompilasi
Jalankan npx style-dictionary build atau tambahkan ke skrip kompilasi npm. Berkas keluaran ditempatkan di direktori buildPath yang dikonfigurasi. Masukkan berkas yang dihasilkan ke repositori atau hasilkan saat kompilasi dalam CI — kedua pola ini umum digunakan.
Integrasi dengan Figma
Tokens Studio untuk Figma menyinkronkan JSON token ke repositori GitHub. Style Dictionary berjalan dalam CI ketika JSON berubah dan secara otomatis menghasilkan CSS serta berkas platform yang diperbarui. Perubahan desain diteruskan ke kode tanpa penyalinan-tempel manual.
Pemberian Versi Token
Beri versi pada paket token di npm. Pengguna paket mengunci pada suatu versi dan melakukan peningkatan secara sengaja. Catatan perubahan mendokumentasikan token yang ditambahkan, tidak digunakan lagi, dan dihapus. Pemberian versi semantik mengomunikasikan perubahan yang merusak versus pembaruan yang aman.
Pemeriksaan Pengetahuan
Apa peran sebuah "transformasi" dalam Style Dictionary?
Ringkasan
Style Dictionary mengubah satu sumber JSON token menjadi keluaran khusus platform melalui transformasi dan format yang dapat dikonfigurasi. Alat ini memungkinkan sinkronisasi token dari Figma ke kode, konsistensi lintas platform, serta paket token berversi yang dapat digunakan dan ditingkatkan oleh tim secara sengaja.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peralatan Token: Style Dictionary” gratis?
Ya — teks lengkap “Peralatan Token: Style Dictionary” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Peralatan Token: Style Dictionary”?
Transformasikan dan distribusikan token desain ke berbagai platform menggunakan alat Style Dictionary. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Peralatan Token: Style Dictionary” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Apa Itu Token Desain
- Konvensi Penamaan Token
- Menerapkan Tema Multi-Merek dengan Variabel CSS
- Peralatan Token: Style Dictionary