رتبها

فاطمة العمودي 🌻 | UI/UX Designer

12 تغريدة 2 قراءة Apr 02, 2023

🌙اليوم الثالث من دروس فيجما في رمضان
🌟كيف نعمل تصميم تحركي animation في فيجما باستخدام خاصية Smart Animate
@Designers_Sup
#figma

بالبداية خلونا نعرف كيف تشتغل Smart Animate. هي نوع من انواع animation في فيجما واللي بتقوم بعمل تحرك للأشياء المشتركة بين الواجهات. يعني في التصميم اي شئ نحتاج نعمل له animation لازم يكون في الواجهة السابقة إما مخفي (مثال البطاقات)او موجود (مثال الصور اللي على اليسار)

باختصار الاشياء اللي احتجت احركها في الواجهة الثانية لازم تكون موجودة في الواجهة الأولى إما موجودة لانها جزء من الواجهة الأولى مثال الصور و الدائرة او مخفية لانها غير جزء من الواجهة الأولى مثال البطاقات

لاحظوا في الفيديو تأثير لما البطاقات تكون غير موجودة في الواجهة الأولى. ظهرت بدون animation. في هذه الحالة smart animate ماله تأثير.

الان نبدأ كيف التحركات تشتغل:
١- اول شئ الصور اللي على اليسار لاحظوا ان جزء منها ارتفع للأعلى والجزء الآخر نزل إلى الأسفل في animation. عشان يتحقق هذا التأثير تحتاج تطلّع الصور خارج الواجهة جزء منها لاعلى وجزء من لأسفل الواجهة مثل اللي في الفيديو.

📍وانت تحرك الصور لازم تضغط shift عشان ما تخرج من الواجهة لانها اذا خرجت مارح يشتغل smart animate.

٢- بالنسبة للدائرة هي بالتأثير نحتاج نكبرها وتأخذ عرض الواجهة مثل اللي في الفيديو.
📍وانت تسحب الدائرة اضغط shift عشان تحافظ على شكل الدائرة.

٣- اخر جزئية وهي البطاقات نحتاج انها تيجي من جهة اليمين لذا نحتاج في الواجهة الاولى نخرجها من جهة اليمين وتكون موجودة في الواجهة اليسار مثل اللي في الفيديو.
📍تجتاج تضغط على shift وانت تسحب البطاقات عشان ماتخرج من الواجهة.