🌙درسنا الثاني والعشرون من دورس تعلم فيجما بيكون عن:
🌟كيف نعمل هذا التنقل بين النظام النهاري والليلي باستخدام خاصية في فيجما تسمى ب mask.
شرح بالفيديوهات 👇🏻
#figma
@Designers_Sup
🌟كيف نعمل هذا التنقل بين النظام النهاري والليلي باستخدام خاصية في فيجما تسمى ب mask.
شرح بالفيديوهات 👇🏻
#figma
@Designers_Sup
بالبداية خاصية mask تساعدنا في تكوين أشكال جديدة من خلال استخدام احدى الأشكال ك mask على الأشكال الأخرى. حالياً خاصية mask تشتغل فقط على صور. في الفيديو موضح كيفية عمل mask لصورة باستخدام شكل او نص.
📍الشئ اللي بتستخدمه ك mask لازم يكون خلف الشئ مثلاً النص كان خلف الصورة.
📍الشئ اللي بتستخدمه ك mask لازم يكون خلف الشئ مثلاً النص كان خلف الصورة.
نيجي للتصميم نحتاج نحول التصميم من الوضع النهاري إلى الوضع الليلي ونقدر نعمل هذا بسهولة بإستخدام إضافة (plug-in) في فيجما اسمه dark mode magic.
شرحت طريقة استخدامه بالتفصيل في هذا الدرس:
شرحت طريقة استخدامه بالتفصيل في هذا الدرس:
بعدها لان خاصية mask يكون لها تأثير فقط على الصور احتاج اصدّر التصميم كصورة من خلال خانة export كما موضح في الفيديو.
الان نجيب الصورتين لفيجما ونضعهم في frame نفس حجم الصورتين مثل الموضح في الفيديو.
الان نستخدم شكل دائرة (ممكن اي شكل) ك mask لعمل تأثير التنقل بين الوضعين مثل الموضح في الفيديو.
📍لاننا نحتاج نخفي الوضع الليلي فخليت الدائرة ورى صورة الوضع الليلي واستخدمتها ك mask وصغرت الدائرة عشان مايبان اي جزء من الوضع الليلي.
📍لاننا نحتاج نخفي الوضع الليلي فخليت الدائرة ورى صورة الوضع الليلي واستخدمتها ك mask وصغرت الدائرة عشان مايبان اي جزء من الوضع الليلي.
بعدها نعمل نسخة ثانية من الواجهة ونستخدم mask عشان نظهر الوضع الليلي ونشبك الواجهات مع بعض من خلال خانة prototype ويكون نوع التحرك smart animate مثل الموضح في الفيديو.
كيف نشغل التأثير من خلال زر present مثل الموضح في الفيديو.
وبس اتمنى ان الدرس مفيد لكم ولنا لقاء غداً بإذن الله مع درس جديد💜.
جاري تحميل الاقتراحات...