منتج، لا مشروع

حين انضممت إلى Northwind مصمّمةَ منتجات، كان في تطبيق إدارة الشحنات (dispatch) 64 درجة رمادي مختلفة في الإنتاج، و11 شكلًا للأزرار، وثلاثة منتقيات تاريخ يعرض كلٌّ منها التاريخ بطريقة مختلفة. لم يقرّر أحد شيئًا من هذا. لقد تراكم وحده: كل فريق حلّ مشكلته تحت ضغط موعد تسليم، ولم يكن أحد يتقاضى راتبًا ليرى الصورة كاملة.

حاولت Northwind إصلاح الأمر مرة. في 2021 بنى فريق مهامّ سريع مكتبة Figma وحزمة React، وأطلقهما بإعلان جميل، ثم انتقل إلى عمل آخر. بعد ثمانية عشر شهرًا كانت نصف الفرق قد نسخت المكوّنات إلى مستودعاتها لتصلح أخطاء لم يكن أحد في المصدر يراجعها. كان النظام «منتهيًا»، وهذه بالضبط كانت المشكلة.

مِمَّ يتكوّن نظام التصميم

نظام التصميم (design system) هو المجموعة المشتركة من القرارات التي تسمح لفرق كثيرة ببناء واجهات متّسقة دون أن تعيد التفكير في كل شيء من الصفر. وهذه القرارات تعيش في طبقات:

• الـ tokens (أو design tokens) قرارات تصميم لها أسماء: color-action-bg بدل #1f5ae0.
• المكوّنات (components) هي وحدات البناء القابلة لإعادة الاستخدام، في أدوات التصميم وفي الكود معًا، وهي مبنية من الـ tokens.
• الأنماط (patterns) وصفات لتركيب المكوّنات لحلّ مشكلات تتكرّر، مثل الطريقة التي تعرض بها Northwind فشل مزامنة شحنة.
• التوثيق يخبر الناس متى يستخدمون كل قطعة، ومتى لا يستخدمونها.
• الناس والعمليات يُبقون كل ما سبق صحيحًا مع الوقت: مَن يصلح الأخطاء، ومَن يوافق على المكوّنات الجديدة، وكيف تُطلَق الإصدارات.

مكتبة المكوّنات طبقة واحدة فقط. والفرق التي لا تبني غيرها تحصل على صندوق قطع بلا دليل استخدام، ثم تتقادم القطع.

منتج، لا مشروع

للمشروع نطاق وموعد تسليم وحفلة إطلاق. أما المنتج فله مستخدمون، وقائمة مهام (backlog)، وخارطة طريق (roadmap)، وفريق يبقى بعد الإطلاق. نظام التصميم منتج مستخدموه هم مصمّمو المنتجات ومهندسوها في شركتك. ولديهم بدائل: أن يبنوا الشيء بأنفسهم، أو ينسخوا مكوّنًا، أو يستعينوا بمكتبة مفتوحة المصدر. كل أسبوع يختارون إن كانوا سيستخدمون نظامك، ولن يختاروه إلا إذا وفّر عليهم الوقت.

هذه النظرة تغيّر قراراتك اليومية. تُجري بحثًا مع فرق المنتجات كما تُجريه مع المستخدمين. تُبقي الـ backlog علنيًا. تقيس التبنّي (adoption)، أي مدى إقبال الفرق على النظام، كما يقيس فريق منتج معدّل الاحتفاظ بالمستخدمين. وحين يسألك أحد متى سينتهي النظام، تكون الإجابة: «لن ينتهي، تمامًا مثل التطبيق الذي يخدمه».

كيف تسير هذه الدورة

ستعيد بناء Northwind UI معي. هذا النظام يخدم واجهتين: تطبيق الـ dispatch على الويب والموقع التسويقي، ويخدم علامتين تجاريتين: Northwind وTidewater، وهي شركة استحوذت عليها Northwind. قسمًا بعد قسم، ستدقّق ما هو موجود، وتصمّم معمارية الـ tokens، وتبني مكوّنات تحمل إمكانية الوصول من الأساس، وتجهّز إصدارات مرقّمة، وتنمّي التبنّي حتى يعتمد عليه أربعون فريقًا. وفي الدرس التالي تبدأ من حيث يبدأ كل نظام حقيقي: أن تحصي ما هو موجود بالفعل.