بناء مجموعة Steady المصغّرة

المجموعة الموجودة في رأسك فقط ليست مجموعة. اختبار صوفيا بسيط: سلّم الملف لمصمّم لم يرَ Steady من قبل، واطلب منه بناء شاشة Settings، وراقب. إذا سأل «أيّ زر أستخدم؟» أو «هل هذا هو التركوازي الحقيقي؟»، فقد فشلت المجموعة، مهما كانت الـ components مصقولة.

هذا الدرس يحوّل القطع من الدروس 3.1 إلى 3.4 إلى شيء يجتاز ذلك الاختبار.

ما الذي يدخل في مجموعة Steady

ابدأ من الشاشات، لا من قائمة components لدى تطبيقات أخرى. تصفّح شاشات Today وHabit detail وNew habit، وسجّل كل عنصر يظهر أكثر من مرة أو له حالات. هذا الجرد هو المجموعة:

سبعة components تغطّي الشاشات الثلاث. قاوم إضافة المزيد حتى تحتاجه شاشة. فكل component تضيفه يجب إبقاؤه متزامنًا مع الـ variables والـ modes والتسمية إلى الأبد.

هيكلة الملف

ضع المجموعة في ملف مستقل، Steady Kit، فيه بضع صفحات:

• Cover: اسم المجموعة، ومسؤول عنها، وحالتها (“In progress” أو “Stable”)، وتاريخ آخر نشر.
• Foundations: عيّنات لكل لون دلالي في الوضعين الفاتح والداكن، وسلّم أحجام الخط، وسلّما المسافات ونصف قطر الزوايا. هذه توثيق بصري للـ variables، فيرى الناس النظام بنظرة واحدة.
• Components: ‏section لكل component، يضمّ الـ component set، وبضع instances كأمثلة في استخدام واقعي، وملاحظات استخدام قصيرة بنص عادي (“Use Ghost buttons for low-priority actions next to a Primary”).
• Playground: مساحة تجارب يجرّب فيها الناس الـ instances دون لمس الـ components.

ويحصل كل component أيضًا على وصف في لوحة خصائصه: جملة أو جملتان عن متى يُستخدم، مع رابط إلى توثيق أكمل إن وُجد. يظهر الوصف حين يمرّر الناس المؤشّر فوق الـ component في لوحة Assets، وحين يفحصه المطوّرون في Dev Mode، فيرافق الـ component أينما ذهب.

قائمة فحص الـ component

قبل أن يُعتبر أي component منتهيًا، يجتاز الفحوص نفسها. كتابتها هي ما يحوّل الذوق الشخصي إلى معيار للفريق:

[ ] Built with auto layout; no hand-placed children
[ ] Every color, spacing and radius bound to a semantic variable
[ ] All states designed: default, pressed, focused, disabled (and error for inputs)
[ ] Checked in Light and Dark modes, contrast re-measured in both
[ ] Tested with extreme content: long label, empty value, larger text
[ ] Resized to its minimum and maximum sensible widths
[ ] Properties and values named by meaning, matching the code where possible
[ ] Description written; usage example placed on the Components page

في خطتي Organization وEnterprise، وقت كتابة هذا الدرس، تستطيع ميزة Check designs في Figma فحص تحديد ما بحثًا عن قيم مكتوبة يدويًا يجب أن تكون variables، واقتراح بدائل من المكتبة. وفي الخطط الأخرى، حدّد component واقرأ التعبئات وقيم الـ gap والـ padding في الشريط الجانبي الأيمن: رمز hex خام أو رقم غير مرتبط يلفت النظر فورًا.

نشر المكتبة

النشر يجعل الـ components والـ styles والـ variables في المجموعة متاحة للملفات الأخرى في فريقك أو مؤسستك. وقت كتابة هذا الدرس، تنشر من خيارات المكتبة في لوحة Assets، والمكتبات تتطلّب خطة مدفوعة أو خطة Education. كل نشر يطلب وصفًا للتغييرات. اكتبه للشخص الذي سيتلقّاه: “Habit row padding is now 12/16 to match the 8-point scale; no action needed” أفضل من “updates”.

الملفات التي تستخدم المكتبة ترى أن هناك تحديثات متاحة وتقبلها حين تكون جاهزة، فلا يصل أي تغيير في المجموعة بصمت في منتصف عمل أحدهم. ولهذا أيضًا تستحقّ التغييرات الكاسرة (breaking changes)، مثل إعادة تسمية خاصية، تحذيرًا واضحًا في ملاحظات النشر.

اكتمل القسم 3: لدى Steady مجموعة صغيرة موثّقة بثيمات. القسم 4 يجعلها تتحرّك بالـ prototype، ويتأكّد من أن الجميع يستطيع استخدامها، ويضعها في أيدي المطوّرين.