يا جماعة الخير، بتذكر مرة كنا قاعدين في اجتماع مهم، نعرض فيه النسخة الجديدة من تطبيقنا اللي شغالين عليه شهور. أنا وفريقي من المطورين، وفريق المصممين، ومدير المشروع، الكل قاعد ومتحمّس. كل مطور كان مسؤول عن جزء (module) معين في التطبيق. الأول عرض شغله، والثاني عرض شغله، والثالث… وهنا بدأت المصيبة تبين.
رغم إنه التطبيق واحد، إلا إنه كل جزء كان كأنه من كوكب ثاني! الزر في صفحة “الملف الشخصي” لونه أزرق سماوي بحواف دائرية، وفي صفحة “المنتجات” لونه كحلي بحواف حادة. الأيقونات مرة كبيرة ومرة صغيرة. حتى خطوط الكتابة، كل واحد مستخدم حجم وشكل على كيفه. حسيت حالي كأني بتصفح خمس تطبيقات مختلفة مش تطبيق واحد. مدير المشروع وجهه صار يقلب ألوان، وسأل سؤال بسيط قتلنا كلنا: “يا جماعة، ليش ولا إشي بشبه الثاني؟”.
في هداك اليوم، بعد الاجتماع الكارثي، قعدت مع حالي ومعي كاسة شاي بالمرمية، وأنا بفكّر في الورطة اللي إحنا فيها. واجهاتنا كانت عبارة عن جزر معزولة، كل مطور بيبني على جزيرته بالطريقة اللي بشوفها مناسبة، وما في جسور بينا. هنا كانت بداية رحلتنا مع ما يسمى بـ “نظام التصميم” أو الـ Design System، المفهوم اللي أنقذنا من جحيم الفوضى البصرية.
ما هو ‘نظام التصميم’ (Design System)؟ مش مجرد مكتبة مكونات!
قبل ما نخوض في التفاصيل، خلونا نوضح نقطة مهمة. كثير ناس بتفكر إن نظام التصميم هو مجرد مكتبة مكونات (Component Library) زي Bootstrap أو Material-UI. هذا فهم ناقص. نظام التصميم أشمل وأعمق من هيك بكثير. هو “مصدر الحقيقة الأوحد” (Single Source of Truth) لكل ما يتعلق بتصميم وتطوير واجهات المستخدم في شركتك أو مشروعك.
تخيله زي كتالوج “ليغو” (Lego) الضخم. ما بعطيك بس القطع (المكونات)، بل بعطيك كمان القواعد (المبادئ) وكيف تركب هاي القطع مع بعضها (الأنماط) عشان تبني أي إشي بدك ياه بشكل متناسق وجميل. هو لغة مشتركة بين المصممين والمطورين والمنتج.
الأركان الأربعة لنظام التصميم
أي نظام تصميم محترم بقوم على أربعة أركان أساسية:
- المبادئ التوجيهية (Guiding Principles): هاي هي روح النظام. أسئلة مثل: “هل تصميمنا يركز على البساطة؟ السرعة؟ الوضوح؟”. هاي المبادئ بتساعد الفريق ياخد قرارات متسقة حتى لو ما في قاعدة صريحة.
- دليل الأنماط (Style Guide): هنا بنعرّف الحمض النووي البصري (Visual DNA) لتطبيقنا. الألوان الأساسية والثانوية، الخطوط وأحجامها، المسافات والهوامش، شكل الأيقونات، إلخ.
- مكتبة المكونات (Component Library): قلب النظام النابض. هنا بنلاقي المكونات البرمجية الجاهزة للاستخدام (أزرار، حقول إدخال، قوائم، بطاقات…). كل مكون مصمم ومبرمج مرة واحدة، ويُعاد استخدامه في كل مكان.
- التوثيق والإرشادات (Documentation & Guidelines): الركن المنسي أحيانًا ولكنه الأهم. كيف نستخدم كل مكون؟ متى نستخدم الزر الأساسي ومتى نستخدم الثانوي؟ شو الأخطاء الشائعة اللي لازم نتجنبها؟ بدون توثيق واضح، النظام بفقد قيمته.
رحلتنا من الفوضى إلى النظام: كيف بنينا نظامنا؟
بعد ما اقتنعنا بالفكرة، كان لازم نبدأ الشغل. بناء نظام تصميم مش إشي بصير بيوم وليلة، هو رحلة. وهي هي خطوات رحلتنا العملية:
الخطوة الأولى: جرد الفوضى (The UI Audit)
أول إشي عملناه هو “جرد” لكل مكونات واجهاتنا الحالية. حرفيًا، أخدنا لقطات شاشة (screenshots) لكل زر، كل حقل إدخال، كل لون، كل أيقونة في كل صفحات التطبيق. جمعناهم كلهم في ملف Figma واحد. النتيجة كانت صاعقة! اكتشفنا إنه عنا 12 درجة مختلفة من اللون الأزرق، و 8 أنواع أزرار “حفظ” مختلفة. هاي العملية ورجتنا حجم المشكلة بالأرقام والصور، وكانت ضرورية عشان نقنع الإدارة بأهمية المشروع.
الخطوة الثانية: وضع الحمض النووي (Defining The Visual DNA)
بالتعاون مع المصممين، بدأنا نتخذ قرارات. اخترنا لوحة ألوان محددة (لون أساسي، ثانوي، ألوان للنجاح والخطأ والتنبيه). حددنا نوعين خطوط فقط لا غير، مع أحجام واضحة لكل مستوى (H1, H2, Body, Caption). وضعنا نظام مسافات موحد (Spacing System) مبني على مضاعفات الرقم 8 (8px, 16px, 24px). هاي القرارات البسيطة كانت الأساس لكل إشي رح يجي بعدها.
الخطوة الثالثة: بناء المكونات الذرية (Atomic Design)
اعتمدنا منهجية “التصميم الذري” (Atomic Design). الفكرة بسيطة: نبدأ بأصغر إشي (الذرات)، ونركبها لتكوين أشياء أكبر.
- الذرات (Atoms): أصغر الوحدات زي الألوان، الخطوط، الأيقونات، وحتى الـ Labels.
- الجزيئات (Molecules): مجموعات من الذرات بتشتغل مع بعض، زي حقل إدخال (Label + Input field + Error message).
- الكائنات (Organisms): مكونات أكثر تعقيدًا، زي شريط التنقل (مجموعة أزرار وروابط وشعار) أو فورم كامل.
هذا المنهج خلانا نبني المكونات بشكل منظم وقابل للتوسعة. بدأنا بأهم مكون وأكثر مكون مكرر: الزر (Button).
نصيحة من أبو عمر: لا تحاول تبني كل إشي من أول يوم. ابدأ بأهم 3-5 مكونات عندك (الزر، حقل الإدخال، البطاقة). ابنيهم صح، وثّقهم، وخلّي الفريق يبدأ يستخدمهم. النجاحات الصغيرة بتعطي دفعة معنوية كبيرة للمشروع.
كمثال، هذا شكل مبسط لمكون “الزر” اللي بنيناه باستخدام React وكيف صار مصدر الحقيقة الوحيد لكل الأزرار في التطبيق:
// Button.jsx - مكون الزر الموحد في نظام التصميم
import React from 'react';
import './Button.css'; // ملف يحتوي على كل الأنماط الأساسية
/**
* المكون الأساسي للأزرار في نظامنا.
* يوفر تناسقًا في الشكل والسلوك عبر التطبيق.
*/
const Button = ({ children, variant = 'primary', size = 'medium', onClick, ...props }) => {
// نحدد الكلاسات بناءً على الخصائص (props)
const classNames = `btn btn--${variant} btn--${size}`;
return (
<button className={classNames} onClick={onClick} {...props}>
{children}
</button>
);
};
export default Button;
// --- طريقة الاستخدام في أي مكان في التطبيق ---
// import Button from './design-system/Button';
// <Button variant="primary" size="large" onClick={handleSave}>حفظ التغييرات</Button>
// <Button variant="secondary" onClick={handleCancel}>إلغاء</Button>
// <Button variant="danger" size="small">حذف الحساب</Button>
بهذه الطريقة، بدل ما كل مطور يكتب CSS خاص فيه، صار الكل يستخدم نفس المكون، وبنضمن 100% إن كل الأزرار متناسقة. لو حبينا نغير شكل الأزرار في المستقبل، بنعدّل ملف واحد فقط!
الخطوة الرابعة: التوثيق… ثم التوثيق!
لكل مكون بنيناه، أنشأنا صفحة توثيق خاصة فيه. هاي الصفحة مش بس للمطورين، هي للمصممين ومدراء المنتج كمان. كانت تحتوي على:
- عرض حي (Live Demo): تشوف المكون بكل حالاته (primary, secondary, disabled, etc.).
- إرشادات الاستخدام (Usage Guidelines): متى تستخدم كل نوع؟ (e.g., “استخدم الزر الأساسي لأهم إجراء في الصفحة فقط”).
- أمثلة الكود (Code Snippets): نسخ ولصق مباشر لكيفية استخدامه.
- قائمة الخصائص (Props Table): شرح لكل خاصية (prop) ممكن تمررها للمكون.
- أفضل الممارسات (Do’s and Don’ts): أمثلة بالصور على الاستخدام الصحيح والخاطئ.
استخدمنا أدوات مثل Storybook عشان نبني هذا التوثيق بشكل تفاعلي ومرتبط بالكود مباشرة.
الفوائد اللي لمسناها على أرض الواقع
بعد أشهر من العمل، صار عنا نظام تصميم ناضج. والنتائج كانت مذهلة:
- سرعة خيالية في التطوير: بناء صفحة جديدة صار زي تركيب قطع الليغو. بدل ما المطور يقضي وقت في كتابة CSS وتنسيق المكونات، صار يركز على منطق العمل (Business Logic).
- تناسق بصري يريح العين: التطبيق صار شكله “مرتب” واحترافي. تجربة المستخدم تحسنت بشكل ملحوظ لأنه تعلم سلوك المكونات مرة واحدة وصار يتوقعه في كل مكان.
- لغة مشتركة بين المصممين والمطورين: بطل في نقاشات طويلة حول “درجة اللون الأزرق هاي مش مزبوطة”. صار المصمم يقول “استخدم مكون الـ Card مع variant=highlighted” والمطور يفهم عليه فورًا.
- صيانة أسهل وتحديثات أسرع: لما قررنا نغير شكل زوايا كل البطاقات في التطبيق من حادة إلى دائرية، التغيير أخذ دقائق بتعديل ملف واحد في نظام التصميم، بدل أيام من البحث والتعديل في كل التطبيق.
الخلاصة: من جزر معزولة إلى قارة متصلة 🚀
في النهاية، نظام التصميم هو استثمار. استثمار في الوقت والجهد في البداية، لكن عوائده على المدى الطويل ضخمة جدًا. هو الجسر اللي بوصل كل الجزر المنعزلة (فرق العمل، الأقسام، الصفحات) وبحولها لقارة واحدة متصلة وقوية.
إذا كنت بتعاني من الفوضى البصرية، والتكرار في الكود، وصعوبة التواصل بين المصممين والمطورين، فصدقني، الحل مش بزيادة الاجتماعات. الحل بإنشاء “مصدر حقيقة أوحد” تتفقوا عليه كلكم.
نصيحتي الأخيرة إلك: ابدأ اليوم. مش شرط تبني نظام ضخم من أولها. ابدأ بتعريف لونين وخط واحد وزر واحد. ابدأ ببناء أول جسر. مع الوقت، رح تلاقي حالك بنيت قارة كاملة من الإبداع والإنتاجية. بالتوفيق يا جماعة الخير!
