🌙درسنا الثاني والعشرون من دورس تعلم فيجما بيكون عن:
🌟كيف نعمل تصميم تفاعلي في فيجما باستخدام خاصية Micro Interaction.
📍كل التفاعلات سهلة العمل وتضيف لمسة للتصميم مع ملف فيجما.
#figma
@Designers_Sup
🌟كيف نعمل تصميم تفاعلي في فيجما باستخدام خاصية Micro Interaction.
📍كل التفاعلات سهلة العمل وتضيف لمسة للتصميم مع ملف فيجما.
#figma
@Designers_Sup
بالبداية ماهي Micro Interaction. هي عناصر في التصميم تتفاعل استجابة لحركة المستخدم مثلاً لو كان في صفحة تعرض نتائج وبتأخذ وقت طويل للعرض ممكن نستخدم loader للتوضيح للمستخدم ان فيه نتائج قاعدة تتحمل. فبدلاً ماتكون الصفحة جامدة ممكن نضيف هذه التحركات لزيادة تفاعلها.
كل التحركات اللي في فيديو بنيت باستخدام خاصية components variants واللي بتسمح ان العنصر يكون له عدة حالات ويكون هناك قدرة على التنقل بينها.
شرحت الخاصية بالتفصيل في هذا الدرس:
شرحت الخاصية بالتفصيل في هذا الدرس:
نبدأ ب loader الغرض منه يبين إن الصفحة قاعدة تتحمل. طريقة بناءه مثل الموضح في الفيديو. عشان نتقل بين الحالات نستخدم تنقل (smart animate) مع تأثير (after delay) عشان يشتغل التأثير من نفسه دون اي تدخل مني.
هذا نتيجة التأثير السابق. تحتاج تأخذ نسخة من اول حالة للعنصر مثل الموضح في الفيديو.
بالنسبة للبطاقة مثل الموضح في الفيديو انه في تأثير في لون وحجم البطاقة عند التأشير عليها فنحتاج يكون للبطاقة حالتين حالة عادية وحالة عند التأشير عليها ونستخدم تنقل (while hovering) مثل الموضح في الفيديو.
نفس الشئ عشان نستخدم التأثير نحتاج نأخذ نسخة منه في التصميم.
📍التباعد بين بطاقات الكتب تأقلم مع تغيير حجم البطاقة الجديدة لان مستخدمين خاصية Auto layout.
شرحت الخاصية بالتفصيل في هذا الدرس:
📍التباعد بين بطاقات الكتب تأقلم مع تغيير حجم البطاقة الجديدة لان مستخدمين خاصية Auto layout.
شرحت الخاصية بالتفصيل في هذا الدرس:
تقدر تكرر التأثير لكن البطاقات عن طريق نسخة البطاقة وتغيير المعلومات مثل الموضح في الفيديو
اخر شئ الزر وهو اسهل تأثير فيهم. نفس فكرة البطاقة الزر له حالتين حالة عادية وحالة عند التأشير عليه. طريق عمل التأثير واستخدامه موضحة في الفيديو.
اخر نقطة تبقت هي ربط الواجهتين مع بعض ونقدر نستخدم تنقل after delay عشان لما يخلص تأثير تحميل الصفحة ننتقل للصفحة تلقائياً. نحتاج نحسب تأثير تحميل الصفحة كم يأخذ وهنا يأخذ 1700ms فيصير التنقل بين الصفحتين يحدث بعد 1700ms مثل الموضح في الفيديو.
رابط ملف فيجما للتصميم مع التأثيرات:
figma.com
figma.com
وبس اتمنى ان الدرس مفيد لكم ولنا لقاء غداً بإذن الله مع درس جديد💜.
جاري تحميل الاقتراحات...