كيفية استخدام البرنامج المساعد للحركة في Figma للرسوم المتحركة الخاصة بك؟

Figma هي أداة رائعة لنقاط اتصال تخطيط تصميم الويب. ربما يكون أفضل ما في الأمر هو المنطقة المحلية العملاقة. إنه يوفر تقدمًا ثابتًا للأصول غير العادية مثل التنسيقات والرموز والأدوات والوحدات النمطية التي تجعل عملية عمل خطتك أسرع وأبسط.

تتمتع Figma بالكثير من المزايا التي تتباين مع Adobe XD أو Sketch. إنه جهاز تكوين واجهة قائم على البرنامج ومتعدد المراحل ويعمل في أي برنامج ونظام تشغيل. إنه يوفر أفضل مناخ للجهد المستمر والمنسق مع مختلف المبدعين والزملاء.

بصرف النظر عن وظائفها التعاونية وقدرتها على صنع نماذج ذكية ، ورموز تجارية ، وتصميمات ، وتنسيقات كاملة ، بمساعدة الوحدات النمطية ، يمكن لـ Figma توسيع عناصرها بشكل أكبر - مثل أتمتة المهام الشاقة.

يتم نقل أصول Figma الجديدة كل يوم إلى مجتمع Figma. لقد قمنا بعمل ملخص قيم لأفضل الوحدات والأدوات لتسريع عملية عمل خطتك في ضوء رؤيتنا المباشرة لتوفير الوقت.

يأتي كل مهندس UX / UI إلى الثاني عندما يحتاج إلى تنشيط خطته. ما هو أكثر من ذلك ، ما هي الأجهزة التي من المستحسن بالنسبة لنا أن نقرر إجراء بعض الاتصالات في واجهة المستخدم ، أو إضافة بعض التأثيرات المبهرة ، أو تنشيط شخص ما للعبة محمولة؟

سأعرض لك وحدة فيجما رائعة للقيام بكل هذا. اسمها موشن. سنحدد بسرعة نقطة تفاعلها ، ونتعلم أساسيات الحيوية وحتى نصنع بعض الأشياء الرائعة.

لنبدأ كل شيء ...

كمسألة ذات أهمية أولى ، يجب أن نقدمها. افتح Figma وانتقل إلى المجتمع.

اكتب "حركة" في شريط البحث في أعلى نقطة من الصفحة والمكونات الإضافية في النتائج.

يجب عليك الآن النقر على زر التثبيت ، وهذا باختصار. يجب أن نضيف وثيقة Figma أخرى. من القائمة المنسدلة ، حدد الإضافات / الحركة.

لقد بدأنا مؤخرًا Motion. نحن جميعا جاهزون للمرحلة التالية.

الخطوط العريضة

• قبل استخدام أداة أخرى ، يجب علينا معرفة كيفية التعامل معها. يجب أن نحدد بسرعة نقطة التفاعل.
• يبدو أن Figma UI ، أليس كذلك؟ إنه رائع للعملاء الجدد.
• لدينا علامات تبويب في الأعلى: أنشطتنا ، وشريط أدوات أسفله ، ولوحة على اليسار ، ومسار من الأحداث مع الإطارات الرئيسية. يمكنك إضافة الكثير من الحركات لأي سجل.
• يجب علينا تحديد الخطوط العريضة لبعض أزرار شريط الأدوات بسرعة. سنناقشهم بالتفصيل لاحقًا.
• التحديث التلقائي للإطارات الرئيسية.
• كرر لا إعادة صياغة / وانقطاع.

تشغيل / إيقاف

• الموقف في الوقت الحالي / الوقت الكامل.
• على اللوحة اليسرى ، يمكننا أن ننظر من خلال الطبقات بأسمائها وطبقات القناة باستخدام إطارات المفاتيح. إذا لم يتم اختيار أي شيء في Figma ، فيمكننا رؤية طبقات السجل بدون طبقات فرعية.
• إنه مصمم للمستندات الثقيلة ، والتي يمكن أن تكون بطيئة. ابحث عن الطبقات التي تريدها أو حدد الطبقات في Figma ، وستظهر لك قائمة متهدمة جميع الطبقات الفرعية.

