بنهاية القسم 2 صار صف العادة موجودًا في شاشة Today، ومرّتين في Habit detail (“Similar habits”)، ومرة في نتيجة بحث. ثم يتغيّر المطلوب: الصفوف تحتاج نصف قطر زوايا 16 px بدل 12. تجد ثلاث نسخ من الأربع. أما الرابعة فتُطلق بنصف القطر القديم، وينشر مستخدم دقيق الملاحظة لقطة شاشة.
\nالـ components موجودة لكي يعيش القرار التصميمي في مكان واحد.
\nحدّد 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).
\nالـ instances ليست مجمّدة. يمكنك تطبيق override على المحتوى والمظهر في أي instance: تغيير النص (“Read 20 pages” إلى “Drink water”)، أو تغيير تعبئة، أو إخفاء طبقة، أو استبدال instance متداخلة بـ component آخر. هذه تعديلات يومية ولا تكسر الرابط.
\nما لا يمكنك تغييره في الـ instance هو بنيتها. لا يمكنك إضافة طبقة، ولا حذف واحدة، ولا إعادة ترتيب الأبناء؛ يمكنك فقط إخفاء ما هو موجود. (الاستثناء الوحيد هو الـ slot، أي منطقة يعلّمها صانع الـ component كمساحة مفتوحة لمحتوى حرّ، وستتعرّف إليها في الدرس التالي.) هذا الحدّ مقصود. البنية مهمّة الـ component، ولو استطاعت كل instance أن تعيد ترتيب نفسها، لما بقي هناك component.
\nللـ overrides قاعدة مهمّة واحدة: الخاصية التي طُبّق عليها override تتوقّف عن اتّباع الـ main component. إذا غيّرت لون الـ streak في صف واحد إلى الأحمر من أجل نموذج “streak at risk”، ثم تغيّر لاحقًا لون الـ streak في الـ main component، فسيحتفظ ذلك الصف بلونه الأحمر. يحتفظ Figma بالـ override لأنه يفترض أنك قصدته. ولإعادة خاصية إلى الاتّساق، استخدم reset overrides من خيارات الـ instance في الشريط الجانبي الأيمن.
\n\nانظر إلى صف العادة واعثر على القطع التي تظهر في أماكن أخرى. زر التعليم يظهر أيضًا في Habit detail. وأيقونة العادة، وهي مربّع بزوايا مستديرة فيه رمز، تظهر في منتقي الأيقونات في لوحة New habit. اصنع هذه الـ components أولًا، ثم استخدم instances منها داخل الـ component Habit row:
\nKit page\n├─ Check button main component\n├─ Habit icon main component\n└─ Habit row main component\n ├─ Habit icon instance\n ├─ Text stack frame\n │ ├─ Habit name text\n │ └─ Streak text\n └─ Check button instanceالآن أي إصلاح لزر التعليم، مثل حلقة تركيز أوضح، يصل إلى كل صف عادة في كل شاشة وإلى الزر المستقل في Habit detail. ويبقى كل مستوى صغيرًا بما يكفي لفهمه.
\nسمِّ الـ components كما سمّيت الطبقات: حسب الدور. يجمّع Figma الـ components في لوحة Assets حسب الأسماء المفصولة بشرطة مائلة، فيظهر Controls/Check button وControls/Chip معًا تحت Controls. أبقِ البنية ضحلة؛ مستويان يكفيان عادةً لمجموعة بهذا الحجم.
يمكنك فصل instance (Cmd+Option+B / Ctrl+Alt+B)، فتتحوّل إلى frame عادي بلا رابط. أحيانًا يكون هذا صحيحًا: رسم تسويقي يستعير مظهر صف، أو استكشاف لمرة واحدة في صفحة Scratch. أما في شاشة منتج، فالـ instance المفصولة خطأ مؤجّل. سيفوتها كل إصلاح، ولن يتذكّر أحد وجودها حتى ينشر مستخدم لقطة شاشة.
صار صفّك component واحدًا بـ instances مرتبطة. لكن Steady يحتاج الصف بعدّة حالات: غير معلَّم، ومعلَّم، وفائت بالأمس. صنع component منفصل لكل حالة سيعيد مشكلة النسخ من جديد. الـ Variants والـ Component properties تحلّ ذلك في الدرس التالي.
\n","toc":[{"id":"sec-1","text":"الـ Main components والـ Instances","level":2},{"id":"sec-2","text":"الـ Overrides: ما يُسمح للـ instance بتغييره","level":2},{"id":"sec-3","text":"ابنِ الصغير ثم ضعه داخل الكبير","level":2},{"id":"sec-4","text":"الفصل (Detach): مخرج الطوارئ","level":2}],"takeaways":["الـ main component هو المصدر؛ والـ instances نسخ مرتبطة به تتحدّث حين يتغيّر.","يمكن للـ instances أن تطبّق overrides على المحتوى والمظهر، مثل النص والتعبئة والظهور والـ instances المتداخلة، لكن لا على بنية طبقاتها.","الخاصية التي طُبّق عليها override تتوقّف عن تلقّي التحديثات لتلك الخاصية وحدها، لذا طبّق أقل قدر ممكن من الـ overrides.","ابنِ الـ components الصغيرة أولًا وضعها داخل بعضها، فيصل إصلاح زر التعليم إلى كل صف يحتويه.","فصل الـ instance (detach) يقطعها عن الإصلاحات المستقبلية؛ اعتبره حلًّا أخيرًا، وغالبًا علامة على أن الـ component يحتاج خيارًا جديدًا."],"further":[{"title":"Guide to components in Figma","url":"https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma"},{"title":"Create components to reuse in designs","url":"https://help.figma.com/hc/en-us/articles/360038663154-Create-components-to-reuse-in-designs"}],"quiz":[{"q":"تغيّر نصف قطر الزوايا في الـ main component Habit row من 12 إلى 16. أيّ الصفوف تتحدّث؟
","options":[{"text":"الصفوف التي أُنشئت بعد التغيير فقط.","why":"الـ instances روابط حيّة. الموجودة منها تتحدّث أيضًا، لا الجديدة فقط."},{"text":"كل instance لم يُطبَّق على نصف قطر زواياها override.","why":"صحيح. الـ instances تتبع الـ main component باستثناء الخصائص التي طبّقت عليها override في تلك الـ instance."},{"text":"لا شيء، حتى تضغط زر نشر في الملف نفسه.","why":"داخل الملف الواحد تصل التغييرات إلى الـ instances فورًا. النشر لمشاركتها مع ملفات أخرى عبر مكتبة."},{"text":"كل الصفوف، بما فيها المفصولة.","why":"الصفوف المفصولة frames عادية بلا رابط، فلا تتلقّى تحديثات أبدًا."}],"answer":1},{"q":"يحتاج مصمّم أن يعرض صف عادة واحد سطر نص إضافيًا للـ “note”، ففصل الـ instance وأضاف النص. ما الخطوة الأفضل على المدى البعيد؟
","options":[{"text":"فصل كل الصفوف لتتطابق كلها.","why":"هذا يرمي نظام الـ components كله. كل إصلاح مستقبلي سيحتاج إلى تكرار يدوي."},{"text":"إبقاء النسخة المفصولة وإضافة تعليق يشرحها.","why":"التعليق لا يعيد ربطها. ستظل النسخة تنحرف مع تطوّر الـ component."},{"text":"إضافة طبقة ملاحظة اختيارية إلى الـ main component والتحكّم في ظهورها في كل instance.","why":"صحيح. حين يحتاج استخدام واحد شيئًا جديدًا، يحتاج الـ component عادةً خيارًا جديدًا، لا نسخة لمرة واحدة."},{"text":"تكرار الـ main component وتعديل النسخة المكرّرة.","why":"وجود اثنين من الـ main components شبه متطابقين يقسم كل إصلاح مستقبلي إلى اثنين."}],"answer":2},{"q":"لماذا تبني زر التعليم كـ component مستقل وتضعه داخل الـ component Habit row؟
","options":[{"text":"لأن Figma لا يسمح للـ component إلا باحتواء components أخرى.","why":"الـ components يمكن أن تحتوي أي طبقات. التداخل خيار لإعادة الاستخدام، لا قاعدة."},{"text":"لأن الـ components المتداخلة أرخص في التصدير.","why":"كلفة التصدير ليست السبب. الفائدة مصدر واحد لزر التعليم."},{"text":"لأن التداخل يخفي زر التعليم عن المطوّرين.","why":"التداخل يجعل البنية أوضح في Dev Mode، لا أخفى."},{"text":"لأن زر التعليم يظهر أيضًا في Habit detail، فيُبقي main component واحد المكانين متّسقين.","why":"صحيح. أصلح حلقة التركيز (focus ring) فيه مرة واحدة، فتتحدّث في كل صف وكل شاشة تستخدمه."}],"answer":3}],"exercise":{"kind":"choice","multiple":true,"options":["edit-text","hide-streak","swap-icon","change-fill","add-layer","reorder"],"correct":["edit-text","hide-streak","swap-icon","change-fill"],"title":"ماذا تستطيع الـ instance أن تفعل دون فصل؟","prompt":"تملأ شاشة Habit detail بـ instances من الـ component Habit row (يحتوي على instance من Habit icon، وكومة نصوص فيها Habit name وStreak، وinstance من Check button). لا يحتوي الـ component على slots. اختر كل تعديل يمكنك إجراؤه على instance مع إبقائها مرتبطة بالـ main component.
\n","hints":["الـ overrides تغيّر المحتوى والمظهر. أما البنية فتخصّ الـ main component.","الإخفاء مسموح؛ والحذف لا. استبدال instance متداخلة مسموح؛ وإضافة طبقة جديدة لا.","أربعة من الستة overrides. والاثنان اللذان يغيّران شجرة الطبقات ليسا كذلك."],"explanation":"النص والظهور والتعبئة واستبدال الـ instances المتداخلة كلها overrides: تغيّر ما تعرضه الـ instance لا طريقة بنائها، فتبقى مرتبطة. أما إضافة طبقة أو إعادة ترتيب الأبناء فتغيّر البنية، ولا يتحكّم فيها إلا الـ main component (باستثناء الـ slots، وهذا الـ component لا يحتوي عليها). إذا احتاج استخدام واحد فعلًا عنصرًا إضافيًا، فأضفه إلى الـ main component كطبقة اختيارية، ثم أخفِه أو أظهره في كل instance.
\n","checkLabels":{},"optionText":{"edit-text":{"text":"غيّر اسم العادة إلى “Walk 8,000 steps”.","why":"صحيح. النص أكثر الـ overrides شيوعًا، ويُبقي الرابط سليمًا."},"hide-streak":{"text":"أخفِ طبقة نص Streak لعادة جديدة تمامًا.","why":"صحيح. الظهور override. الطبقة ما زالت موجودة؛ إنها مخفية فقط في هذه الـ instance."},"swap-icon":{"text":"استبدل الـ instance المتداخلة Habit icon بـ component أيقونة مختلف.","why":"صحيح. استبدال instance متداخلة override، والدرس 3.2 يشرح كيف تنتقي الخيارات المتاحة."},"change-fill":{"text":"غيّر تعبئة خلفية الصف لنموذج يعرض صفًا مميّزًا.","why":"صحيح، هذا مسموح. تذكّر أن هذا الصف لن يتبع بعد الآن تعبئة الـ main component."},"add-layer":{"text":"أضف طبقة نص جديدة “Note” تحت الـ streak.","why":"الـ instances لا يمكنها اكتساب طبقات خارج slot. أضف بدلًا من ذلك طبقة ملاحظة اختيارية إلى الـ main component."},"reorder":{"text":"انقل Check button إلى يسار الأيقونة.","why":"إعادة ترتيب الأبناء تغيّر البنية، وهذا ما لا تستطيعه الـ instances. التخطيط المناسب لليد اليسرى يكون خيارًا في الـ component."}}},"words":651,"readMinutes":4}