ما قبل النظام: حكاية “الزر الأزرق السماوي الفاتح مع لمسة فيروزية”
بتذكرها زي كأنها مبارح. كنت شغال على مشروع كبير لعميل، خلينا نسميه “أبو أحمد”، زلمة طيّب بس دقيق زيادة عن اللزوم. في يوم من الأيام، وبعد ما سلمته نسخة أولية من لوحة التحكم، رن عليّ التلفون.
“أبو عمر يا غالي، الشغل بجنن، يسلم إيديك. بس عندي ملاحظة صغيرة قد حبة العدس.”
قلتله: “تفضل يا أبو أحمد، كلي آذان صاغية.”
قال: “شوف، لون الزر الرئيسي، الأزرق هاد، حاسه غامق شوي. بتقدر تفتّحلي إياه درجة؟ خليه أزرق سماوي فاتح هيك… يفتح النفس.”
بكل بساطة، قلتله “تكرم عيونك”. فتحت ملف الـ CSS الرئيسي، غيرت كود اللون، ورفعت التحديث. خمس دقايق والشغلة خالصة. لكن القصة ما خلصت هون. بعد أسبوع، رن التلفون مرة ثانية.
“حبيبي أبو عمر، يعطيك العافية. رجعت للزر الأزرق… حاسه هلأ صار باهت. شو رأيك نضيفله لمسة فيروزية خفيفة؟ بس لمسة!”
هون بلشت أحس بشعور غير مريح. مش لأني ما بدي أعدّل، الشغل شغل. بس لأني كنت عارف إني مش كاتب كود “نظيف”. كنت محدد لون الزر هاد في ٢٠ مكان مختلف: مرة inline style، مرة في ملف CSS لصفحة معينة، ومرة بـ ID خاص. يا زلمة شو هالشغلة هاي! قضيت أكتر من ساعة بفتش على كل زر وبغير لونه يدويًا. وكل ما أغير واحد، أدعي إني ما أكون نسيت إشي.
هاي الفوضى ما كانت بس بالألوان. كانت بالأحجام، بالمسافات بين العناصر، بأشكال الحواف (border-radius). كل مطور في الفريق كان إله “بصمته” الخاصة. واجهة المستخدم النهائية كانت عبارة عن كوكتيل غير متجانس من الأفكار والأساليب. كنا غرقانين في بحر من التعديلات اليدوية اللي ما بتخلص، وكل طلب تعديل بسيط كان كابوس. لحد ما في يوم، قررت إنو “خلص، بكفي!”. لازم يكون في طريقة أفضل.
نقطة التحول: عندما سمعت لأول مرة عن “نظام التصميم”
في خضم حالة الإحباط هاي، كنت بتصفح مقالات على الإنترنت عن أفضل الممارسات في تطوير الواجهات الأمامية (Frontend Development). فجأة، طلع قدامي مصطلح غريب: “Design System” أو “نظام التصميم”. في البداية، فكرته مجرد اسم “فخم” للـ Style Guide (دليل الأنماط) اللي بنعرفه. لكن كل ما قرأت أكتر، كل ما اكتشفت إني كنت غلطان.
نظام التصميم ليس مجرد ملف PDF فيه الألوان والخطوط. إنه “مصدر الحقيقة الأوحد” (Single Source of Truth) لكل ما يتعلق بالواجهة، وهو عبارة عن مجموعة حية من المكونات البرمجية القابلة لإعادة الاستخدام، مدعومة بإرشادات وقواعد واضحة.
شعرت بلحظة “وجدتها!” حقيقية. الفكرة كانت عبقرية وبسيطة بنفس الوقت: بدل ما كل واحد يبني “زر” على كيفه، ليش ما نبني “الزر المثالي” مرة وحدة، ونحطه في مكتبة مشتركة، وكل الفريق يستخدمه؟ بدل ما كل واحد يختار درجة لون أزرق من عنده، ليش ما نحدد “الأزرق الرئيسي” تبعنا في مكان واحد، والكل يرجعله؟
إيش هو نظام التصميم؟ ببساطة يا جماعة…
تخيل إنك بتبني بيت من قطع الليجو (LEGO). نظام التصميم هو علبة الليجو نفسها:
- الأساسيات (Foundations): هي الألوان الأساسية للقطع (أحمر، أزرق، أصفر)، وأحجامها الأساسية.
- المكونات (Components): هي القطع نفسها المُجمّعة مسبقًا (شباك، باب، عجلة). هاي هي أزرارنا، حقول الإدخال، البطاقات…إلخ.
- الأنماط (Patterns): هي الكتيب اللي بيجيك مع العلبة، وبيشرحلك كيف تركب القطع مع بعض لتعمل سيارة أو بيت. هاي هي إرشاداتنا حول متى تستخدم الزر الرئيسي ومتى تستخدم الثانوي.
الفكرة هي بناء مكتبة من هذه “القطع” الموثوقة والموحدة، عشان أي حدا في فريقك يقدر يبني واجهات جديدة بسرعة وثقة واتساق.
تشريح نظام التصميم: المكونات الأساسية
لما قررت أبني أول نظام تصميم بسيط لمشاريعي، قسمته لعدة أجزاء منطقية. هاي هي الأجزاء اللي بنصح أي حدا يبدأ فيها.
1. الأساسيات (Foundations / Design Tokens)
هاي هي الروح تبع النظام. هي متغيرات (variables) بتحمل القيم الأساسية للتصميم. بدل ما تكتب كود اللون #4F46E5 في كل مكان، بتعرفه مرة وحدة كمتغير. لو حبيت تغيره في المستقبل، بتغيره من مكان واحد فقط! “وهذا هو مربط الفرس”.
أهم الـ Tokens اللي لازم تبدأ فيها:
- الألوان (Colors): أساسي، ثانوي، لون الخطأ، لون النجاح، درجات الرمادي.
- الخطوط (Typography): نوع الخط، حجم العناوين (h1, h2)، حجم النص العادي، وزن الخط.
- المسافات (Spacing): نظام للمسافات (padding, margin) عشان كل شي يكون متناسق (مثلاً: 4px, 8px, 16px, 32px).
- الظلال (Shadows) والحواف (Borders).
مثال عملي بالكود (CSS Variables):
/* file: tokens.css */
:root {
/* Colors */
--color-primary-500: #4F46E5; /* الأزرق الرئيسي تبعنا */
--color-primary-600: #4338CA; /* درجة أغمق عند الـ hover */
--color-text-base: #1F2937;
--color-gray-100: #F3F4F6;
/* Typography */
--font-family-base: 'Tajawal', sans-serif;
--font-size-lg: 1.125rem; /* 18px */
--font-size-base: 1rem; /* 16px */
/* Spacing */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
/* Borders */
--border-radius-md: 0.375rem; /* 6px */
}
الآن، بدل ما تكتب color: #4F46E5;، بتكتب color: var(--color-primary-500);. شفت كيف السحر؟
2. المكونات (Components)
بعد ما حددنا الأساسيات، بنبني فوقها المكونات. هاي هي وحدات البناء الحقيقية لواجهتك. ابدأ بالأبسط والأكثر تكرارًا:
- Button: أهم مكون على الإطلاق. لازم يكون عندك أنواع مختلفة (primary, secondary, danger) وأحجام مختلفة (small, medium, large).
- Input Field: حقل إدخال النص، مع حالاته المختلفة (عادي، خطأ، معطل).
- Card: لعرض المحتوى بشكل منظم.
- Checkbox / Radio Button.
- Modal / Popup.
مثال عملي لمكون “زر” بإطار عمل React:
// file: Button.jsx
// بنفترض إنك عامل import لملف CSS اللي فيه الـ Tokens
import './Button.css';
function Button({ children, variant = 'primary', size = 'medium' }) {
// بنجمع أسماء الكلاسات بناءً على الخصائص
const classNames = `btn btn--${variant} btn--${size}`;
return (
<button className={classNames}>
{children}
</button>
);
}
export default Button;
/* file: Button.css */
.btn {
font-family: var(--font-family-base);
border-radius: var(--border-radius-md);
padding: var(--space-2) var(--space-4);
cursor: pointer;
border: 1px solid transparent;
font-weight: 600;
transition: background-color 0.2s;
}
.btn--primary {
background-color: var(--color-primary-500);
color: white;
}
.btn--primary:hover {
background-color: var(--color-primary-600);
}
/* ... باقي الـ variants والـ sizes */
3. التوثيق (Documentation)
وهون كتير ناس بتقصّر. “إذا لم يكن موثقًا، فهو غير موجود”. التوثيق هو المكان اللي بروح عليه أي مطور أو مصمم جديد عشان يفهم كيف يستخدم النظام. لازم يكون التوثيق واضح، تفاعلي، وسهل الوصول.
أدوات بنصح فيها بشدة للتوثيق:
- Storybook: أداة رائعة بتخليك تبني وتوثق مكوناتك في بيئة معزولة. بتقدر تشوف كل الحالات المختلفة للمكون وتتفاعل معها مباشرة. هي المعيار الذهبي اليوم.
- Zeroheight: أداة بتربط بين ملفات التصميم (زي Figma) ومكونات الكود، وبتنشئ موقع توثيق جميل.
- موقع ثابت بسيط (Static Site): لو مشروعك صغير، ممكن تبني موقع بسيط باستخدام أدوات مثل Docusaurus أو Next.js لعرض المكونات وشرح طريقة استخدامها.
الفوائد اللي لمستها بإيدي: كيف تغيرت حياتي العملية؟
بعد ما تبنيت هاد الفكر، وبديت أطبقه شوي شوي، حياتي كمبرمج تغيرت 180 درجة. قصة “الزر الأزرق” تبعت أبو أحمد صارت نكتة بنضحك عليها بدل ما تكون كابوس.
- الاتساق المطلق: كل المشاريع صار شكلها متناسق واحترافي. ما في مجال للاجتهادات الشخصية. الواجهة صارت بتحكي لغة بصرية واحدة.
- سرعة خيالية في التطوير: بدل ما أقضي ساعات ببني واجهة من الصفر، صرت بركّب مكونات جاهزة زي الليجو. بناء صفحة جديدة صار ياخد دقايق بدل ساعات.
- صيانة ولا أسهل: لما يجي “أبو أحمد” جديد ويطلب تغيير درجة اللون الأزرق، بفتح ملف الـ
tokens.css، بغير قيمة متغير واحد، و… بوم! 💥 كل الأزرار في كل المشروع بتتحدث تلقائيًا. شعور لا يوصف بالراحة والسيطرة. - تعاون أفضل بين المصممين والمطورين: صار في لغة مشتركة. المصمم بقول “استخدم مكون Card مع Primary Button”، وأنا كمطور بعرف بالضبط عن شو بحكي. ما في مجال لسوء الفهم.
نصائح أبو عمر الذهبية: من وين تبدأ يا خبير؟
يمكن تكون حاسس إن الموضوع كبير ومعقد. لا تخاف، ما حدا ببني نظام تصميم كامل بيوم وليلة. هاي شوية نصائح من القلب:
- ابدأ صغيرًا جدًا (Start Small): “شوي شوي يا حبيبي”. لا تحاول تبني نظام ينافس Google. ابدأ بتعريف الألوان والخطوط الأساسية فقط. بعدين، ابنِ أول مكون: الزر (Button). ولما تتقنه، انتقل للمكون اللي بعده.
- لا تخترع العجلة من جديد: شوف أنظمة التصميم مفتوحة المصدر زي Material-UI (MUI)، Ant Design، Chakra UI. تعلم منهم، شوف كيف منظمين، وكيف بحلوا المشاكل. ممكن حتى تستخدم واحد منهم كأساس وتبني فوقه.
- التوثيق أولاً بأول: من أول مكون بتعمله، وثّقه فورًا باستخدام أداة زي Storybook. رح تشكر حالك على هالخطوة بعدين.
- اجعلها مسؤولية مشتركة: نظام التصميم مش بس للمطورين. لازم يكون جهد مشترك بين المطورين والمصممين ومدراء المنتج. الكل لازم يساهم فيه ويحترمه.
الخلاصة: نظام التصميم ليس رفاهية، بل ضرورة 🏆
الانتقال من الفوضى إلى النظام كان واحد من أهم القرارات المهنية اللي أخذتها. نظام التصميم حوّل عملية بناء الواجهات من مهمة مُرهقة ومليئة بالتكرار إلى عملية إبداعية، سريعة، وممتعة. هو استثمار في الوقت والجهد في البداية، لكن العائد اللي بتحصل عليه من حيث السرعة والجودة وسهولة الصيانة لا يقدر بثمن.
فيا صديقي المبرمج، ويا زميلتي المصممة، إذا كنتم غارقين في بحر التعديلات اليدوية، فنظام التصميم هو طوق النجاة. استثمروا فيه اليوم، وراح تدعولي بكرة. 😉
