أدوات الرموز: Style Dictionary
حوّل رموز التصميم ووزّعها عبر المنصات باستخدام أداة Style Dictionary.
أدوات الرموز: Style Dictionary درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو Style Dictionary؟
Style Dictionary هي أداة بناء مفتوحة المصدر من Amazon تحوّل مصدرًا واحدًا من رموز JSON إلى مخرجات للمنصات: خصائص مخصصة في CSS، ومتغيرات SCSS، وثوابت Swift لنظام iOS، وXML لنظام Android، ووحدات JavaScript/TypeScript، وكلها انطلاقًا من مصدر موحّد للحقيقة.
بنية المشروع
نظّم الرموز في المجلد tokens/ على هيئة ملفات JSON أو JSON5. تدمج Style Dictionary جميع الملفات تلقائيًا. افصل الملفات حسب الفئة: tokens/color.json وtokens/spacing.json وtokens/typography.json.
تنسيق JSON للرموز
كل رمز هو كائن متداخل يحتوي على المفتاح value، وحقول اختيارية هي type وdescription وcomment. وتحوّل Style Dictionary البنية المتداخلة إلى أسماء بصيغة النقاط عند الإخراج.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>ملف الإعدادات
يحدد config.json المصادر، وهي ملفات الرموز، والمنصات، مثل web وios وandroid، والتحويلات والتنسيقات لكل منصة. ويمكن لكل منصة تطبيق تحويلات مختلفة وإخراج تنسيقات ملفات مختلفة.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>التحويلات
تعدّل التحويلات قيم الرموز أثناء البناء: تنسّق color/css الألوان بصيغة hex، وتحول size/rem القيم من px إلى rem، وتنشئ name/cti/kebab أسماء بصيغة kebab-case من بنية الفئة-النوع-العنصر المتداخلة.
التنسيقات
تحدد التنسيقات محتوى ملف الإخراج. ومن التنسيقات المضمّنة: يُخرج css/variables كتلة CSS من نوع :root، ويُخرج scss/variables متغيرات SASS، ويصدّر javascript/module كائن JavaScript. وتتيح التنسيقات المخصصة أي شكل للإخراج تحتاج إليه.
المراجع بين الرموز
أشِر إلى الرموز الأخرى باستخدام صيغة الأقواس المعقوفة: {"value": "{color.brand.primary}"}. تحل Style Dictionary المراجع أثناء البناء، وتُخرج قيمًا فعلية. وتنشئ المراجع عملية الربط بين الرموز المستعارة والرموز العامة.
التحويلات المخصصة
سجّل تحويلات مخصصة لمعالجة احتياجات المشروع الخاصة، مثل إزالة ألفا من الألوان، وتحويل قيم الشفافية من أدوات التصميم، وإضافة بادئات المورّدين. وتندمج التحويلات المخصصة في مسار البناء مثل التحويلات المضمّنة.
تشغيل عملية البناء
شغّل npx style-dictionary build أو أضِفه إلى نص البناء في npm. تذهب ملفات الإخراج إلى أدلة buildPath المُعدّة. ويُعد إيداع الملفات المُولّدة أو إنشاؤها وقت البناء في CI نمطين شائعين.
التكامل مع Figma
تزامن Tokens Studio for Figma ملف JSON للرموز مع مستودع GitHub. وتشغّل Style Dictionary في CI عند تغيّر ملف JSON، فتُنشئ ملفات CSS وملفات المنصات المحدّثة تلقائيًا. وتنتقل تغييرات التصميم إلى الشفرة من دون النسخ واللصق اليدوي.
إصدار الرموز
أصدِر حزمة الرموز الخاصة بك على npm. ويثبّت المستهلكون إصدارًا محددًا ثم يرقّونه عن قصد. توثّق سجلات التغييرات الرموز المضافة والمتوقفة والمحذوفة. ويوضح الإصدار الدلالي التغييرات التي تكسر التوافق مقابل التحديثات الآمنة.
اختبار المعرفة
ما دور "التحويل" في Style Dictionary؟
الملخص
تحوّل Style Dictionary مصدرًا واحدًا من رموز JSON إلى مخرجات خاصة بالمنصات، وذلك من خلال تحويلات وتنسيقات قابلة للإعداد. وتتيح مزامنة الرموز من Figma إلى الشفرة، والاتساق بين المنصات، وحزم رموز ذات إصدارات يمكن للفرق استهلاكها وترقيتها عن قصد.
الأسئلة الشائعة
هل درس «أدوات الرموز: Style Dictionary» مجاني؟
نعم — نص درس «أدوات الرموز: Style Dictionary» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «أدوات الرموز: Style Dictionary»؟
حوّل رموز التصميم ووزّعها عبر المنصات باستخدام أداة Style Dictionary. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أدوات الرموز: Style Dictionary»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي رموز التصميم
- اصطلاحات تسمية الرموز
- تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS
- أدوات الرموز: Style Dictionary