يبدو الزر الأساسي في Steady بسيطًا حتى تكتب قائمة بما يحتاجه: أنواع primary وsecondary وghost؛ وحالات default وpressed وdisabled؛ وحجمان medium وsmall؛ وأيقونة اختيارية؛ وأي تسمية. ابنِ كلًّا من ذلك كـ component منفصل وستحصل على عشرات النسخ شبه المتطابقة، ومصمّم يختار بين Button Primary Small Disabled With Icon وجيرانه.
الـ Variants والـ Component properties تحوّل هذه الكومة إلى component واحد ببضعة مفاتيح واضحة.
\nالـ component set يحمل components مترابطة تُسمّى variants. كل variant تصفه variant properties، تُكتب كأزواج Property=Value. لزر Steady:
Type: Primary وSecondary وGhostState: Default وPressed وDisabledSize: Medium وSmallتنشئ الـ variants إمّا بتحديد عدّة components موجودة والنقر على Combine as variants، أو بتحديد component وإضافة variant من الشريط الجانبي الأيمن، ثم إعادة تسمية الخصائص والقيم. يعتبر Figma الـ variant الموجود في الزاوية العلوية اليسرى من المجموعة هو الافتراضي.
\nفي الـ instance، لا يعود الناس يبحثون في الـ assets. يضعون Button واحدًا ويختارون القيم من قوائم منسدلة: Type Secondary، وState Disabled. الأسماء التي تختارها هنا هي الأسماء التي سيراها المطوّرون في Dev Mode، فاجعلها تطابق الكود حيث تستطيع. إذا كان الكود يقول variant="secondary"، ففكّر في تسمية خاصيتك Variant بدل Type، واتّفق على ذلك مع فريق الهندسة مبكرًا.
الـ variant properties تتضاعف. ثلاثة أنواع × ثلاث حالات × حجمان = 18 variant. أضف variant property باسم Icon بقيمتين فيصبح العدد 36، وكل واحد منها يجب بناؤه وإبقاؤه متزامنًا. هذا يُسمّى انفجار الـ variants (variant explosion)، وهو أشيع طريقة تصبح بها أنظمة التصميم غير قابلة للصيانة.
الـ Component properties تتولّى الاختلافات التي لا تحتاج نسخة مصمّمة بشكل منفصل:
\nShow icon true أو false. طبقة واحدة، بلا variants جديدة.Label = “Save habit”. يعدّله الناس من لوحة الخصائص دون البحث عن الطبقة.Icon = Plus أو Check أو Bell. ويمكنك ضبط preferred values، أي قائمة قصيرة من الأيقونات المعقولة، حتى لا يضع أحد سلّة مهملات على زر الحفظ.تضيف هذه الخصائص على الـ main component: حدّد الطبقة، ثم استخدم خيار الخاصية بجانب ظهورها (boolean)، أو محتواها النصي (text)، أو الـ instance المتداخلة فيها (instance swap) في الشريط الجانبي الأيمن، أو أنشئ خاصية من قسم الخصائص واربطها بطبقة.
\n\nأضف خصائص text وboolean وinstance swap إلى الـ component الأول قبل أن تضيف المزيد من الـ variants. الـ variants الجديدة المنشأة منه ترث روابط تلك الخصائص. إذا بنيت 18 variant أولًا، فستربط طبقة التسمية 18 مرة.
\nصف العادة يُعامَل بالطريقة نفسها:
\nHabit row (component set)\n State variant To do | Done | Missed\n Name text "Read 20 pages"\n Show streak boolean true\n Icon instance swap Habit icon/Book (preferred: Book, Water, Run, Sleep)ثلاثة variants بدل العشرات، لأن Done وMissed يعيدان تنسيق عدّة طبقات (تعبئة زر التعليم، ولون الاسم، وخط يتوسّطه) بينما كل ما عدا ذلك خاصية.
\nحين يضمّ component components أخرى، يضطرّ الناس عادةً إلى التعمّق في الطبقات للوصول إلى خصائص الداخلية منها. وقت كتابة هذا الدرس، يستطيع صانع الـ component كشف الـ instances المتداخلة (expose nested instances)، فتظهر خصائص Check button نفسها بجانب خصائص Habit row في اللوحة.
\n\nصار في مجموعتك عدد قليل من الـ components المرنة. لكن ألوانها وأرقامها ما زالت تُكتب يدويًا. في الدرس التالي تنقل هذه القيم إلى الـ styles والـ variables.
\n","toc":[{"id":"sec-1","text":"الـ Variants: مجموعة واحدة، نسخ كثيرة","level":2},{"id":"sec-2","text":"الـ Component properties: مفاتيح بلا مضاعفة","level":2},{"id":"sec-3","text":"ترتيب البناء مهم","level":2}],"takeaways":["الـ Variants تجمع نسخ الـ component في component set واحد، وتصفها خصائص مثل Type وState.","استخدم الـ variants للاختلافات التي تعيد تنسيق عدّة طبقات دفعة واحدة، مثل الحالات والأنواع والأحجام.","استخدم خاصية boolean للإظهار والإخفاء، وخاصية text للتسميات القابلة للتعديل، وخاصية instance swap لاختيار component متداخل.","كل variant property تضاعف عدد الـ variants، بينما خصائص boolean وtext وinstance swap لا تفعل ذلك.","الـ Slots، وقت كتابة هذا الدرس، تعلّم مناطق في الـ component يمكن للـ instances أن تضع فيها محتوى حرًّا دون فصل."],"further":[{"title":"Create and use variants","url":"https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants"},{"title":"Explore component properties","url":"https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties"},{"title":"The difference between slots, instance swaps, and variants","url":"https://help.figma.com/hc/en-us/articles/38741465279895-The-difference-between-slots-instance-swaps-and-variants"}],"quiz":[{"q":"لزر Steady ثلاث variant properties: Type (Primary, Secondary, Ghost) وState (Default, Pressed, Disabled) وSize (Medium, Small). يريد زميلك إضافة “with icon” و"without icon" كـ variant property أخرى. كم variant سينتج عن ذلك، وما البديل؟
","options":[{"text":"36 variant. وخاصية boolean للأيقونة تُبقي العدد عند 18.","why":"صحيح. 3 × 3 × 2 = 18، وvariant property بقيمتين تضاعف العدد. أما الـ boolean فيُظهر طبقة الأيقونة أو يخفيها دون variants جديدة."},{"text":"20 variant. ولا يوجد بديل.","why":"الـ variant properties تتضاعف ولا تُجمع. والـ booleans موجودة تحديدًا للإظهار والإخفاء."},{"text":"18 variant. لأن Figma يدمج التخطيطات المكرّرة تلقائيًا.","why":"لا يدمج Figma الـ variants أبدًا. كل تركيبة variant منفصل عليك صيانته."},{"text":"36 variant. وخاصية instance swap تُبقي العدد عند 18.","why":"العدد صحيح، لكن الـ instance swap يختار أيّ أيقونة، لا هل تظهر. الظهور مهمّة الـ boolean."}],"answer":0},{"q":"أيّ نوع من الخصائص يناسب اسم العادة في الـ component Habit row؟
","options":[{"text":"variant property بقيمة لكل عادة.","why":"أسماء العادات محتوى غير محدود يكتبه المستخدم. الـ variants لمجموعة صغيرة ثابتة من النسخ المصمّمة."},{"text":"خاصية boolean.","why":"الـ booleans تُظهر الطبقة أو تخفيها فقط. لا يمكنها حمل محتوى نصي."},{"text":"خاصية text، ليمكن تعديل الاسم من لوحة الخصائص أو على لوحة العمل.","why":"صحيح. خاصية text تكشف النص فيستطيع الناس تغييره دون البحث في الطبقات."},{"text":"خاصية instance swap.","why":"الـ instance swap يختار component متداخلًا. الاسم نص عادي، لا component."}],"answer":2},{"q":"متى يجب أن يكون الاختلاف variant بدل boolean؟
","options":[{"text":"حين يُستخدم في أكثر من ثلاث شاشات.","why":"عدد مرّات الاستخدام لا يحدّد نوع الخاصية. طبيعة التغيير هي التي تحدّده."},{"text":"حين يعيد الاختلاف تنسيق عدّة طبقات معًا، مثل حالة Pressed التي تغيّر التعبئة ولون التسمية والظل.","why":"صحيح. الـ booleans تبدّل ظهور طبقة واحدة فقط. أما التغييرات البصرية المنسّقة فتحتاج variant مصمّمًا."},{"text":"حين يطلب المطوّر enum.","why":"رأي المطوّر قيّم، لكن السبب التصميمي هو عدد الطبقات التي تتغيّر وكيفية تغيّرها."},{"text":"دائمًا، لأن الـ variants أحدث من الـ booleans.","why":"الـ variants ليست أحدث، واعتمادها افتراضيًا يسبّب انفجار الـ variants."}],"answer":1},{"q":"يجب أن يحمل الـ component الخاص بلوحة New habit محتوى مختلفًا في مسارات مختلفة (نموذج، تأكيد، شبكة أيقونات). ما الأنسب وقت كتابة هذا الدرس؟
","options":[{"text":"variant لكل محتوى ممكن.","why":"كل مسار جديد سيحتاج variant جديدًا، وستكبر المجموعة بلا نهاية."},{"text":"فصل اللوحة في كل استخدام.","why":"اللوحات المفصولة يفوتها كل إصلاح مستقبلي لترويسة اللوحة ومقبضها والـ padding فيها."},{"text":"boolean لكل عنصر قد يظهر.","why":"الـ booleans لا تستطيع إلا إخفاء طبقات موجودة أصلًا، فستحمل اللوحة كل عنصر ممكن."},{"text":"slot لجسم اللوحة، فتحمل كل instance محتواها الخاص بينما يبقى إطار اللوحة مرتبطًا.","why":"صحيح. الـ slots موجودة لهذا بالضبط، أي منطقة محتوى مرنة داخل component مرتبط."}],"answer":3}],"exercise":{"kind":"order","items":["build-base","make-component","add-props","add-variants","style-variants","test-instance"],"title":"ابنِ component الزر بالترتيب الصحيح","prompt":"تبني زر Steady: Type وState كـ variant properties، إضافة إلى خاصية text للتسمية، وboolean لإظهار الأيقونة، وinstance swap لاختيار الأيقونة. رتّب الخطوات بالترتيب الذي يجنّبك إعادة العمل.
\n","hints":["لا يمكن إنشاء component property إلا على شيء هو component بالفعل.","الـ variants الجديدة تنسخ روابط الخصائص من الـ component الذي أُنشئت منه.","الـ frame الأساسي، ثم الـ component، ثم الخصائص، ثم الـ variants، ثم التنسيق، ثم الاختبار."],"explanation":"ابدأ بـ frame مبني جيدًا بـ Auto layout فيه طبقتا Icon وLabel مسمّاتان، لأن كل ما يأتي بعده يرث بنيته. حوّله إلى component، ثم أضف خصائص text وboolean وinstance swap ما دام هناك variant واحد فقط تربطها به. بعد ذلك أضف الـ variants وسمِّ الـ variant properties Type وState؛ فيرث كل variant جديد روابط تلك الخصائص. ثم أعِد تنسيق كل variant حسب نوعه وحالته. وأخيرًا اختبر instance بتبديل كل خاصية، بما في ذلك التسميات الطويلة وإخفاء الأيقونة، لتثبت أن لا شيء ينكسر قبل أن يستخدمه أحد غيرك.
\n","checkLabels":{},"itemText":{"build-base":"ابنِ الزر الأساسي الافتراضي كـ frame بـ Auto layout فيه طبقتا Icon وLabel مسمّاتان.","make-component":"حوّل الـ frame إلى main component.","add-props":"أضف خاصية text لـ Label، وboolean لـ Show icon، وinstance swap لـ Icon.","add-variants":"أضف variants وسمِّ الـ variant properties Type وState بقيمها.","style-variants":"أعِد تنسيق كل variant: ألوان secondary وghost، وحالتا pressed وdisabled.","test-instance":"ضع instance وبدّل كل خاصية، مع تسمية طويلة وأيقونة مخفية، لتتأكّد أن لا شيء ينكسر."}},"words":622,"readMinutes":4}