كانت واجهاتنا متحفاً للفوضى: كيف أنقذنا ‘نظام التصميم’ (Design System) من جحيم التناقض البصري؟

السلام عليكم يا جماعة الخير، معكم أخوكم أبو عمر.

بتذكر قبل كم سنة، كنا شغالين على مشروع كبير ومتحمسين إله كتير. فريق صغير، طموح كبير، وساعات طويلة من الكود والقهوة. كان معنا مصمم شاطر، ومطورين “وحوش” زي ما بنحكي. لكن مع الوقت، بلشت تظهر مشكلة غريبة… كل شاشة في التطبيق بتحكي لغة شكل!.

بتذكر مرة المدير دخل علينا المكتب، فتح التطبيق على شاشة كبيرة قدام الكل، وسأل سؤال بسيط قتلنا كلنا: “يا شباب، ليش هاد الزر أزرق فاقع، والزر اللي جنبه أزرق بحري، والزر اللي بصفحة البروفايل أزرق سماوي؟ إحنا بنبيع منتج واحد ولا ثلاث منتجات؟”.

وقتها حسينا الأرض بتبلعنا. طلعنا على شغلنا، وإذا هو “متحف للفوضى”. كل مطور إله لمسته الخاصة، وكل مصمم كان يجتهد ويبدع من عنده. النتيجة كانت واجهة “كوكتيل” مش متناسقة، أو زي ما بنحكيها بلهجتنا “شغل مشربك”. بناء أي ميزة جديدة كان يعني إعادة اختراع العجلة من الصفر، والوقت والجهد اللي بنضيعه على تعديلات بصرية بسيطة كان ممكن نبني فيه ميزات كاملة. كانت واجهاتنا في جحيم حقيقي من التناقض البصري. ومن قلب هذا الجحيم، وُلد القرار: لازم نلاقي حل جذري. والحل كان اسمه: نظام التصميم (Design System).

ما هو ‘نظام التصميم’ (Design System)؟ مش مجرد واجهة حلوة!

لما نحكي “نظام تصميم”، كثير ناس بتفكر إنه مجرد ملف فيه الألوان والخطوط، أو ما يسمى بـ “Style Guide”. لكن الحقيقة أعمق من هيك بكثير. نظام التصميم هو “المصدر الوحيد للحقيقة” (Single Source of Truth) لكل ما يتعلق بتصميم وتطوير واجهات المستخدم في شركتك أو مشروعك.

تخيله كصندوق ليغو (LEGO) ضخم ومُنظم. بدل ما تبني كل مرة سيارة من طين وحجار ورمل، عندك قطع جاهزة (مكعبات، عجلات، نوافذ) بقواعد واضحة لتركيبها مع بعضها. بتقدر تبني فيها سيارة، طيارة، أو حتى بيت، وكلها رح تكون بنفس الروح والشكل المتناسق.

أكثر من مجرد Style Guide

الـ Style Guide هو جزء من نظام التصميم، لكنه ليس النظام كله. الفرق بينهم زي الفرق بين قائمة المكونات ووصفة الطبخ الكاملة:

• دليل الأنماط (Style Guide): يركز على المظهر البصري. الألوان، الخطوط، الأيقونات، الشعار. هو بمثابة “ماذا نستخدم”.
• نظام التصميم (Design System): يشمل كل ما سبق، بالإضافة إلى مكونات قابلة لإعادة الاستخدام (Code Components)، إرشادات تفصيلية، مبادئ تصميمية، وحتى نبرة الصوت في الكتابة. هو بمثابة “ماذا نستخدم، وكيف نستخدمه، ولماذا نستخدمه بهذه الطريقة”.

مكوناته الأساسية (الذرة والجزيئات)

لفهم نظام التصميم، خلينا نفككه لأجزائه الأساسية باستخدام منهجية اسمها “التصميم الذري” (Atomic Design):

1. الرموز التصميمية (Design Tokens): هذه هي “الذرات” في نظامنا. متغيرات صغيرة تحمل قيمًا أساسية مثل لون معين، حجم خط، أو مقدار مسافة. هي قيم مجردة، لا ترتبط بأي عنصر محدد.

   /* مثال على Tokens في CSS */
   :root {
     /* Colors */
     --color-brand-primary: #006CFF;
     --color-brand-secondary: #FF9F00;
     --color-text-default: #1A1A1A;
     
     /* Fonts */
     --font-family-base: 'Tajawal', sans-serif;
     --font-size-md: 16px;
     --font-weight-bold: 700;
     
     /* Spacing */
     --space-sm: 4px;
     --space-md: 8px;
     --space-lg: 16px;
   
     /* Borders */
     --border-radius-sm: 4px;
   }

2. المكونات (Components): هي “الجزيئات” التي نبنيها من ذراتنا. زر، حقل إدخال، أيقونة. هذه المكونات تستخدم الـ Tokens بشكل مباشر.

   /* مثال على استخدام الـ Tokens في مكون زر */
   .button {
     font-family: var(--font-family-base);
     font-size: var(--font-size-md);
     padding: var(--space-md) var(--space-lg);
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     border: none;
   }
   
   .button-primary {
     background-color: var(--color-brand-primary);
     color: white;
   }

