نظام التصميم وأتمتة المكوّنات

عبر عدة منتجات، كان الفريق يعيد بناء الأزرار وحقول الإدخال والبطاقات نفسها مع اختلافات طفيفة في كل مرة، وكانت الرموز التصميمية (Design Tokens) موزّعة في مكانين: أنماط Figma ومتغيّرات CSS تُحدَّث يدوياً، فتباعدت مع الوقت.

• كان يجب أن تكون القواعد قابلة للاستخدام من مصممين لا خلفية هندسية لديهم، فكُتبت كقوائم تحقق للبناء لا كأكواد.
• كان على خط أنابيب الرموز أن يندمج في المستودعات القائمة دون عملية ترحيل كبيرة.

معيار مكتوب لبناء المكوّنات: التسمية، وخصائص المتغيّرات، وتغطية الحالات (الافتراضية، التحويم، التركيز، المعطّلة، الخطأ)، وقواعد التخطيط التلقائي.

خط أنابيب عبر Tokens Studio يصدّر الرموز من Figma إلى ملف JSON كمصدر وحيد للحقيقة ويولّد منها متغيّرات CSS، فيصل أي تغيير في الألوان داخل Figma إلى الكود دون خطوة يدوية.

كان أثر قواعد البناء أكبر من أثر الأدوات. فما إن التزم كل مكوّن بنموذج المتغيّرات والحالات نفسه حتى أصبحت الأتمتة مسألة مباشرة؛ قبل ذلك لم يكن هناك ما هو متسق بما يكفي لأتمتته.