كل شاشة كانت قصة مختلفة: كيف أنقذني ‘نظام التصميم’ من فوضى الواجهات؟

يا أهلاً وسهلاً فيكم، معكم أخوكم أبو عمر.

قبل كم سنة، كنت شغال على مشروع كبير لشركة ناشئة طموحة. كنا فريق صغير، قلوبنا مليانة حماس وعقولنا بتفور بالأفكار. المشروع كان عبارة عن منصة معقدة فيها لوحات تحكم وتقارير وملفات مستخدمين… قصة طويلة. في البداية، كل شي كان ماشي زي الحلاوة. أنا أكتب كود الـ Backend، وزميلي “خالد” مسؤول عن الـ Frontend، ومعانا مصممة شاطرة اسمها “سارة”.

المشكلة بلشت تظهر بعد حوالي ٦ شهور. المشروع كبر، والفريق كبر. صرنا ٣ مطورين Frontend بدل واحد. وكل واحد فينا، زي ما بنحكي، “إيدو إلو”. يعني كل واحد عنده لمسته الخاصة. فجأة، صرنا نفتح التطبيق ونلاقي عجائب وغرائب. زر “الحفظ” في شاشة التقارير لونه أزرق سماوي بحواف دائرية، وفي شاشة ملف المستخدم لونه أزرق غامق بحواف حادة شوي. حجم الخط في القوائم الجانبية 16 بكسل، وفي الإعدادات 15 بكسل. المسافات بين العناصر… هاي قصة تانية خالص، كل شاشة الها قانونها الخاص.

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

ما هو “نظام التصميم” (Design System)؟ مش مجرد ألوان وأزرار!

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

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

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

1. مكتبة المكونات (Component Library)

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

2. دليل الأسلوب (Style Guide) والرموز التصميمية (Design Tokens)

هون بنحدد الهوية البصرية للمشروع. مش بس بنحكي “اللون الأساسي أزرق”، لأ. بنعرف متغير اسمه --color-primary وقيمته #007bff. هاي المتغيرات (Tokens) هي اللي بنستخدمها في كل مكان. لو قررنا نغير اللون الأساسي، بنغيره في مكان واحد فقط، والتغيير بينعكس على كل التطبيق بشكل سحري.

• الألوان: الأساسية، الثانوية، ألوان التنبيهات والنجاح والخطأ.
• الطباعة (Typography): أنواع الخطوط، أحجامها (H1, H2, Body, etc)، وزنها.
• المسافات (Spacing): نظام موحد للمسافات والهوامش (e.g., 4px, 8px, 16px, 32px).
• الأيقونات (Icons): مكتبة أيقونات موحدة.

3. التوثيق والإرشادات (Documentation & Guidelines)

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

لماذا تحتاج إلى نظام تصميم؟ الفوائد اللي غيّرت طريقة شغلي

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

الاتساق والتوحيد (Consistency)

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

الكفاءة والسرعة (Efficiency & Speed)

بدل ما كل مطور “يخترع العجلة” من جديد ويبني زر من الصفر، صار يسحب المكون الجاهز من المكتبة. بناء صفحات جديدة صار أسرع بأضعاف. صرنا نركز على حل المشاكل المنطقية المعقدة (Business Logic) بدل ما نضيع وقتنا في تنسيق الـ CSS لألف مرة.

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

هاي كانت أكبر وجعة راس عنا. تخيل لو طلب منك مديرك تغيير درجة اللون الأزرق في كل التطبيق. قبل نظام التصميم، هاي مهمة بتاخد أيام وممكن تسبب أخطاء. بعد نظام التصميم، هي تعديل لسطر واحد في ملف الـ Design Tokens. تغيير واحد، بينتشر في كل مكان. يا سلام على الراحة!

تحسين التعاون بين الفرق (Collaboration)