3. الأنماط (Patterns): هي مجموعة من المكونات تعمل معًا لتشكيل جزء أكبر من الواجهة، مثل نموذج تسجيل الدخول (حقول إدخال + زر)، أو بطاقة منتج (صورة + عنوان + سعر + زر).
4. الإرشادات والمبادئ (Guidelines & Principles): هذا هو “الروح” أو “الدستور”. يوضح كيفية استخدام المكونات، متى نستخدم هذا النمط بدلًا من ذاك، مبادئ الوصولية (Accessibility)، ونبرة الصوت المستخدمة في النصوص.

ليش وجع الراس هاد كله؟ فوائد تستحق العناء

بناء نظام تصميم استثمار كبير في الوقت والجهد، لكن العائد منه يغير طريقة عمل الفريق بالكامل. من تجربتي، هذه أهم الفوائد:

السرعة والكفاءة (وداعاً لـ “شغل الكوبي بيست”)

بدلًا من أن يقوم كل مطور ببناء زر من الصفر في كل مرة، أصبح لدينا مكون <Button /> جاهز للاستخدام. هذا يعني أن بناء صفحات جديدة أصبح أسرع بكثير. التركيز تحول من “كيف سأبني هذا الزر؟” إلى “ما هي أفضل طريقة لحل مشكلة المستخدم؟”.

الاتساق البصري (وداعاً للأزرار الخمسين زرقاء)

بما أن الجميع يستخدم نفس صندوق الليغو، أصبحت كل أجزاء التطبيق تبدو متناغمة. هذا الاتساق لا يريح العين فقط، بل يبني ثقة المستخدم في المنتج. الواجهة المتسقة تبدو أكثر احترافية وموثوقية.

لغة مشتركة بين المصممين والمطورين

أكبر مشكلة كانت بين فريق التصميم والتطوير هي فجوة التواصل. المصمم يصمم شيئًا جميلًا في Figma، والمطور يعاني لتطبيقه بالكود. نظام التصميم أصبح هو القاموس المشترك. المصمم يستخدم مكون “البطاقة” في تصميمه، والمطور يستدعي نفس مكون “البطاقة” في الكود. لا مجال للتأويلات الخاطئة.

سهولة الصيانة والتطوير (لمسة سحرية)

تخيل أن الشركة قررت تغيير لونها الأساسي. في الماضي، كان هذا كابوسًا. يعني البحث في مئات الملفات عن كود اللون القديم واستبداله. مع نظام التصميم، كل ما عليك فعله هو تغيير قيمة `token` واحدة:

--color-brand-primary: #FF5733; /* تم تغيير اللون من أزرق إلى برتقالي */

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

كيف نبني نظام تصميم على أصوله؟ (من خبرتي المتواضعة)

بناء نظام تصميم ليس مشروعًا له بداية ونهاية، بل هو منتج حي يتطور مع الوقت. إليكم الخطوات التي اتبعناها:

الخطوة صفر: جمع الشمل والحصول على الدعم

هذا ليس مشروعًا للمطورين فقط أو للمصممين فقط. يجب أن يكون هناك دعم من الإدارة العليا، ومشاركة من كل الأطراف المعنية. اشرح لهم الفوائد طويلة الأمد: توفير الوقت، تقليل التكاليف، وتحسين جودة المنتج.

الخطوة الأولى: الجرد البصري (مرحلة الصدمة)

قمنا بأخذ لقطات شاشة لكل الأزرار، النماذج، البطاقات، والقوائم في تطبيقنا. جمعناها كلها في لوحة واحدة (استخدمنا أداة مثل Figma). كانت هذه لحظة “الصدمة” التي فتحت أعين الجميع على حجم الفوضى. رؤية 15 شكلًا مختلفًا للزر الواحد كان دافعًا قويًا للتغيير.

الخطوة الثانية: وضع الأساس (Tokens & Principles)

اجتمعنا (مصممون ومطورون) وقررنا الأساسيات: لوحة الألوان النهائية، مقاييس الخطوط، نظام المسافات (Spacing System). هذه كانت أهم مرحلة، لأن كل شيء سيبنى فوق هذا الأساس.

الخطوة الثالثة: بناء المكونات (ابدأ بالأساسيات)

لا تحاول بناء كل شيء دفعة واحدة. ابدأ بأكثر المكونات استخدامًا وتكرارًا: الزر (Button)، حقل الإدخال (Input)، القائمة المنسدلة (Dropdown). قم ببنائها وتوثيقها واختبارها جيدًا.

الخطوة الرابعة: التوثيق ثم التوثيق!

“إذا لم يكن موثقًا، فهو غير موجود”.

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

الخلاصة: استثمار لا بد منه 💡

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

نصيحتي الأخيرة لك: بناء نظام التصميم يشبه بناء أساس متين لمنزل. قد لا يراه الناس، لكنه ما يمنع البيت كله من الانهيار عند أول عاصفة. ابدأ صغيرًا، كن صبورًا، واجعل التعاون هو شعارك. والنتيجة ستكون شغل مرتب يرفع الراس. بالتوفيق يا جماعة! 👍