• في لوحة الجدول الزمني ، سنرى جميع الإطارات الرئيسية للطبقة المختارة.

إضافة keyframe

تداول بمساعدتها ، يمكنك تداول أي طبقة إلى GIF أو Sprite أو Frames أو CSS.

بافتراض أنك تعمل في مجموعة ، فإن كل فرد يقترب من المستند ويدير Motion سيرى حيويتك.

إنه أمر رائع للاستخدام المتبادل مع مجموعتك والمصممين الذين سينفذون أنشطتك في الكود. سيؤدي النقر المزدوج على أي إطار رئيسي إلى فتح لوحة الإطار الرئيسي حيث يمكنك تعيين نقطة تحول ، وقيمة ، وقدرة تسهيل.

حيوية لا تنسى

من الفرضية إلى البروفة. يجب أن نصنع غلافًا وشكلًا مربعًا بداخله. لا تُحدث الأحجام والنغمات أي فرق في الوقت الحاضر. ضع الشكل المربع بالقرب من الممر الموجود في زاوية الغلاف للحصول على مساحة على خيار تحريكه.

انتقل الآن إلى Motion واضغط على زر Add keyframe في خاصية X.

ستستمر حيويتنا في العمل لمدة 500 مللي ثانية. حرك مقبض الجدول الزمني الوردي إلى وضع 500 مللي ثانية (0.5 ثانية).

انقل الشكل المربع إلى جانب واحد ، وانتقل إلى "الحركة" ، ثم انقر فوق الزر "إضافة إطار رئيسي". لا يوجد شيء آخر لها. انقر فوق "تشغيل" وشاهد أنشطتك التي لا تنسى. باستخدام هذه الطرق ، يمكنك تسريع كل خاصية من الخصائص التي تراها.

انطلق وقم بتغيير خصائص Y و Width و Height و Corner swe و Rotation و Opacity و Fill.

اساسيات

يجب أن نواصل ونقفز أكثر إلى التفاصيل الدقيقة.

نقطة الثورة

والأهم من ذلك ، يجب أن ندرك ما هي نقطة الثورة أو نقطة الارتكاز. يجب أن نفترض أن لدينا حافة وشكل مربع بداخلها. الشكل المربع: العرض = 100 ، المستوى = 100 ، س = 100 ، ص = 100 ، الثورة = 0 درجة.

انتقل إلى "الحركة" وأضف إطارًا رئيسيًا للخاصية X. انقر نقرًا مزدوجًا على إطار رئيسي جديد. في الوقت الحاضر نرى لوحة keyframe لخصائص محددة. هنا يمكنك إعداد نقطة محورية أو نقطة ارتساء ، وتقدير خاصية ، وقدرة تسهيل.

في لوحة خصائص Figma ، وصفنا X بما يعادل 100 ؛ ومع ذلك ، هنا ، نرى 150. لماذا؟

التفسير هو نقطة الثورة ، والتي تم تعيينها للتركيز على المحور X و Y. على طول هذه الخطوط ، يكون الموضع هو: X + (العرض / 2) = 100 + (100/2) = 150. لإدارة صفات مماثلة مثل Figma ، يجب عليك اختيار الزاوية اليسرى العلوية للنقطة المحورية. ومع ذلك ، لا تضغط!

يجب علينا تحريك الشكل المربع بمقدار 100 إلى جانب واحد على طول X والمحور بمقدار - 45 درجة.

انقر فوق "تشغيل" ولاحظ أنه يتحرك ويدور حول محور. ومع ذلك ، تخيل سيناريو نقوم فيه بتغيير الثورة لتسليط الضوء على الزاوية اليسرى العليا.

لا يوجد أي اختلاف في الإطار الرئيسي الذي ستقوم بتغيير النقطة المحورية. إنه نموذجي لجميع الإطارات الرئيسية للطبقة.

