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

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

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

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

ما هو “نظام التصميم”؟ وليش هو مش مجرد مكتبة واجهات (UI Kit)؟

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

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

الفرق الجوهري: المكونات مقابل المبادئ

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

• المبادئ التوجيهية (Principles): الفلسفة الأساسية لتصميمك. هل منتجك “بسيط ومباشر” أم “جريء ومعبّر”؟ هذه المبادئ هي البوصلة التي توجه كل قرار تصميم.
• الهوية البصرية (Visual Identity):
  • الألوان (Colors): لوحة ألوان محددة بدقة (أساسي، ثانوي، لون الخطأ، لون النجاح) مع أسماء واضحة.
  • الخطوط (Typography): مجموعة من أحجام الخطوط وأوزانها لكل شيء، من العناوين الرئيسية إلى النصوص الصغيرة.
  • المسافات والأبعاد (Spacing): نظام واضح للمسافات والهوامش (مثل نظام 8-point grid) لضمان إيقاع بصري متسق.
  • الأيقونات (Iconography): مكتبة أيقونات موحدة بأسلوب واحد.
• المكونات (Components): هي اللبنات الأساسية لواجهتك (أزرار، حقول إدخال، بطاقات، قوائم منسدلة). كل مكون يتم تصميمه وتكويده ليكون قابلاً لإعادة الاستخدام، مع تحديد كل حالاته (default, hover, focused, disabled).
• الأنماط (Patterns): هي حلول تصميمية لمشاكل متكررة، تتكون من مجموعة من المكونات. على سبيل المثال، “نمط تسجيل الدخول” قد يتكون من حقول إدخال، زر، وروابط “نسيت كلمة المرور”.
• الإرشادات والتوثيق (Guidelines & Documentation): أهم جزء! شرح مفصل لكيفية ومتى ولماذا نستخدم كل عنصر. يتضمن أمثلة “افعل ولا تفعل” (Do’s and Don’ts) وقواعد الوصولية (Accessibility).

رحلتنا في بناء النظام: من الفكرة إلى الواقع

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

المرحلة الأولى: جرد الفوضى (The UI Audit)

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

• 17 نمطاً مختلفاً من الأزرار. نعم، سبعة عشر! زر أزرق فاتح، أزرق غامق، أزرق بحواف دائرية، أزرق بحواف حادة، زر بظل، وزر بدون… والقائمة تطول.
• 8 أحجام خطوط مختلفة مستخدمة كنص أساسي (Body text).
• 5 ألوان مختلفة للون الأحمر المستخدم في رسائل الخطأ.
• تناقضات لا حصر لها في المسافات والهوامش.

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

المرحلة الثانية: وضع الأساس – المبادئ والألوان والخطوط

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

بعدها، انتقلنا إلى الهوية البصرية. قمنا بتوحيد لوحة الألوان الأساسية، واخترنا عائلة خطوط واحدة (استخدمنا خط “تجاول” لجماله ووضوحه في العربية)، وحددنا مقياساً متناغماً للخطوط والمسافات.

نصيحة من أبو عمر: استخدم متغيرات CSS (CSS Custom Properties) من اليوم الأول. هذا سيجعل حياتك أسهل بألف مرة. بدلاً من تكرار الألوان والخطوط في كل مكان، يمكنك تعريفها مرة واحدة وتحديثها من مكان واحد.

:root {
  /* ============================
     Colors Palette 
     ============================ */
  --color-primary-500: #007bff; /* اللون الأساسي */
  --color-primary-600: #0069d9; /* للـ Hover */
  --color-secondary-500: #6c757d;
  --color-danger-500: #dc3545;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;

  /* ============================
     Typography
     ============================ */
  --font-family-base: 'Tajawal', sans-serif;
  --font-size-base: 1rem; /* يعادل 16px عادةً */
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;
  --h1-font-size: calc(var(--font-size-base) * 2.5);

  /* ============================
     Spacing (8-Point Grid System)
     ============================ */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5); /* 4px */
  --spacing-sm: var(--spacing-unit);           /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);  /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 4);  /* 32px */
}

المرحلة الثالثة: بناء المكونات – من الذرّات إلى الكائنات

استخدمنا منهجية “التصميم الذري” (Atomic Design) لتنظيم عملنا، وهي طريقة رائعة للتفكير في الواجهات:

• الذرّات (Atoms): أصغر الوحدات البنائية التي لا يمكن تقسيمها، مثل الألوان، الخطوط، الأيقونات، حقول الإدخال، والأزرار الأساسية. بدأنا بالزر، لأنه كان مصدر الألم الأكبر.
• الجزيئات (Molecules): مجموعات من الذرّات تعمل معاً كوحدة واحدة. مثال: حقل بحث يتكون من (ذرّة حقل إدخال + ذرّة أيقونة بحث + ذرّة زر).
• الكائنات (Organisms): مكونات أكثر تعقيداً تتكون من جزيئات وذرّات. مثال: شريط التنقل العلوي (Header) الذي قد يحتوي على (شعار + قائمة روابط + جزيء البحث).

نصيحة من أبو عمر: ابدأ بالمكون الأكثر استخداماً وتكراراً في تطبيقك. في معظم الحالات، سيكون هذا هو الزر (Button). إذا نجحت في توحيد الزر، فقد فزت بنصف المعركة.

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

// مثال بسيط لمكون زر في React
// Button.jsx

// يمكن استخدامه هكذا في أي مكان:
// <Button variant="primary" size="large">اضغط هنا</Button>
// <Button variant="danger" disabled>حذف</Button>

function Button({ children, variant = 'primary', size = 'medium', disabled = false, ...props }) {
  // الكلاسات يتم بناؤها ديناميكياً بناءً على الخصائص
  const baseClass = 'btn';
  const variantClass = `btn--${variant}`; // e.g., btn--primary
  const sizeClass = `btn--${size}`;       // e.g., btn--large

  const className = [baseClass, variantClass, sizeClass].join(' ');

  return (
    <button className={className} disabled={disabled} {...props}>
      {children}
    </button>
  );
}

المرحلة الرابعة: التوثيق والنشر (أهم خطوة على الإطلاق)

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

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

1. عرض حي (Live Preview): يمكنك رؤية المكون والتفاعل معه مباشرة.
2. خيارات التحكم (Controls): أدوات لتغيير خصائص المكون (مثل `variant` أو `size`) ورؤية التغيير فوراً.
3. أكواد الاستخدام (Code Snippets): نسخ ولصق الكود مباشرة في مشروعك.
4. إرشادات الاستخدام (Guidelines): قسم “افعل ولا تفعل” الذي يشرح أفضل الممارسات. مثلاً: “افعل: استخدم الزر الأساسي (primary) للإجراء الرئيسي في الصفحة. لا تفعل: لا تضع زرين أساسيين بجانب بعضهما البعض”.

أصبح Storybook هو “المصدر الوحيد للحقيقة” لدينا. أي مصمم أو مطور جديد ينضم للفريق، أول ما نفعله هو أن نعطيه رابط نظام التصميم. في غضون ساعات، يصبح قادراً على بناء واجهات متناسقة وفعالة.

نصائح من قلب المعركة: كيف تضمن نجاح نظام التصميم؟

بناء نظام التصميم ليس مشروعاً تقنياً فقط، بل هو تغيير في ثقافة العمل. إليك بعض النصائح التي تعلمتها بالطريقة الصعبة:

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

الخلاصة: من الفوضى إلى الإبداع المنظم ✨

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

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

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