نظام التصميم صار هو الجسر اللي بيربط بين المصممين والمطورين. المصمم بيصمم باستخدام نفس المكونات الموجودة في مكتبة الكود. والمطور بيستخدم نفس المكونات اللي صممها المصمم. بطل فيه سوء تفاهم زي “هاي الدرجة من اللون مش هي اللي بدي ياها بالزبط”. الكل صار يشتغل من نفس “الكتالوج”.

كيف تبدأ؟ خطوات عملية من “مطبخي البرمجي”

بناء نظام تصميم ممكن يبين مهمة ضخمة، لكن بتقدر تبدأ بخطوات بسيطة وعملية. ما في داعي تبني كل شي من أول يوم.

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

هاي الخطوة ممتعة ومؤلمة بنفس الوقت. خذ لقطات شاشة (Screenshots) لكل أجزاء تطبيقك الحالية. حطهم جنب بعض. رح تنصدم من كمية الاختلافات. كم نوع زر عندك؟ كم درجة من اللون الرمادي؟ هاي العملية بتساعدك تقنع فريقك والإدارة بضرورة وجود نظام موحد.

الخطوة الثانية: تحديد الأساسيات (Design Tokens)

ابدأ بالأشياء البسيطة. اتفق مع فريق التصميم على لوحة الألوان الأساسية، مجموعة الخطوط وأحجامها، ونظام المسافات. عرف هاي القيم كـ “Tokens” في ملف CSS أو JSON مركزي.

/* مثال على ملف CSS للـ Tokens */
:root {
  /* Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-text: #212529;

  /* Typography */
  --font-family-base: 'Tajawal', sans-serif;
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
}

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

لا تحاول تبني كل شي مرة واحدة. ابدأ بأصغر وأكثر المكونات استخداماً. عادةً، هاي بتكون:

• الزر (Button)
• حقل الإدخال (Input)
• الرابط (Link)

ابنِ مكون واحد بشكل ممتاز، خليه مرن بيقبل خصائص (props) عشان يتحكم بشكله وحجمه (مثلاً: primary, secondary, large, small). بعدين انتقل للمكون اللي بعده.

نصيحة أبو عمر: استخدم أدوات مثل Storybook. هاي الأداة بتسمحلك تبني وتوثق مكوناتك في بيئة معزولة. بتقدر تشوف كل حالات المكون (مثلاً، كيف شكل الزر لما يكون معطل disabled أو في حالة تحميل loading) وتختبره بسهولة. كنز حقيقي!

هذا مثال بسيط لمكون “زر” باستخدام React و CSS Modules لتوضيح الفكرة:

// Button.jsx
import React from 'react';
import styles from './Button.module.css';

// component بسيط يقبل عدة خصائص لتغيير شكله
const Button = ({ children, variant = 'primary', size = 'medium', ...props }) => {
  
  // نحدد الكلاسات بناءً على الخصائص
  const buttonClasses = `
    ${styles.btn}
    ${styles[`btn-${variant}`]}
    ${styles[`btn-${size}`]}
  `;

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

export default Button;

// Button.module.css
.btn {
  /* ... خصائص أساسية للزر ... */
  font-family: var(--font-family-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
}

.btn-size-medium {
  font-size: var(--font-size-base);
}

.btn-size-large {
  font-size: var(--font-size-lg);
  padding: var(--space-3) var(--space-4);
}

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

الخطوة الرابعة: التوثيق والنشر

وثّق كل مكون تبنيه. اشرح شو بيعمل، شو الخصائص اللي بيقبلها، وكيف تستخدمه مع أمثلة. زي ما حكيت، Storybook أداة ممتازة لهاي المهمة. لما يصير عندك مجموعة أساسية من المكونات، انشرها كمكتبة داخلية (private package) عشان كل المشاريع في شركتك تقدر تستخدمها.

خلاصة الكلام والنصيحة الأخيرة من أبو عمر 🚀

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

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

صدقني، راحة البال اللي رح تجيك لا تقدر بثمن. بالتوفيق يا جماعة!