سوف نتدحرج ونتحول حسب الزاوية اليسرى العليا للطبقة.

يوضح لك Figma قيم X و Y كما هو موضح بالركن الأيسر العلوي لنقطة ثورة للطبقة ؛ ومع ذلك ، احترام التناوب - حسب النقطة الوسطى. يجب أن تتذكر هذا عند تنشيط شيء ما. ومع ذلك ، كقاعدة عامة ، لن تضطر إلى تحويلها من المشكلة المركزية في Motion.

تسهيل القدرات

تسهيل زيادة سرعة التحكم في القدرات وتباطؤها. هناك أربع قدرات تيسيرية:

• مباشر
• سهولة في زيادة السرعة في البداية
• التراجع - التباطؤ في نهاية المطاف
• العودة للداخل - تزداد السرعة في البداية ، وتتباطأ في النهاية.

هناك خيار آخر هنا - خطوات. سوف يتغير التقدير على الفور دون أي تقدم عمليًا. ماذا عن محاولة ذلك. لدينا الشكل المربع يتحرك من الجانب الممر إلى النصف الأيمن من الحافة. حدد إنهاء keyframe وافتح لوحة keyframe. تغيير قدرات التيسير ومعرفة النتيجة.

مكرر / لصق

إعادة ترتيب الإطارات الرئيسية أمر بسيط أيضًا. حدد الإطارات الرئيسية ، اضغط على Ctrl / Cmd + C أو انقر فوق نسخ من القائمة المنسدلة لاختيار الإطارات الرئيسية. بعد ذلك ، يمكنك لصقها على أي طبقة. في بعض الأحيان ، يكون من المفيد تحريك بضع طبقات بنفس الطريقة.

الإصلاح / الإعادة

يمكنك إصلاح وإعادة محاولة أي تقدم في الأنشطة. سيساعدك Ctrl / Cmd + Z للتراجع و Ctrl / Cmd + Y للإعادة.

التحديث التلقائي للإطارات الرئيسية

إذا كان هذا الزر ديناميكيًا ، فسيتم بالتالي تحديث قيم الإطارات الرئيسية في موضع الوقت الحالي بعد تنشيط الحركة. لديك تأخير 1 ثانية بعد تعيين نافذة الوحدة لإلغاء تنشيطها أو الضغط على زر التشغيل وإلغاء تركيز النافذة.

وبالتالي ، يمكنك إضافة إطارات مفتاحية ، والانتقال إلى موضعها الزمني ، وإدخال تحسينات محددة على طبقاتك في Figma وتوسيط نافذة الوحدة النمطية. ستفعل الحركة كل شيء.

انظر fps

يمكنك ضبط عدد الأغلفة التي ستراها في الوقت الفعلي في Figma: مثل 24 أو 60. يمكنك تحويلها من 60 إلى 24 في حالة افتراض أن الحيوية بطيئة. حاول ألا تؤكد أن هذا لن يؤثر على التجارة.

Rehash

هناك ثلاث قدرات هنا:

• لا إعادة صياغة
• Rehash
• إعادة الحذف والمقاطعة

آخر واحد رائع. ستتوقف 1s في نهاية الحركة وبعد ذلك فقط تكررها. بين الحين والآخر ، عند ضبط "التكرار" ، لا يمكنك رؤية نتيجة حركتك. سيكون من الأفضل إذا كان لديك تأجيل قبل بدء دورة نشاط أخرى.

يمكنك إضافة إطار رئيسي للفترة التي تحتاجها. على أي حال ، تمنحك Motion مثل هذه الأدوات - كرر وتأخير.

تغليف

جمعت هذه المدونة أطنانًا من المعرفة المفيدة اليوم حول الحيوية في Figma. لديك الآن الفرصة وقوة الإرادة لممارسة وجعل حياتك الرائعة.

اريد معرفة المزيد؟ قم بزيارة www.webdew.com أو اتصل بنا للاستفادة من خدماتنا!

المحرر: تمنى