يا جماعة الخير، السلام عليكم ورحمة الله وبركاته. معكم أخوكم أبو عمر.
قبل كم سنة، كنت شغال على مشروع ضخم، مشروع فيه تطبيقات ويب وموبايل ولوحات تحكم داخلية. فريقنا كان كبير وموزع، فيه مطورين الواجهات الأمامية (Frontend)، ومطورين الواجهات الخلفية (Backend)، ومصممين، وكل مين “بغني على ليلاه” زي ما بنحكي عنا في فلسطين. في يوم من الأيام، كنت بعمل مراجعة لواجهة تسجيل الدخول اللي عملها زميل جديد، وجنبها كانت صفحة الإعدادات اللي أنا كنت عاملها قبل شهر. صابني شبه صدمة!
الزر الرئيسي في صفحته لونه أزرق سماوي فاقع، والزر في صفحتي لونه أزرق كحلي. حجم الخط عنده 15 بكسل، وعندي 16. المسافات بين العناصر عنده عشوائية، وعندي محسوبة بالمللي. شعرت للحظة إنه كل صفحة في تطبيقنا جاي من كوكب مختلف. كأنها جزر منعزلة، كل جزيرة إلها قانونها الخاص وشكلها الخاص. وقتها مسكت راسي وحكيت: “لهون وبس! إحنا قاعدين بنبني فوضى، مش منتج!”. هذا الموقف كان الشرارة اللي خلتنا نبدأ رحلتنا مع ما يسمى بـ “نظام التصميم” أو الـ Design System.
ما هو “نظام التصميم” (Design System) أصلاً؟
قبل ما نخوض في التفاصيل التقنية، خليني أبسطلكم الفكرة. تخيل إنك بتبني مدينة من مكعبات الليغو (LEGO). الشركة بتعطيك مجموعة من المكعبات الأساسية (الحمرا، الزرقا، الشبابيك، الأبواب) مع كتالوج يوضح كيف تستخدمها. باستخدام هاي المكعبات الموحدة، بتقدر تبني بيت، سيارة، أو حتى قلعة، وكلها رح تكون متناسقة وبتحس إنها من نفس العالم.
نظام التصميم هو بالضبط هيك، بس لعالم البرمجيات. هو ليس مجرد “دليل ألوان” أو “مكتبة أيقونات”، بل هو أعمق من ذلك بكثير. إنه المصدر الوحيد للحقيقة (Single Source of Truth) الذي يجمع كل شيء تحتاجه الفرق لبناء منتج رقمي متكامل. يتكون عادة من:
- مبادئ التصميم: الفلسفة والقيم التي توجه قراراتنا التصميمية (مثلاً: البساطة، الوضوح، السرعة).
- الهوية البصرية: الألوان، الخطوط، الأيقونات، الشعار، وكيفية استخدامها.
- مكتبة المكونات (Component Library): مجموعة من المكونات البرمجية الجاهزة والقابلة لإعادة الاستخدام (أزرار، حقول إدخال، بطاقات، قوائم منسدلة…) مع الكود الخاص بها.
- إرشادات وقواعد: توثيق واضح يشرح متى وكيف تستخدم كل مكون، وما هي الممارسات الصحيحة والخاطئة (Do’s and Don’ts).
ببساطة، نظام التصميم هو اللغة المشتركة اللي بيتكلمها المصممون والمطورون ومدراء المنتج لضمان بناء تجربة مستخدم متناغمة وفعالة.
الفوضى الخلاقة.. أم الفوضى المدمرة؟ علامات الخطر التي واجهناها
قبل ما نتبنى نظام التصميم، كنا عايشين في جحيم حقيقي، وإن كنا لا نعترف بذلك. كانت أعراض المشكلة واضحة زي الشمس، وهذه بعضها:
1. جزر منعزلة من الكود والستايل
كل مطور جديد ينضم للفريق، أو كل ميزة جديدة نبدأ فيها، كانت تعني كتابة كود CSS و HTML/JSX من الصفر. كان عنا ملف اسمه buttons.css فيه 5 أنواع من الأزرار، وزميلي عنده ملف آخر اسمه main-buttons.css فيه 3 أنواع أخرى، وفي مكان ثالث كان فيه تنسيق للأزرار مكتوب مباشرة في ملف الجافاسكريبت (inline styles). النتيجة؟ عشرات النسخ من نفس المكون، وكل نسخة بتختلف شوي عن أختها.
2. “هذا الزر مش زي هداك!”: جحيم التعديلات
أتذكر مرة طلب منا مدير المنتج تغيير درجة اللون الأزرق الأساسي في العلامة التجارية. يا إلهي! كانت مهمة شبه مستحيلة. قضينا أياماً ونحن نبحث في كل زاوية من زوايا المشروع عن كل مكان استخدمنا فيه اللون القديم لنستبدله بالجديد. وبالطبع، بعد كل هذا الجهد، بقينا نكتشف أماكن لم نصل إليها لأسابيع لاحقة. كانت عملية صيانة مرهقة ومحبطة للغاية.
3. إهدار الوقت والجهد في إعادة اختراع العجلة
بدل ما المطور يركز على منطق العمل (Business Logic) وحل المشاكل الحقيقية للمستخدم، كان يقضي نصف وقته في بناء مكونات أساسية تم بناؤها 10 مرات من قبل: “كيف شكل الـ Modal؟”، “شو الألوان المسموحة في الـ Alert؟”، “هل الأيقونة لازم تكون على يمين النص ولا على شماله؟”. كل هذه الأسئلة كانت تستهلك وقتاً ثميناً من الجميع.
رحلة بناء نظامنا الخاص: من الفكرة إلى الواقع
بعد ما اتفقنا إن الوضع لا يطاق، بدأنا رحلة البناء. لم تكن سهلة، ولكنها كانت استثماراً يستحق كل دقيقة.
الخطوة الأولى: جرد الأصول (UI Audit)
أول شيء عملناه هو عملية “جرد” لكل مكونات واجهة المستخدم في تطبيقنا. فتحنا المشروع وقمنا بأخذ لقطات شاشة (screenshots) لكل زر، كل حقل إدخال، كل بطاقة، كل قائمة… كل شيء. ثم جمعنا الصور المتشابهة مع بعضها. كانت لحظة الصدمة الحقيقية! وجدنا 12 نوعاً مختلفاً من “الزر الرئيسي” وحده! هذا الجرد البصري كان الدليل القاطع الذي احتجناه لإقناع الإدارة بأهمية المشروع.
الخطوة الثانية: وضع المبادئ والأساسات (Design Tokens)
قبل بناء أي مكون، قمنا بتعريف الأساسات. هذه الأساسات أطلقنا عليها اسم “Design Tokens”. هي متغيرات تحمل القيم الأساسية للتصميم. بدلاً من كتابة اللون #3498db في 20 مكان مختلف، قمنا بتعريفه كمتغير واحد.
أمثلة على الـ Tokens:
- الألوان:
--color-primary-500,--color-text-default,--color-background-body - الخطوط:
--font-size-sm,--font-size-md,--line-height-heading - المسافات:
--spacing-xs,--spacing-md,--spacing-xl(مثلاً 4px, 8px, 16px) - الظلال:
--shadow-sm,--shadow-lg
هذه الـ Tokens يمكن تعريفها في ملف CSS مركزي، وهكذا عندما نريد تغيير اللون الرئيسي، نغيره في مكان واحد فقط!
/* file: tokens.css */
:root {
/* Colors */
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
--color-text-default: #212529;
/* Fonts */
--font-family-base: 'Tajawal', sans-serif;
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.25rem;
--font-size-sm: 0.875rem;
/* Spacing */
--spacing-unit: 8px;
--spacing-1: var(--spacing-unit); /* 8px */
--spacing-2: calc(var(--spacing-unit) * 2); /* 16px */
--spacing-3: calc(var(--spacing-unit) * 3); /* 24px */
}الخطوة الثالثة: بناء مكتبة المكونات (Component Library)
هنا بدأ المرح الحقيقي. بدأنا ببناء المكونات الأساسية (الذرات أو Atoms) باستخدام الـ Tokens التي عرفناها. بدأنا بالزر (Button).
قمنا بتصميم وبناء مكون زر واحد فقط، ولكنه ذكي. يمكنك التحكم في شكله من خلال خصائص (props). مثلاً:
variant: (primary, secondary, danger) ليحدد لونه.size: (small, medium, large) ليحدد حجمه.disabled: لتعطيله.isLoading: لإظهار مؤشر تحميل.
وهذا مثال مبسط جداً لمكون زر باستخدام React و CSS Modules (معتمد على الـ Tokens):
// Button.jsx
import styles from './Button.module.css';
function Button({ children, variant = 'primary', size = 'medium', ...props }) {
const classNames = `
${styles.btn}
${styles[`btn--${variant}`]}
${styles[`btn--${size}`]}
`;
return (
<button className={classNames} {...props}>
{children}
</button>
);
}
// Button.module.css
.btn {
font-family: var(--font-family-base);
padding: var(--spacing-1) var(--spacing-2);
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--secondary {
background-color: var(--color-secondary);
color: white;
}
.btn--medium {
font-size: var(--font-size-base);
}
بعد الزر، انتقلنا إلى حقول الإدخال، ثم البطاقات، وهكذا… نبني المكونات الأكبر (الجزيئات والمركبات) من المكونات الأصغر التي بنيناها. الشغل صار مرتب ومنظم.
الخطوة الرابعة: التوثيق هو الملك
مقولتي المفضلة في هذا السياق: “مكون بدون توثيق، كأنه غير موجود”. استخدمنا أداة اسمها Storybook لإنشاء موقع داخلي يعرض كل مكوناتنا. في هذا الموقع، يمكن لأي مطور أو مصمم أن:
- يرى كل المكونات المتاحة.
- يتفاعل معها ويجرب خصائصها المختلفة (يغير حجم الزر، لونه، حالته…).
- ينسخ الكود الجاهز لاستخدام المكون مباشرة.
- يقرأ الإرشادات حول متى وكيف يستخدم كل مكون.
هذا الموقع أصبح هو المرجع الأول والأخير لأي شخص في الفريق يريد بناء أي واجهة جديدة.
نصائح أبو عمر الذهبية 💡
من خلال تجربتي، تعلمت بعض الدروس التي أحب أن أشاركها معكم:
- ابدأ صغيراً: لا تحاول بناء نظام تصميم كامل من اليوم الأول. ابدأ بالأهم: الألوان، الخطوط، والمسافات، ثم انتقل لأهم 3-5 مكونات (مثل الزر، حقل الإدخال، البطاقة). النظام ينمو مع الوقت.
- التعاون أساس النجاح: نظام التصميم ليس مشروعاً للمطورين فقط أو للمصممين فقط. يجب أن يكون هناك تعاون وثيق بين الفريقين. أفضل النتائج تأتي عندما يكون هناك فريق صغير مخصص لهذا النظام.
- اجعله المصدر الوحيد للحقيقة: بعد بناء المكونات في نظام التصميم، يجب أن تفرض استخدامه وتمنع (تقنياً وثقافياً) إنشاء مكونات مخصصة إلا للضرورة القصوى.
- التطور المستمر: نظام التصميم ليس مشروعاً له بداية ونهاية، بل هو كائن حي يتطور مع تطور المنتج. يجب أن تكون هناك آلية لإضافة مكونات جديدة وتحديث المكونات الحالية.
- احصل على دعم الإدارة: وضح للإدارة الفائدة التجارية من نظام التصميم: توفير الوقت (وبالتالي المال)، زيادة سرعة إطلاق الميزات الجديدة، تحسين تجربة المستخدم مما يؤدي لرضا العملاء.
الخلاصة: استثمار لا بد منه
صحيح أن بناء نظام التصميم في البداية يتطلب وقتاً وجهداً، ولكنه استثمار سترى عوائده أضعافاً مضاعفة على المدى الطويل. لقد نقلنا من عالم الفوضى والجزر المنعزلة إلى عالم من التناغم والكفاءة والسرعة. أصبحنا نبني الميزات الجديدة في وقت قياسي وبجودة بصرية لا مثيل لها، وأصبح انضمام أي مطور جديد للفريق عملية سلسة جداً.
فيا صديقي المطور ويا صديقتي المصممة، إذا كنتم تشعرون بنفس الإحباط الذي شعرنا به، فربما حان الوقت لتبدأوا رحلتكم الخاصة في بناء نظام تصميمكم. صدقوني، لن تندموا أبداً. 🚀
