النموذج الثابت يُظهر شكل Steady. أما الـ prototype (النموذج التفاعلي) فيُظهر إحساسه: هل يعطي النقر على زر التعليم استجابة مُرضية، وهل تأتي لوحة New habit من حيث يتوقّع الناس، وهل يستطيع أحدهم إيجاد طريق العودة؟ اختبار هذه الأسئلة بـ prototype يكلّف بضع ساعات. واختبارها بعد التطوير يكلّف sprint كاملًا.
\nبدّل الشريط الجانبي الأيمن إلى تبويب Prototype. حدّد طبقة، واسحب مقبض الوصلة الذي يظهر إلى frame وجهة، فتكون قد أنشأت تفاعلًا (interaction). لكل تفاعل ثلاثة أجزاء.
\nالـ trigger هو ما يفعله الشخص. وقت كتابة هذا الدرس، تشمل الـ triggers On click/On tap وOn drag وWhile hovering وWhile pressing وKey/Gamepad وMouse enter وMouse leave وMouse down وMouse up وAfter delay. في تطبيق الهاتف تستخدم غالبًا On tap، إضافة إلى On drag لإيماءات السحب.
\nالـ action هو ما يحدث. أشيعها Navigate to إلى frame آخر، وBack، وChange to إلى variant آخر من component، وOpen overlay، وSwap overlay، وClose overlay، وScroll to. والـ prototypes المتقدّمة يمكنها أيضًا ضبط variables واستخدام الشروط، وهذا يعتمد على الخطة.
\nالـ animation هي طريقة الحركة: Instant، أو Dissolve، أو Smart animate، أو الحركات الاتّجاهية مثل Move in وPush وSlide in، ولكلٍّ منها easing ومدّة. في Steady، الأقصر والأهدأ هو الأفضل: Smart animate أو Push، مع Ease out، لمدّة بين 250 و300 ms أو نحو ذلك.
\nهذا مسار تسجيل العادة الذي ستبنيه:
\nيمكنك رسم وصلة من كل زر تعليم إلى نسخة من الشاشة يكون فيها ذلك الصف معلَّمًا. مع خمس عادات، هذه 32 تركيبة من الشاشات. بدلًا من ذلك، افتح الـ component set الخاص بـ Check button وأضف التفاعل بين الـ variants الخاصة به: على الـ variant To do، On tap، ثم Change to Done، مع Smart animate لمدّة 200 ms. وأضف العكس على Done.
\nالآن كل instance من زر التعليم، في كل شاشة، تتبدّل وحدها حين تُنقر في الـ prototype. هذا interactive component، ولهذا تؤتي الـ variants المتقنة من الدرس 3.2 ثمارها مرّتين.
\nزر الإضافة يفتح لوحة New habit، التي تنزلق إلى الأعلى فوق Today بدل أن تحلّ محلّها. صِل زر الإضافة بـ frame اللوحة باستخدام Open overlay. في إعدادات الـ overlay، اختر موضعًا أسفل المنتصف، وفعّل الإغلاق عند النقر خارجها، وأضف خلفية خلف الـ overlay (لون داكن بشفافية نحو 40% يعتّم الشاشة). واستخدم حركة Move in من الأسفل.
\nإعدادات الـ overlay تخصّ frame الـ overlay، لا الوصلة، فتعيد استخدامها كل الأزرار التي تفتح اللوحة. وداخل اللوحة، صِل Save habit وCancel بـ Close overlay.
\nينظر الـ Smart animate إلى frame-ين، ويجد الطبقات المتطابقة، ويحرّك الاختلافات. تتطابق الطبقة حين يكون لها الاسم نفسه وتقع في الموضع نفسه من شجرة الطبقات في الـ frame-ين. ويمكنه تحريك الموضع والحجم والدوران والشفافية والتعبئة.
\nلاحتفال الـ streak في Habit detail، كرّر الـ frame (التكرار يُبقي الأسماء متطابقة)، ثم في الـ frame الثاني كبّر رقم الـ streak وأظهر تدريجيًا شارة “New best!”. صِل بينهما بـ Smart animate، مع Ease out، لمدّة 300 ms.
\n\nاجعل Today نقطة بداية للمسار (flow starting point) واضغط زر التشغيل لتعرض الـ prototype. في قائمة طويلة، اضبط frame المحتوى على التمرير العمودي وأبقِ شريط التبويبات ثابتًا في مكانه، وكلاهما من تبويب Prototype وقت كتابة هذا الدرس. اختبر على هاتف حقيقي بتطبيق Figma للجوّال؛ فحركة مدّتها 300 ms تبدو بطيئة على الشاشة الكبيرة كثيرًا ما تبدو مناسبة في اليد.
\n\nفي الدرس التالي تتأكّد من أن الشاشات التي حرّكتها للتوّ تعمل للجميع، بمن فيهم من لا يرون التركوازي، ومن لا يستطيعون النقر على أهداف صغيرة، ومن يستخدمون قارئ الشاشة (screen reader).
\n","toc":[{"id":"sec-1","text":"التفاعلات: trigger وaction وحركة","level":2},{"id":"sec-2","text":"الـ Interactive components: زر التعليم","level":2},{"id":"sec-3","text":"الـ Overlays: لوحة New habit","level":2},{"id":"sec-4","text":"الـ Smart animate: مطابقة الطبقات","level":2},{"id":"sec-5","text":"العرض والتمرير","level":2}],"takeaways":["كل تفاعل في الـ prototype هو trigger (مثل On tap) مع action (مثل Navigate to أو Open overlay) مع حركة (animation).","الـ Interactive components تضع التفاعلات بين الـ variants داخل الـ component نفسه، فتتبدّل كل instance من زر التعليم وحدها.","الـ Overlays تعرض محتوى مثل اللوحة السفلية فوق الشاشة الحالية، مع إعدادات للموضع والإغلاق عند النقر خارجها والخلفية.","الـ Smart animate يطابق الطبقات بالاسم والموضع في شجرة الطبقات، ثم يحرّك الموضع والحجم والدوران والشفافية والتعبئة بينها.","اصنع prototype للّحظات التي تحتاج إلى اختبارها أو شرحها، لا لكل شاشة، وأبقِ كل مسار قصيرًا بما يكفي لإنهائه في دقيقة."],"further":[{"title":"Guide to prototyping in Figma","url":"https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma"},{"title":"Prototype triggers","url":"https://help.figma.com/hc/en-us/articles/360040035834-Prototype-triggers"},{"title":"Smart animate layers between frames","url":"https://help.figma.com/hc/en-us/articles/360039818874-Smart-animate-layers-between-frames"},{"title":"Create overlays in your prototypes","url":"https://help.figma.com/hc/en-us/articles/360039818254-Create-overlays-in-your-prototypes"}],"quiz":[{"q":"تريد أن يتبدّل زر التعليم في كل صف عادة بين To do وDone في الـ prototype، في كل شاشة. ما الإعداد الأكفأ؟
","options":[{"text":"ارسم وصلة من كل زر تعليم في كل شاشة إلى نسخة من تلك الشاشة يكون فيها الزر معلَّمًا.","why":"هذا يحتاج شاشة جديدة لكل تركيبة من الصفوف المعلَّمة، وينفجر العدد بسرعة."},{"text":"أضف تفاعل On tap مع Change to Done بين الـ variants داخل الـ component set الخاص بـ Check button.","why":"صحيح. التفاعلات داخل الـ component تجعل كل instance تفاعلية، دون شاشات إضافية."},{"text":"استخدم After delay لتصبح الأزرار معلَّمة تلقائيًا.","why":"المختبِرون يحتاجون إلى النقر. التغيير الموقوت لا يختبر هل يجد الناس الزر."},{"text":"صدّر الشاشات وأضف التفاعلات في محرّر فيديو.","why":"الفيديو لا يستجيب للنقرات، فتخسر ما يجعل الـ prototype مفيدًا."}],"answer":1},{"q":"يجب أن تنزلق لوحة New habit من الأسفل فوق شاشة Today وأن تُغلق حين ينقر أحدهم على المنطقة المعتمة. أيّ إعداد يناسب؟
","options":[{"text":"Navigate to إلى نسخة من Today مرسومة عليها اللوحة، باستخدام Instant.","why":"تبدو مشابهة، لكن لا يمكن إغلاق اللوحة بالنقر خارجها، وستضطرّ إلى صيانة شاشة Today ثانية."},{"text":"Scroll to إلى موضع اللوحة في frame طويل لشاشة Today.","why":"التمرير سيحرّك الشاشة كلها، لا أن يزلق لوحة فوقها."},{"text":"Open overlay مع frame اللوحة، في موضع أسفل المنتصف، مع خلفية خلفها وتفعيل الإغلاق عند النقر خارجها.","why":"صحيح. هذا بالضبط ما وُجدت الـ overlays من أجله، والإعدادات محفوظة على الـ overlay فتعيد استخدامها كل وصلة."},{"text":"Change to إلى variant من frame شاشة Today.","why":"Change to يعمل على variants الـ components، وشاشة Today frame لا component set."}],"answer":2},{"q":"في الـ frame الأول شارة الـ streak مخفية بأيقونة العين. وفي الثاني ظاهرة. الـ Smart animate يجعلها تظهر فجأة بدل أن تظهر تدريجيًا. ما الإصلاح؟
","options":[{"text":"زيادة المدّة إلى 2,000 ms.","why":"المدّة الأطول لا تفيد حين لا يوجد تغيير قابل للتحريك. الظهور يتبدّل فورًا."},{"text":"تغيير الحركة إلى Dissolve.","why":"Dissolve يُخفت الـ frame كله، لا الشارة وحدها."},{"text":"إعادة تسمية الشارة في الـ frame الثاني.","why":"الأسماء المختلفة ستمنع الـ Smart animate من مطابقتها أصلًا. يجب أن تكون الأسماء متطابقة."},{"text":"إبقاء الشارة ظاهرة في الـ frame-ين وضبط شفافيتها على 0% في الأول.","why":"صحيح. الـ Smart animate يحرّك قيم الشفافية، لكن الطبقة المخفية ليس لها شفافية يبدأ منها."}],"answer":3}],"exercise":{"kind":"choice","multiple":true,"options":["names-differ","parent-differs","instant","duration","easing","trigger"],"correct":["names-differ","parent-differs","instant"],"title":"لماذا يقفز الصف بدل أن ينزلق؟","prompt":"حين تُعلَّم عادة، يجب أن ينزلق صفّها في Steady إلى الأسفل داخل مجموعة Done. لكن الـ prototype يقفز مباشرة من Frame A إلى Frame B. هذان هما الـ frame-ان، والوصلة، ومسار طبقة صف Read في كلٍّ منهما.
\n:::figure frame-ان يجب أن يتحرّك بينهما Smart animate\n
\nاختر كل سبب يمنع الصف من الانزلاق.
\n","hints":["الـ Smart animate يحتاج طبقة مطابقة: الاسم نفسه، والموضع نفسه في شجرة الطبقات. قارن المسارين.","انظر أيضًا إلى الحركة المضبوطة على الوصلة.","ثلاثة أسباب: الاسم، والأب، ونوع الحركة."],"explanation":"الوصلة تستخدم Instant، فلا شيء يمكن أن يتحرّك حتى لو كانت الطبقات مثالية؛ غيّرها إلى Smart animate. ثم يظلّ الـ Smart animate بحاجة إلى تطابق: الصف اسمه Read row في Frame A وHabit row/Read في Frame B (اسمان مختلفان)، وفي Frame B يقع داخل Done group (أب مختلف). أعطه الاسم نفسه وأبقِه في الأب نفسه في الـ frame-ين، مثلًا بالإبقاء على قائمة واحدة وتغيير موضع الصف، أو بتحريك عنوان Done بدلًا منه. المدّة والـ easing والـ trigger On tap كلها سليمة؛ فهي تغيّر طريقة تحريك الطبقات المتطابقة، لا وجود التطابق نفسه.
Read row وHabit row/Read طبقتان لا علاقة بينهما."},"parent-differs":{"text":"في Frame B يقع الصف داخل group أب مختلف.","why":"صحيح. التطابق يعتمد أيضًا على موضع الطبقة في شجرة الطبقات. والأب الجديد يكسر المطابقة."},"instant":{"text":"حركة الوصلة مضبوطة على Instant.","why":"صحيح. Instant لا يحرّك شيئًا أبدًا. يجب اختيار Smart animate في التفاعل."},"duration":{"text":"يجب أن تكون المدّة 1,000 ms على الأقل.","why":"المدّة تغيّر سرعة حركة تحدث بالفعل فقط. ومدّة بين 250 و300 ms تناسب تحريك صف."},"easing":{"text":"يجب أن يكون الـ easing Linear بدل Ease out.","why":"الـ easing يشكّل الحركة؛ ولا يحدّد هل تتطابق الطبقات. Ease out خيار افتراضي جيد للعناصر التي تستقرّ في مكانها."},"trigger":{"text":"يجب أن يكون الـ trigger On click بدل On tap.","why":"On click وOn tap هما الـ trigger نفسه، بتسميتين لسطح المكتب والجوّال."}}},"words":703,"readMinutes":4}