أنظمة التصميم، بلا تسويق زائد
مصطلح "نظام التصميم" استُهلك بعد عامين من منشورات LinkedIn. لذا لنعِد ضبط التعريف.
نظام التصميم هو المرجع الوحيد القابل للتنفيذ والمُصدَّر بإصدارات لشكل منتجك وسلوكه. "قابل للتنفيذ" لأن المصممين يعملون من نفس المكوّنات التي يشحنها المهندسون. "مُصدَّر بإصدارات" لأن النظام يتطور مع الوقت ويجب أن تستمر الإصدارات القديمة في العمل. "مرجع وحيد" لأنه إن بق ي هناك غموض، فالنظام لا يؤدي وظيفته.
ملف Figma يحتوي على بعض الأزرار ليس نظام تصميم. مكتبة Storybook بها 40 مكوّنًا بلا رموز تصميم (design tokens) ليست نظام تصميم. النظام هو الجسر بينهما.
ما الذي يتغير عندما يكون لديك واحد
ثلاثة أمور، بشكل قابل للقياس:
سرعة العمل على الميزات الجديدة. في المشاريع التي نُدخل فيها نظام تصميم حقيقيًا في منتصف العمل، تتسارع وتيرة تسليم الميزات بنسبة 30-50% خلال دورتَي عمل (sprints). يتوقف المصممون عن إعادة اختراع أنماط النماذج. يتوقف المهندسون عن إعادة تنفيذ الأزرار. طلبات الدمج (PRs) تصغر حجمًا.
الاتساق عبر الواجهات. الشركات متعددة المنتجات هي الحالة الواضحة، لكن حتى فرق المنتج الواحد تستفيد. الموقع التسويقي، والتطبيق، ولوحة تحكم الإدارة، وقوالب البريد الإلكتروني — إن شاركت الرموز نفسها، تبدو وكأنها من الشركة ذاتها. بدون رموز مشتركة، تتباعد دائمًا.
تكلفة التأهيل. يستطيع المصمم أو المهندس الجديد شحن أول طلب دمج (PR) له في أسبوعه الأول بدلًا من شهره الأول. النظام يجيب على معظم أسئلة "كيف ننفّذ كذا" قبل أن يسألها أحد.
ما الذي يدخل داخل النظام
نظام التصميم العامل يتكوّن من أربع طبقات تقريبًا. تجاوز أيًا منها يجعل النظام هشًا.
1. الرموز (Tokens). الألوان، والطباعة، والتباعد، ونصف أقطار الزوايا، والظلال، ومدد الحركة، ومنحنيات التسهيل الحركي (easing). هذه بيانات JSON، لا صور. تغذي كلًا من Figma (عبر أدوات مثل Tokens Studio) والكود (عبر Style Dictionary أو ما شابه). طبقة الرموز هي الأهم والأكثر إغفالًا.
2. العناصر الأولية (Primitives). الأزرار، وحقول الإدخال، والقوائم المنسدلة، وخانات الاختيار، وأزرار الراديو، والمفاتيح، والشارات، والتلميحات، والنوافذ المنبثقة. هي عناصر الواجهة الذرية التي تظهر في كل شاشة. يجب تنفيذها مرة واحدة، بإتاحة وصول (accessibility) سليمة (حلقات التركيز، ARIA، دعم لوحة المفاتيح)، وتوثيقها بجداول الخصائص (props).
3. الأنماط (Patterns). النماذج، والتنقل، والحالات الفارغة، وحالات التحميل، وحالات الأخطاء، وجداول البيانات. هذه تراكيب من العناصر الأولية. تُرسّخ قرارات: "هكذا نتعامل مع نموذج متعدد الخطوات"، لا "إليك مكتبة نماذج".
4. الإرشادات (Guidelines). نبرة الصوت والأسلوب، ومعايير إتاحة الوصول، وقواعد المحتوى ("نستخدم حالة الجملة في الأزرار")، ومبادئ الحركة. الأجزاء غير المكوّناتية التي تحافظ على تماسك العمل.
نمط فشل شائع: شحن النظام ثم التخلي عنه
نصف أنظمة التصميم التي نراها في أكواد العملاء بُنيت قبل عامين، واستُخدمت لستة أشهر، ثم جرى تجاوزها بهدوء. الأعراض: مكتبة Storybook لا يحدّثها أحد، مكوّنات في الكود تُظلّل مكوّنات نظام التصميم، وقيم ألوان hex مكتوبة يدويًا في 30 موضعًا.
يحدث هذا عادة عندما يُعامَل النظام كمُخرَج لمرة واحدة بدلًا من منتج حي. الحل بنيوي:
- عيّن مسؤولًا عن النظام. ولو بدوام جزئي. بدون مسؤول، لا أحد يقرر متى يترقى مكوّن جديد إلى النظام.
- اجعل استخدام النظام أسهل من تجاوزه. إن استغرقت إضافة مكوّن جديد إلى النظام وقتًا أطول من نسخ ولصق واحد، فقد خسرت.
- أجرِ تدقيقًا ربع سنوي. تفقّد كل شاشة، واحسب مقدار الانحراف، وأصلحه. نستخدم مقياسًا بسيطًا: "نسبة الشاشات التي تستخدم مكوّنات النظام حصرًا". أي رقم أقل من 80% يُعد مشكلة.
ابدأ صغيرًا (ولا تتوقف)
لست بحاجة إلى مكتبة من 200 مكوّن لتسمّيها نظام تصميم. الإصدار الأول العامل يتّسع داخل مكتبة Figma واحدة وحزمة npm واحدة، ويحتوي تقريبًا على:
- 8 رموز ألوان
- 4 مقاييس طباعة
- مقياس تباعد (4 / 8 / 12 / 16 / 24 / 32 / 48)
- 6 مكوّنات: زر، حقل إدخال، قائمة منسدلة، نافذة منبثقة، بطاقة، جدول
- 3 أنماط: تخطيط النموذج، رأس الصفحة، الحالة الفارغة
هذا نظام تصميم حقيقي. اشحنه يوم الجمعة، واستخدمه يوم الاثنين، وطوّره على مدار العام التالي.
متى لا تحتاج إلى واحد
فريق من شخصين يبني منتجًا واحدًا لمدة ستة أشهر سيشحن أسرع بدون عبء نظام رسمي. نقطة التعادل تقريبًا هي: ثلاثة مصممين/مهندسين أو أكثر، أو واجهات متعددة، أو منتج يُتوقع أن يعيش أكثر من 18 شهرًا. دون ذلك، فقط دوّن الاتفاقيات وامضِ قدمًا.
فوق تلك النقطة، السؤال ليس "هل نبني نظام تصميم؟" بل "كم دفعنا بالفعل ثمن عدم امتلاكه؟" إذا أردت رأيًا ثانيًا حول موقع نظام فريقك، فريق تصميم UI/UX لدينا يجري تدقيقًا خفيفًا كنقطة انطلاق.
