من فوضى المكونات إلى نظام التصميم المتكامل: قصتنا لإنقاذ واجهات المستخدم من جحيم التضارب

فنجان قهوة وكبسة زر.. وبحر من الأزرق!

بتذكر منيح هداك اليوم، كان يوم خميس والكل مستعجل يسلم الشغل قبل نهاية الأسبوع. دخل عليّ واحد من المطورين الشباب، خلينا نسميه “سامر”، وجهه أصفر وشايل الهم فوق راسه. قلي: “يا أبو عمر، المدير طلب مني أضيف زر ‘تصدير كـ PDF’ في صفحة التقارير، الموضوع المفروض بسيط، بس فتت بالحيط!”.

سألته وأنا بحرك فنجان القهوة: “خير يا سامر، شو اللي معقدك؟ كبسة زر يعني!”.

رد عليّ وهو فاتح اللابتوب ومورجيني الشاشة: “أي كبسة زر يا أبو عمر؟ شوف! عنا 5 درجات مختلفة من اللون الأزرق للأزرار الرئيسية في التطبيق، و3 أنواع لحواف الزر (border-radius)، و4 أحجام خطوط مختلفة! أي واحد أستخدم؟ ولو عملت واحد جديد، بكرة بيجي مطور غيري وبعمل شكل سادس. الوضع فلتان!”.

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

ما هو نظام التصميم؟ ليس مجرد “مكتبة مكونات”

الكثير يخلط بين نظام التصميم ومكتبة المكونات (UI Kit)، لكن الفرق شاسع. تخيل أنك تبني بيتاً من قطع الليغو (LEGO).

• مكتبة المكونات (UI Kit): هي علبة الليغو التي تحتوي على كل القطع: مكعبات حمراء، نوافذ، أبواب، عجلات… إلخ. هي مجموعة من العناصر الجاهزة.
• نظام التصميم (Design System): هو أكثر من ذلك بكثير. إنه الكتيب الإرشادي الذي يأتي مع علبة الليغو، والذي يخبرك بفلسفة البناء، وكيفية تركيب القطع معاً، وما هي القواعد التي يجب اتباعها (مثلاً: لا تضع عجلات على السقف!).

إذن، نظام التصميم هو المصدر الوحيد للحقيقة (Single Source of Truth) الذي يجمع كل ما يحتاجه الفريق لبناء منتج رقمي متناسق. ويشمل:

• المبادئ والقيم: ما الذي نحاول تحقيقه؟ (مثال: البساطة، السرعة، إمكانية الوصول).
• الإرشادات البصرية واللغوية: كيف يجب أن تبدو منتجاتنا وتتحدث؟ (أسلوب الكتابة، نبرة الصوت، الألوان، الخطوط).
• مكتبة المكونات (UI Components): الأزرار، حقول الإدخال، القوائم، إلخ، مع حالاتها المختلفة (default, hover, disabled).
• أنماط التصميم (Design Patterns): حلول متكررة لمشاكل شائعة (مثل تدفق تسجيل الدخول، أو عرض البيانات في جدول).
• الكود المباشر: المكونات ليست مجرد تصميم، بل هي كود حيّ يمكن للمطورين استخدامه مباشرةً.

لماذا كانت هذه “وجعة الراس” ضرورية؟ فوائد تستحق العناء

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

1. الاتساق البصري وتوحيد تجربة المستخدم

وداعاً لدرجات اللون الأزرق الخمسة! أصبح لدينا لون أزرق أساسي واحد (primary-blue)، ولون ثانوي (secondary-blue)، وهكذا. هذا الاتساق جعل التطبيق يبدو احترافياً وموثوقاً، والأهم من ذلك، سهل الاستخدام، لأن المستخدم لم يعد بحاجة لتعلم سلوك جديد لكل شاشة.

2. الكفاءة وسرعة التطوير

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

3. تحسين التعاون بين المصممين والمطورين

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

4. سهولة الصيانة والتوسع

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

رحلتنا في بناء النظام: منهجية التصميم الذري (Atomic Design)

عندما قررنا البدء، اعتمدنا منهجية “التصميم الذري” التي ابتكرها براد فروست. الفكرة بسيطة وعبقرية: بناء الواجهات كما نبني المادة في الكيمياء، من الأصغر إلى الأكبر.

المرحلة الأولى: الذرّات (Atoms) ⚛️

هي اللبنات الأساسية التي لا يمكن تقسيمها أكثر. مثل الألوان، الخطوط، الأيقونات، والمسافات. قمنا بتعريفها كمتغيرات (variables) في الكود، لتكون مرجعنا الأساسي.

نصيحة أبو عمر: ابدأ بتوحيد الألوان والخطوط. هذه هي أسهل وأسرع خطوة تعطي أكبر تأثير فوري.

مثال بسيط لتعريف الألوان كمتغيرات CSS:

:root {
  /* الألوان الأساسية */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;

  /* ألوان النصوص */
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;

  /* الخطوط */
  --font-family-base: 'Tajawal', sans-serif;
  --font-size-base: 16px;
  --font-weight-bold: 700;

  /* المسافات */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}

المرحلة الثانية: الجزيئات (Molecules) 🧬

هي تجميعة بسيطة من الذرّات لتكوين عنصر وظيفي. مثلاً، “حقل البحث” هو جزيء يتكون من:

• ذرّة “حقل إدخال” (input)
• ذرّة “أيقونة بحث” (icon)
• ذرّة “زر” (button)

هنا بدأنا نرى قيمة التجميع. أصبح لدينا مكون “بحث” قابل لإعادة الاستخدام.

المرحلة الثالثة: الكائنات الحية (Organisms) 🐙

هي تجميعة من الجزيئات لتكوين قسم كامل من الواجهة. مثلاً، “شريط التنقل العلوي” (Header) هو كائن حي يتكون من:

• جزيء “الشعار” (Logo)
• جزيء “قائمة الروابط” (Navigation Links)
• جزيء “حقل البحث” (Search form)

المرحلة الرابعة والخامسة: القوالب والصفحات (Templates & Pages) 📄

القوالب هي الهيكل العظمي للصفحة، حيث نضع الكائنات الحية معاً بدون محتوى حقيقي. أما الصفحات، فهي النسخة النهائية من القالب بعد ملئها بالمحتوى الفعلي (نصوص حقيقية، صور، بيانات من قاعدة البيانات).

الأدوات التي استخدمناها في رحلتنا

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

• للتصميم (Design): استخدمنا Figma. قدرته على إنشاء مكونات (Components) ومتغيرات (Variables) كانت حجر الزاوية للمصممين لتوحيد عملهم.
• للتطوير والتوثيق (Development & Documentation): استخدمنا Storybook. هذه الأداة كانت بمثابة المعجزة. سمحت لنا ببناء كل مكون بشكل معزول، وتوثيق خصائصه وحالاته المختلفة، ورؤيته مباشرة في المتصفح. أصبح هو المرجع الأول لأي مطور جديد ينضم للفريق.

خلاصة تجربة أبو عمر ونصيحة من الآخر 💡

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

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

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