ما هي رموز التصميم
تعلّم ماهية رموز التصميم وسبب كونها أساس أنظمة التصميم القابلة للتوسع.
ما هي رموز التصميم درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
التعريف
رموز التصميم هي متغيرات مُسمّاة تخزّن قرارات التصميم، مثل الألوان والمسافات والطباعة والظلال، بتنسيق مستقل عن التقنية. وهي تصل بين أدوات التصميم والشفرة، وتضمن الاتساق عبر المنصات.
أهمية الرموز
من دون الرموز، تتكرر القيم في قواعد CSS وقواعد شفرة iOS وAndroid. ويعني وجود مصدر واحد للحقيقة للرموز أن تغيير لون العلامة التجارية يحدّث كل منصة في الوقت نفسه.
فئات الرموز
تشمل الفئات الشائعة: اللون، مثل ألوان العلامة التجارية والدلالية والمحايدة؛ والطباعة، مثل font-family والحجم والوزن وارتفاع السطر؛ والمسافات، مثل شبكة 4px؛ ونصف القطر؛ والظل؛ والرسوم المتحركة، مثل المدة والتسارع.
تنسيقات الرموز
تُخزَّن الرموز بصيغة JSON أو YAML أو بتنسيق W3C Design Token Format. ولكل رمز اسم وقيمة ونوع ووصف اختياري. وتحول عمليات التحويل هذه الرموز إلى مخرجات خاصة بكل منصة.
الرموز العامة مقابل الرموز البديلة
الرموز العامة هي قيم خام: color-blue-500: #3b82f6. أما الرموز البديلة فتشير إلى الرموز العامة بمعنى دلالي: color-action-primary: {color-blue-500}. ويجب أن تشير المكوّنات إلى الرموز البديلة، لا إلى القيم الخام.
الرموز في CSS
تُعد خصائص CSS المخصّصة المخرج الطبيعي لرموز الويب. فالرمز المسمى spacing-4 يصبح --spacing-4: 1rem، ويُستخدم في ورقة الأنماط بأكملها بصيغة margin: var(--spacing-4).
التكامل مع أدوات التصميم
تزامن إضافة Figma Tokens وTokens Studio رموز التصميم بين Figma ومستودعات الشفرة. ويستخدم المصممون والمطورون المفردات نفسها للرموز، ما يلغي أخطاء الترجمة عند تسليم التصميم.
دورة حياة الرمز
تتطور الرموز بمرور الوقت: أوقف استخدام القيم القديمة من دون كسر المستهلكين عبر توفير تعيينات للترحيل. ويشير استخدام الإصدار الدلالي لحزم الرموز إلى التغييرات غير المتوافقة مع الفرق المستهلكة.
الرموز متعددة المنصات
ينتج ملف JSON نفسه متغيرات CSS للويب، وثوابت Swift لنظام iOS، وموارد XML لنظام Android. ويؤدي وجود ملف تعريف واحد إلى منع اختلاف قرارات التصميم بين المنصات.
اعتماد الرموز تدريجيًا
ابدأ برموز الألوان والمسافات. واستبدل القيم المضمّنة مباشرةً ملفًا تلو الآخر. وأجرِ بحثًا في قاعدة الشفرة عن قيم hex الخام والقيم الحرفية بالبكسل للعثور على قرارات التصميم المضمّنة المتبقية.
الرموز والسمات
تتيح الرموز البديلة استخدام السمات: بدّل الرمز العام الذي يشير إليه الرمز البديل، فتتغير السمة بأكملها من دون تعديل شفرة المكوّنات. وتُشتق سمات الوضع الفاتح والداكن وسمات العلامة التجارية كلها من طبقة الرموز البديلة نفسها.
اختبار المعرفة
ما الفرق بين الرمز العام والرمز البديل؟
ملخص
رموز التصميم هي متغيرات مُسمّاة ترمّز قرارات التصميم بتنسيق مستقل عن المنصة. وتحتفظ الرموز العامة بالقيم الخام، بينما تضفي الرموز البديلة معنى دلاليًا عليها. وتدعم هذه الرموز معًا أنظمة تصميم متسقة وقابلة للصيانة ومتعددة المنصات.
الأسئلة الشائعة
هل درس «ما هي رموز التصميم» مجاني؟
نعم — نص درس «ما هي رموز التصميم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «ما هي رموز التصميم»؟
تعلّم ماهية رموز التصميم وسبب كونها أساس أنظمة التصميم القابلة للتوسع. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «ما هي رموز التصميم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي رموز التصميم
- اصطلاحات تسمية الرموز
- تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS
- أدوات الرموز: Style Dictionary