نظام التصميم ليس دليل أسلوب، وليس مكتبة مكونات — بل هيكل حوكمة لكيفية مظهر المنتج وسلوكه. يفشل حين يتحول إلى متحف مجمد من المكونات لا يستطيع أحد تغييرها، ويزدهر حين يكون اتفاقاً حياً بين التصميم والهندسة. الأنظمة التي تنجو من ملامسة منتج ينمو تتشارك مجموعة صغيرة من القرارات الهيكلية.

رموز التصميم: مصدر الحقيقة الوحيد

الرموز هي الذرات — اللون والتباعد والطباعة والأنصاف الأقطار والحركة — معبَّر عنها كمتغيرات مسماة في كل طبقة. الزر يستخدم الرمز، والمكوّن يستخدم الرمز، والسمة تتفاعل فوق الرمز. عندما تحل إعادة تسمية تجارية، تغير الرموز لا المكونات. سمِّ الرموز حسب الدور (color-surface, spacing-md) لا حسب القيمة، حتى لا يتطلب تبديل السمة إعادة تسمية أي شيء أبداً.

هندسة المكونات: أساسي ومركب وصفحة

قسّم المكونات إلى ثلاث طبقات. الأساسيات هي لبنات صغيرة عديمة الحالة — Button وInput وIcon. المركبات تجمّع الأساسيات في وحدات ذات معنى — DataTable وDateRangePicker. الصفحات تجمّع المركبات. القاعدة التي تُبقي هذا صحياً: الأساسي لا يملك معرفة أعمال، والصفحة لا تتخذ قرارات تنسيق. الحدود تجعل إعادة الهيكلة قابلة للتنبؤ.

دعم السمات والعلامات البيضاء

إذا كنت تخدم علامات أو مستأجرين أو منتجات علامة بيضاء متعددة، فالتسمية ليست فكرة لاحقة — بل هي المعمارية. التسمية عبر الرموز تعني أن كل قرار بصري قابل للتجاوز في طبقة السمة، وأن المكونات لا ترمّز لوناً أو نصف قطر بصورة صارمة. تنسيق RTL أيضاً شأن تسمية: منتجات المنطقة يجب أن تقلب التخطيط لا أن تترجم النصوص فقط، ويجب أن يدعم النظام التباعد المعكوس من البداية.

انضباط الإصدار والترحيل

النظام الذي يتغير بشكل كاسر دون تحذير هو نظام ستتوقف الفرق عن استخدامه بصمت. اصدر نسخاً للمكونات، وانشر سجلات التغييرات، وقدّم أدوات تحويل كود للتحويلات الكاسرة. اعتمد المستهلكين بموجات لا دفعة واحدة. لحظة بدء الفرق في نسخ المكونات بمحضها هي لحظة موت النظام — فاجعل الاستهلاك أسهل من الانحراف.

توثيق يستخدمه الفرق فعلاً

التوثيق بأسلوب Storybook مع أمثلة تفاعلية حية يتفوق على اللقطات الثابتة، لأن المهندسين ينسخون كوداً حقيقياً والمصممين يفحصون سلوكاً حقيقياً. وثّق الخصائص والحالات وسلوك إمكانية الوصول وإرشادات الاستخدام — متى تستخدم مكوناً ومتى تبني جديداً. التوثيق هو الأداة المنفذة للنظام.

اختبر النظام لا المكونات فقط

المكونات في النظام تُستخدم في مئات السياقات، لذا يتضاعف خطر الانحدار. اختبر حالات التفاعل والتنقل بلوحة المفاتيح وعقود إمكانية الوصول الحرجة — لا اللقطة البصرية فقط. شغّل تلك الاختبارات في التكامل المستمر عند كل تغيير حتى لا يكسر خطأ في رمز نموذج إتمام شراء على بعد ثلاثة منتجات بصمت.

نظام تصميم يتوسع — قائمة تحقق

  • رموز مسماة حسب الدور عبر اللون والتباعد والطباعة والحركة.
  • طبقات أساسي/مركب/صفحة بحدود نظيفة.
  • دعم سمات وRTL من أول مكوّن.
  • إصدارات بنسخ وسجلات تغييرات وأدوات تحويل للتغييرات الكاسرة.
  • توثيق حي قابل للبحث مع إرشادات استخدام.
  • عقود تفاعل وإمكانية وصول مختبرة في التكامل المستمر.

نظام التصميم استثمار يدفع أرباحه في السرعة — تتوقف الشاشات الجديدة عن كونها مفاوضات وتبدأ كونها تجميعاً. تصمم سمارت لوجيك وتبني أنظمة تصميم لمنتجات لارافيل وجافاسكربت، من الرموز ومكتبات المكونات إلى معماريات العلامات البيضاء المسماة. إذا كان منتجك ينمو أسرع مما تستطيع مكوناتك مواكبته، فدعنا نبني النظام الذي يتوسع معه.