Alatan Token: Style Dictionary
Transformasikan dan edarkan token reka bentuk merentas platform menggunakan alat Style Dictionary.
Alatan Token: Style Dictionary ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah Style Dictionary?
Style Dictionary ialah alat binaan sumber terbuka oleh Amazon yang mengubah sumber JSON token menjadi keluaran khusus platform: sifat tersuai CSS, pemboleh ubah SCSS, pemalar Swift untuk iOS, XML Android dan modul JavaScript/TypeScript — semuanya daripada satu sumber kebenaran.
Struktur Projek
Susun token dalam direktori tokens/ sebagai fail JSON atau JSON5. Style Dictionary menggabungkan semua fail secara automatik. Asingkan fail mengikut kategori: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Format JSON Token
Setiap token ialah objek bersarang dengan kunci value serta medan pilihan type, description dan comment. Style Dictionary meratakan sarang menjadi nama bernotasi titik untuk keluaran.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Fail Konfigurasi
config.json menentukan sumber (fail token), platform (web, ios, android) serta transformasi dan format bagi setiap platform. Setiap platform boleh menggunakan transformasi yang berbeza dan menghasilkan format fail yang berbeza.
<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 semasa binaan: color/css memformatkan warna sebagai heks, size/rem menukar px kepada rem, dan name/cti/kebab menjana nama berformat tanda sempang daripada struktur kategori-jenis-item yang bersarang.
Format
Format menentukan kandungan fail keluaran. Terbina dalam: css/variables menghasilkan blok CSS :root, scss/variables menghasilkan pemboleh ubah SASS, dan javascript/module mengeksport objek JS. Format tersuai membolehkan sebarang bentuk keluaran yang diperlukan.
Rujukan antara Token
Rujuk token lain menggunakan sintaks pendakap kerinting: {"value": "{color.brand.primary}"}. Style Dictionary menyelesaikan rujukan pada masa binaan dan menghasilkan nilai konkrit. Rujukan ini mewujudkan pemetaan alias kepada global.
Transformasi Tersuai
Daftarkan transformasi tersuai untuk mengendalikan keperluan khusus projek: buang alfa daripada warna, tukar nilai kelegapan alat reka bentuk dan tambah awalan vendor. Transformasi tersuai dimasukkan ke dalam saluran binaan seperti transformasi terbina dalam.
Menjalankan Binaan
Jalankan npx style-dictionary build atau tambahkannya pada skrip binaan npm anda. Fail keluaran pergi ke direktori buildPath yang dikonfigurasikan. Simpan fail terjana dalam repositori atau jana fail tersebut pada masa binaan dalam CI — kedua-dua corak ini lazim digunakan.
Penyepaduan dengan Figma
Tokens Studio untuk Figma menyegerakkan JSON token ke repositori GitHub. Style Dictionary dijalankan dalam integrasi berterusan apabila JSON berubah, lalu menjana fail CSS dan platform yang dikemas kini secara automatik. Perubahan reka bentuk disebarkan kepada kod tanpa salin-tampal manual.
Pengversian Token
Versikan pakej token anda dalam npm. Pengguna menetapkan versi dan menaik tarafnya dengan sengaja. Log perubahan mendokumentasikan token yang ditambah, tidak digunakan lagi dan dibuang. Pengversian semantik membezakan perubahan yang memecahkan keserasian daripada kemas kini yang selamat.
Semakan Pengetahuan
Apakah peranan "transformasi" dalam Style Dictionary?
Ringkasan
Style Dictionary mengubah satu sumber JSON token menjadi keluaran khusus platform melalui transformasi dan format yang boleh dikonfigurasikan. Ia membolehkan penyegerakan token daripada Figma kepada kod, konsistensi berbilang platform serta pakej token berversi yang boleh digunakan dan dinaik taraf oleh pasukan dengan sengaja.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Alatan Token: Style Dictionary” percuma?
Ya — teks penuh “Alatan Token: Style Dictionary” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Alatan Token: Style Dictionary”?
Transformasikan dan edarkan token reka bentuk merentas platform menggunakan alat Style Dictionary. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Alatan Token: Style Dictionary” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Apakah Token Reka Bentuk
- Konvensyen Penamaan Token
- Melaksanakan Pemetaan Tema Berbilang Jenama dengan Pemboleh Ubah CSS
- Alatan Token: Style Dictionary