في كل مشروع رقمي يتكرر المشهد نفسه: المصمم يختار درجة لون في أداة التصميم، والمطور يكتب قيمة قريبة منها في الكود، وبعد ستة أشهر يصبح في المنتج أحد عشر «أزرق» مختلفًا ولا أحد يعرف أيها الصحيح. رموز التصميم (Design Tokens) هي الحل الجذري لهذه الفوضى — وهي أرخص وسيلة نعرفها للبقاء متّسقًا مع نمو المنتج والفريق. في هذا المقال نشرح كيف نتعامل معها في «الشبكة» بوصفها عقدًا ملزمًا بين التصميم والتطوير، لا مجرد ملف ألوان.
ما هي رموز التصميم؟
الرمز هو قيمة تصميمية مسماة: بدل أن تكتب #237F8C في عشرين مكانًا، تعرّف color-brand-primary مرة واحدة وتشير إليه في كل مكان. ينطبق الأمر نفسه على المسافات، وأحجام الخطوط، وأنصاف الأقطار، والظلال، ومدد الحركة. القيمة تسكن في مكان واحد، والاسم يحمل المعنى.
القوة الحقيقية ليست في التسمية بل في النتيجة: حين يتغير اللون الأساسي للعلامة، يتغير في مصدر واحد وينعكس تلقائيًا على الويب والتطبيق والبريد التسويقي — بدل أسابيع من المطاردة اليدوية.
الرمز عقد، والعقد له طرفان
الخطأ الشائع هو معاملة الرموز كملف إعدادات يخص المطورين. الرموز الناجحة عقد بين التصميم والهندسة: المصمم يلتزم بأن كل قرار بصري يمر عبر رمز مسمى، والمطور يلتزم بألا تدخل قيمة خام واحدة إلى الكود.
أي قيمة بصرية لا تملك اسمًا متفقًا عليه هي دين تقني بصري — ستدفع ثمنه عند أول إعادة تصميم.
بهذا العقد يصبح نقاش «هل هذا هو الرمادي الصحيح؟» نقاشًا في مكان واحد، ويتحول مراجع الكود من مقارنة أرقام سداسية إلى قراءة نوايا واضحة.
ثلاث طبقات تمنع الفوضى
الرموز المسطحة تنهار مع أول وضع ليلي أو علامة فرعية. البنية التي نعتمدها ثلاث طبقات:
- رموز أساسية — لوحة القيم الخام:
teal-600،space-4،font-size-16. لا تُستخدم في الواجهات مباشرة. - رموز دلالية — المعنى الوظيفي:
color-text-primary،surface-raised،border-focus. تشير إلى الطبقة الأساسية. - رموز المكوّنات — عند الحاجة فقط:
button-bgيشير إلى رمز دلالي.
الوضع الليلي بهذه البنية ليس ملف CSS جديدًا، بل إعادة ربط الطبقة الدلالية بقيم أساسية أخرى. والعلامة الفرعية الجديدة لوحة أساسية جديدة تحت الأسماء الدلالية نفسها.
مصدر واحد للحقيقة — والباقي توليد
العقد ينهار إذا كان له نسختان. نخزن الرموز في مصدر واحد (ملفات JSON في المستودع عادة، أو أداة مثل Tokens Studio متصلة به)، ونولّد منه كل الصيغ آليًا: متغيرات CSS للويب، وقيم أدوات التصميم، وثوابت المنصات الأصلية. أدوات مثل Style Dictionary تجعل هذا التوليد خطوة بناء عادية.
القاعدة الذهبية: التعديل يحدث في المصدر فقط. تعديل يدوي في أي صيغة مولّدة هو كسر للعقد وسيُمحى مع أول توليد قادم.
حوكمة التغيير: الرموز لها إصدارات
تغيير قيمة رمز يلمس كل شاشة في المنتج، لذا يستحق انضباط الإصدارات: تغيير قيمة فقط هو تحديث بسيط؛ إعادة تسمية أو حذف رمز تغيير كاسر يحتاج فترة انتقال ومسارًا واضحًا للترحيل. مراجعة تغييرات الرموز تكون مشتركة — مصمم ومطور معًا — لأن العقد لا يعدّله طرف واحد.
قائمة تحقق لبدء العمل بالرموز
- هل لديك جرد للقيم البصرية المكررة في منتجك الحالي (الألوان أولًا)؟
- هل الرموز مقسمة إلى طبقات أساسية ودلالية — والواجهات تستهلك الدلالية فقط؟
- هل يوجد مصدر واحد تُولَّد منه كل الصيغ آليًا في خطوة البناء؟
- هل يمنع فحص آلي في CI دخول قيم خام جديدة إلى الكود؟
- هل تغييرات الرموز تمر بمراجعة مشتركة بين التصميم والهندسة؟
الخلاصة
رموز التصميم ليست ترفًا لفرق التصميم الكبيرة؛ إنها أرخص تأمين ضد تآكل الاتساق الذي يصيب كل منتج ينمو. عقد واضح، وثلاث طبقات، ومصدر واحد للحقيقة، وحوكمة بسيطة — هذا كل ما تحتاجه لتظل هوية منتجك متماسكة عبر كل منصة وكل فريق وكل إعادة تصميم قادمة.
في «الشبكة» نبني أنظمة التصميم ونؤسس بنية الرموز للمنتجات العربية والإنجليزية على حد سواء — بما فيها تحديات الاتجاهين RTL وLTR. إذا كان منتجك يعاني من فوضى بصرية متراكمة، تواصل معنا ونساعدك تبني نظامًا يوقفها من الجذر.