الـ Variants والـ Component properties

يبدو الزر الأساسي في Steady بسيطًا حتى تكتب قائمة بما يحتاجه: أنواع primary وsecondary وghost؛ وحالات default وpressed وdisabled؛ وحجمان medium وsmall؛ وأيقونة اختيارية؛ وأي تسمية. ابنِ كلًّا من ذلك كـ component منفصل وستحصل على عشرات النسخ شبه المتطابقة، ومصمّم يختار بين Button Primary Small Disabled With Icon وجيرانه.

الـ Variants والـ Component properties تحوّل هذه الكومة إلى component واحد ببضعة مفاتيح واضحة.

الـ Variants: مجموعة واحدة، نسخ كثيرة

الـ component set يحمل components مترابطة تُسمّى variants. كل variant تصفه variant properties، تُكتب كأزواج Property=Value. لزر Steady:

• Type: ‏Primary وSecondary وGhost
• State: ‏Default وPressed وDisabled
• Size: ‏Medium وSmall

تنشئ الـ variants إمّا بتحديد عدّة components موجودة والنقر على Combine as variants، أو بتحديد component وإضافة variant من الشريط الجانبي الأيمن، ثم إعادة تسمية الخصائص والقيم. يعتبر Figma الـ variant الموجود في الزاوية العلوية اليسرى من المجموعة هو الافتراضي.

في الـ instance، لا يعود الناس يبحثون في الـ assets. يضعون Button واحدًا ويختارون القيم من قوائم منسدلة: Type ‏Secondary، وState ‏Disabled. الأسماء التي تختارها هنا هي الأسماء التي سيراها المطوّرون في Dev Mode، فاجعلها تطابق الكود حيث تستطيع. إذا كان الكود يقول variant="secondary"، ففكّر في تسمية خاصيتك Variant بدل Type، واتّفق على ذلك مع فريق الهندسة مبكرًا.

الـ Component properties: مفاتيح بلا مضاعفة

الـ variant properties تتضاعف. ثلاثة أنواع × ثلاث حالات × حجمان = 18 variant. أضف variant property باسم Icon بقيمتين فيصبح العدد 36، وكل واحد منها يجب بناؤه وإبقاؤه متزامنًا. هذا يُسمّى انفجار الـ variants ‏(variant explosion)، وهو أشيع طريقة تصبح بها أنظمة التصميم غير قابلة للصيانة.

الـ Component properties تتولّى الاختلافات التي لا تحتاج نسخة مصمّمة بشكل منفصل:

• Boolean: يُظهر طبقة أو يخفيها. Show icon ‏true أو false. طبقة واحدة، بلا variants جديدة.
• Text: يكشف محتوى طبقة نص. Label = “Save habit”. يعدّله الناس من لوحة الخصائص دون البحث عن الطبقة.
• Instance swap: يختار أيّ component يملأ instance متداخلة. Icon = Plus أو Check أو Bell. ويمكنك ضبط preferred values، أي قائمة قصيرة من الأيقونات المعقولة، حتى لا يضع أحد سلّة مهملات على زر الحفظ.
• Slot: وقت كتابة هذا الدرس، نوع خاصية أحدث يعلّم منطقة يمكن للـ instances أن تحمل فيها محتواها الخاص، مثل جسم اللوحة السفلية، بينما يبقى كل ما حولها مرتبطًا.

تضيف هذه الخصائص على الـ main component: حدّد الطبقة، ثم استخدم خيار الخاصية بجانب ظهورها (boolean)، أو محتواها النصي (text)، أو الـ instance المتداخلة فيها (instance swap) في الشريط الجانبي الأيمن، أو أنشئ خاصية من قسم الخصائص واربطها بطبقة.

ترتيب البناء مهم

أضف خصائص text وboolean وinstance swap إلى الـ component الأول قبل أن تضيف المزيد من الـ variants. الـ variants الجديدة المنشأة منه ترث روابط تلك الخصائص. إذا بنيت 18 variant أولًا، فستربط طبقة التسمية 18 مرة.

صف العادة يُعامَل بالطريقة نفسها:

Habit row (component set)
  State      variant        To do | Done | Missed
  Name       text           "Read 20 pages"
  Show streak boolean       true
  Icon       instance swap  Habit icon/Book  (preferred: Book, Water, Run, Sleep)

ثلاثة variants بدل العشرات، لأن Done وMissed يعيدان تنسيق عدّة طبقات (تعبئة زر التعليم، ولون الاسم، وخط يتوسّطه) بينما كل ما عدا ذلك خاصية.

حين يضمّ component ‏components أخرى، يضطرّ الناس عادةً إلى التعمّق في الطبقات للوصول إلى خصائص الداخلية منها. وقت كتابة هذا الدرس، يستطيع صانع الـ component ‏كشف الـ instances المتداخلة (expose nested instances)، فتظهر خصائص Check button نفسها بجانب خصائص Habit row في اللوحة.

صار في مجموعتك عدد قليل من الـ components المرنة. لكن ألوانها وأرقامها ما زالت تُكتب يدويًا. في الدرس التالي تنقل هذه القيم إلى الـ styles والـ variables.