الـ Components والـ Instances

بنهاية القسم 2 صار صف العادة موجودًا في شاشة Today، ومرّتين في Habit detail (“Similar habits”)، ومرة في نتيجة بحث. ثم يتغيّر المطلوب: الصفوف تحتاج نصف قطر زوايا 16 px بدل 12. تجد ثلاث نسخ من الأربع. أما الرابعة فتُطلق بنصف القطر القديم، وينشر مستخدم دقيق الملاحظة لقطة شاشة.

الـ components موجودة لكي يعيش القرار التصميمي في مكان واحد.

الـ Main components والـ Instances

حدّد frame صف العادة واضغط Cmd+Option+K (Ctrl+Alt+K على Windows)، أو استخدم زر إنشاء الـ component في شريط الأدوات. يصبح الـ frame ‏main component، ويظهر بأيقونة component في لوحة الطبقات. إنه مصدر الحقيقة. انقله إلى صفحة Kit التي أنشأتها في الدرس 1.1، فلا تحتوي الشاشات إلا استخداماته.

كل نسخة تضعها من الآن فصاعدًا هي instance: نسخة مرتبطة. اسحب واحدة من لوحة Assets، أو انسخ الـ main component والصقه. غيّر الـ main component فتتحدّث كل الـ instances، فورًا في هذا الملف، وفي الملفات الأخرى بعد أن تنشره كمكتبة (الدرس 3.5).

الـ Overrides: ما يُسمح للـ instance بتغييره

الـ instances ليست مجمّدة. يمكنك تطبيق override على المحتوى والمظهر في أي instance: تغيير النص (“Read 20 pages” إلى “Drink water”)، أو تغيير تعبئة، أو إخفاء طبقة، أو استبدال instance متداخلة بـ component آخر. هذه تعديلات يومية ولا تكسر الرابط.

ما لا يمكنك تغييره في الـ instance هو بنيتها. لا يمكنك إضافة طبقة، ولا حذف واحدة، ولا إعادة ترتيب الأبناء؛ يمكنك فقط إخفاء ما هو موجود. (الاستثناء الوحيد هو الـ slot، أي منطقة يعلّمها صانع الـ component كمساحة مفتوحة لمحتوى حرّ، وستتعرّف إليها في الدرس التالي.) هذا الحدّ مقصود. البنية مهمّة الـ component، ولو استطاعت كل instance أن تعيد ترتيب نفسها، لما بقي هناك component.

للـ overrides قاعدة مهمّة واحدة: الخاصية التي طُبّق عليها override تتوقّف عن اتّباع الـ main component. إذا غيّرت لون الـ streak في صف واحد إلى الأحمر من أجل نموذج “streak at risk”، ثم تغيّر لاحقًا لون الـ streak في الـ main component، فسيحتفظ ذلك الصف بلونه الأحمر. يحتفظ Figma بالـ override لأنه يفترض أنك قصدته. ولإعادة خاصية إلى الاتّساق، استخدم reset overrides من خيارات الـ instance في الشريط الجانبي الأيمن.

ابنِ الصغير ثم ضعه داخل الكبير

انظر إلى صف العادة واعثر على القطع التي تظهر في أماكن أخرى. زر التعليم يظهر أيضًا في Habit detail. وأيقونة العادة، وهي مربّع بزوايا مستديرة فيه رمز، تظهر في منتقي الأيقونات في لوحة New habit. اصنع هذه الـ components أولًا، ثم استخدم instances منها داخل الـ component ‏Habit row:

Kit page
├─ Check button          main component
├─ Habit icon            main component
└─ Habit row             main component
   ├─ Habit icon         instance
   ├─ Text stack         frame
   │  ├─ Habit name      text
   │  └─ Streak          text
   └─ Check button       instance

الآن أي إصلاح لزر التعليم، مثل حلقة تركيز أوضح، يصل إلى كل صف عادة في كل شاشة وإلى الزر المستقل في Habit detail. ويبقى كل مستوى صغيرًا بما يكفي لفهمه.

سمِّ الـ components كما سمّيت الطبقات: حسب الدور. يجمّع Figma الـ components في لوحة Assets حسب الأسماء المفصولة بشرطة مائلة، فيظهر Controls/Check button وControls/Chip معًا تحت Controls. أبقِ البنية ضحلة؛ مستويان يكفيان عادةً لمجموعة بهذا الحجم.

الفصل (Detach): مخرج الطوارئ

يمكنك فصل instance ‏(Cmd+Option+B / Ctrl+Alt+B)، فتتحوّل إلى frame عادي بلا رابط. أحيانًا يكون هذا صحيحًا: رسم تسويقي يستعير مظهر صف، أو استكشاف لمرة واحدة في صفحة Scratch. أما في شاشة منتج، فالـ instance المفصولة خطأ مؤجّل. سيفوتها كل إصلاح، ولن يتذكّر أحد وجودها حتى ينشر مستخدم لقطة شاشة.

صار صفّك component واحدًا بـ instances مرتبطة. لكن Steady يحتاج الصف بعدّة حالات: غير معلَّم، ومعلَّم، وفائت بالأمس. صنع component منفصل لكل حالة سيعيد مشكلة النسخ من جديد. الـ Variants والـ Component properties تحلّ ذلك في الدرس التالي.