المجموعة الموجودة في رأسك فقط ليست مجموعة. اختبار صوفيا بسيط: سلّم الملف لمصمّم لم يرَ Steady من قبل، واطلب منه بناء شاشة Settings، وراقب. إذا سأل «أيّ زر أستخدم؟» أو «هل هذا هو التركوازي الحقيقي؟»، فقد فشلت المجموعة، مهما كانت الـ components مصقولة.
\nهذا الدرس يحوّل القطع من الدروس 3.1 إلى 3.4 إلى شيء يجتاز ذلك الاختبار.
\nابدأ من الشاشات، لا من قائمة components لدى تطبيقات أخرى. تصفّح شاشات Today وHabit detail وNew habit، وسجّل كل عنصر يظهر أكثر من مرة أو له حالات. هذا الجرد هو المجموعة:
\n| الـ Component | \nالـ Variant properties | \nخصائص أخرى | \n
|---|---|---|
| Button | \nType، State، Size | \nLabel (text)، Show icon (boolean)، Icon (instance swap) | \n
| Check button | \nState: To do، Done، Missed | \nلا يوجد | \n
| Habit icon | \nلا يوجد | \nGlyph (instance swap) | \n
| Habit row | \nState: To do، Done، Missed | \nName (text)، Show streak (boolean)، Icon (instance swap) | \n
| Chip | \nSelected: true، false | \nLabel (text) | \n
| Text field | \nState: Default، Focused، Error، Disabled | \nLabel، Hint (text) | \n
| Tab bar | \nActive: Today، Stats، Settings | \nلا يوجد | \n
سبعة components تغطّي الشاشات الثلاث. قاوم إضافة المزيد حتى تحتاجه شاشة. فكل component تضيفه يجب إبقاؤه متزامنًا مع الـ variables والـ modes والتسمية إلى الأبد.
\nضع المجموعة في ملف مستقل، Steady Kit، فيه بضع صفحات:
ويحصل كل component أيضًا على وصف في لوحة خصائصه: جملة أو جملتان عن متى يُستخدم، مع رابط إلى توثيق أكمل إن وُجد. يظهر الوصف حين يمرّر الناس المؤشّر فوق الـ component في لوحة Assets، وحين يفحصه المطوّرون في Dev Mode، فيرافق الـ component أينما ذهب.
\nقبل أن يُعتبر أي component منتهيًا، يجتاز الفحوص نفسها. كتابتها هي ما يحوّل الذوق الشخصي إلى معيار للفريق:
\n[ ] Built with auto layout; no hand-placed children\n[ ] Every color, spacing and radius bound to a semantic variable\n[ ] All states designed: default, pressed, focused, disabled (and error for inputs)\n[ ] Checked in Light and Dark modes, contrast re-measured in both\n[ ] Tested with extreme content: long label, empty value, larger text\n[ ] Resized to its minimum and maximum sensible widths\n[ ] Properties and values named by meaning, matching the code where possible\n[ ] Description written; usage example placed on the Components pageفي خطتي Organization وEnterprise، وقت كتابة هذا الدرس، تستطيع ميزة Check designs في Figma فحص تحديد ما بحثًا عن قيم مكتوبة يدويًا يجب أن تكون variables، واقتراح بدائل من المكتبة. وفي الخطط الأخرى، حدّد component واقرأ التعبئات وقيم الـ gap والـ padding في الشريط الجانبي الأيمن: رمز hex خام أو رقم غير مرتبط يلفت النظر فورًا.
\n\nالنشر يجعل الـ components والـ styles والـ variables في المجموعة متاحة للملفات الأخرى في فريقك أو مؤسستك. وقت كتابة هذا الدرس، تنشر من خيارات المكتبة في لوحة Assets، والمكتبات تتطلّب خطة مدفوعة أو خطة Education. كل نشر يطلب وصفًا للتغييرات. اكتبه للشخص الذي سيتلقّاه: “Habit row padding is now 12/16 to match the 8-point scale; no action needed” أفضل من “updates”.
\nالملفات التي تستخدم المكتبة ترى أن هناك تحديثات متاحة وتقبلها حين تكون جاهزة، فلا يصل أي تغيير في المجموعة بصمت في منتصف عمل أحدهم. ولهذا أيضًا تستحقّ التغييرات الكاسرة (breaking changes)، مثل إعادة تسمية خاصية، تحذيرًا واضحًا في ملاحظات النشر.
\n\nاكتمل القسم 3: لدى Steady مجموعة صغيرة موثّقة بثيمات. القسم 4 يجعلها تتحرّك بالـ prototype، ويتأكّد من أن الجميع يستطيع استخدامها، ويضعها في أيدي المطوّرين.
\n","toc":[{"id":"sec-1","text":"ما الذي يدخل في مجموعة Steady","level":2},{"id":"sec-2","text":"هيكلة الملف","level":2},{"id":"sec-3","text":"قائمة فحص الـ component","level":2},{"id":"sec-4","text":"نشر المكتبة","level":2}],"takeaways":["تكون المجموعة (kit) مفيدة حين يستطيع شخص آخر أن يجد الـ component ويفهمه ويستخدمه دون أن يسألك، لذا تهمّ البنية والتوثيق بقدر ما تهمّ الـ components نفسها.","ابنِ المجموعة من الأنماط التي تتكرّر فعلًا في الشاشات، ولا تضف component إلا حين تحتاجه شاشة حقيقية.","يجب أن يجتاز كل component قائمة الفحص نفسها، التي تغطّي الـ Auto layout والـ variables والحالات والوضعين الفاتح والداكن والمحتوى المتطرّف والوصف.","نشر المكتبة يتيح للملفات الأخرى استخدام المجموعة، ويجب أن يشرح كل نشر ما الذي تغيّر ليستطيع المشتركون مراجعة التحديثات.","الأسماء واجهة استخدام؛ اختر اصطلاحًا واحدًا لتسمية الـ components والخصائص والقيم واستخدمه في كل مكان."],"further":[{"title":"Lesson 3, Build your design system (Figma)","url":"https://help.figma.com/hc/en-us/articles/14548865734679-Lesson-3-Build-your-design-system"},{"title":"Guide to libraries in Figma","url":"https://help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma"},{"title":"Check designs in Figma","url":"https://help.figma.com/hc/en-us/articles/39592284074263-Check-designs-in-Figma"}],"quiz":[{"q":"يقترح مصمّم بناء Carousel وData table وDate range picker لمجموعة Steady «لنكون مستعدّين». لا تستخدمها أي شاشة في Steady. ماذا يجب أن تقول صوفيا؟
","options":[{"text":"ابنِها الآن، لأن إضافة الـ components لاحقًا مكلفة.","why":"الـ components المبنية دون استخدام حقيقي تكون غالبًا خاطئة حين يأتي الاستخدام الحقيقي، وتحتاج صيانة في الأثناء."},{"text":"ابنِها لكن أخفِها من المكتبة.","why":"مخفية أو لا، فهي تكلّف وقتًا لصنعها وإبقائها متزامنة مع الـ variables والـ modes."},{"text":"انتظر حتى تحتاجها شاشة، ثم ابنِها من ذلك الاستخدام الحقيقي.","why":"صحيح. المجموعة تنمو من الأنماط المتكرّرة في الشاشات الحقيقية، وهذا يُبقيها صغيرة ويجعل لكل component مبرّرًا."},{"text":"انسخها من مجموعة في Figma Community لتوفير الوقت.","why":"الـ components المستعارة تجلب tokens شخص آخر وأسماءه وافتراضاته، فنادرًا ما تناسب دون إعادة عمل."}],"answer":2},{"q":"تنشر تحديثًا لمجموعة Steady يغيّر الـ padding في صف العادة. ماذا يحدث في ملف شاشات يستخدم المكتبة؟
","options":[{"text":"تتغيّر الـ instances في ذلك الملف فورًا دون أي إشعار.","why":"تحديثات المكتبة تُعرض على الملفات المشتركة للمراجعة، ولا تُطبَّق بصمت."},{"text":"يتلقّى الملف إشعارًا بوجود تحديثات، ويراجعها أحدهم ويقبلها.","why":"صحيح. يرى المشتركون أن هناك تحديثات متاحة ويختارون متى يقبلونها، ولهذا تهمّ ملاحظات النشر."},{"text":"لا شيء، لأن الـ instances القادمة من المكتبات لا تتحدّث أبدًا.","why":"تتحدّث فعلًا بمجرّد أن يقبل الملف تحديث المكتبة. هذا هو الهدف من المكتبة أصلًا."},{"text":"يُكرَّر ملف الشاشات للاحتفاظ بالنسخة القديمة.","why":"لا يكرّر Figma الملفات عند تحديثات المكتبة. سجلّ النسخ (version history) يغطّي التراجع."}],"answer":1},{"q":"أيّ بند ينتمي إلى قائمة فحص الـ components في Steady لأنه يلتقط أكبر عدد من الأخطاء قبل التسليم؟
","options":[{"text":"الـ component يبدو جيدًا بحجمه الافتراضي في الوضع الفاتح.","why":"هناك صُمّم أصلًا، فهو ينجح في الغالب. الأخطاء تكمن عند الأطراف."},{"text":"للـ component ظلّ.","why":"الظلال اختيار جمالي، لا فحص جودة."},{"text":"الـ component يستخدم أحدث ميزة متاحة في Figma.","why":"الميزات الأحدث ليست تلقائيًا أفضل لمن يستخدمون المجموعة."},{"text":"الـ component اختُبر بمحتوى متطرّف، وفي الوضعين الفاتح والداكن، وبأضيق عرض وأعرضه.","why":"صحيح. التسميات الطويلة والوضع الداكن وتغيير الحجم هي حيث تنكسر الـ components، لذا تفرض القائمة هذه الاختبارات."}],"answer":3}],"exercise":{"kind":"spot-bug","language":"text","code":"Components page\n Section: Buttons\n Button component set Type: Primary | Secondary | Ghost\n State: Default | Pressed | Disabled\n Label: text Show icon: boolean Icon: instance swap\n Button 2 component copy of Button/Primary with an icon\n Section: Controls\n Check button component set State: To do | Done | Missed\n Chip component set Selected: true | false Label: text\n Toggle component set State: Teal | Grey\n Section: Rows\n Habit row component set State: To do | Done | Missed\n Name: text Show streak: boolean\n Row background fill: #FFFFFF\n Text field component set State: Default | Focused | Error | Disabled","bugLines":[6,10,14],"title":"دقّق المجموعة قبل النشر","prompt":"قبل أول نشر لـ Steady Kit، تطلب منك صوفيا تدقيق صفحة Components. ها هي مكتوبة كنص. افحصها مقابل قائمة فحص الـ component من الدرس، مع التركيز على التكرار والتسمية والـ variables (فالحالات لها مراجعة خاصة في الدرس 4.2)، وحدّد كل سطر يجب أن يوقف النشر.
\n","hints":["ابحث عن أي شيء يكرّر component موجودًا بدل أن يستخدم خصائصه.","تحقّق من أن القيم مسمّاة حسب المعنى، وأن الألوان تأتي من الـ variables.","ثلاثة أسطر: main component شبه مكرّر، وقيم مسمّاة حسب المظهر، وتعبئة مكتوبة يدويًا."],"explanation":"السطر 6: Button 2 هو main component ثانٍ يكرّر Button مع أيقونة. لدى Button بالفعل boolean باسم Show icon وinstance swap باسم Icon، فاحذف النسخة واستخدم الخاصية؛ وإلا فسيجب إجراء كل إصلاح مرّتين. السطر 10: قيمتا Toggle Teal | Grey تصفان المظهر؛ وفي الوضع الداكن أو بعد تغيير الهوية البصرية تصبحان مضلّلتين. استخدم On | Off. السطر 14: خلفية الصف لها تعبئة مكتوبة يدويًا #FFFFFF، فستبقى بيضاء في الوضع الداكن. اربطها بـ color/surface/default.