FIGMA: نمونه های اولیه طراحی انیمیشن

مدرس Joseph Labrecque

انتشار 2024/10/08

مدت زمان 1h 46m

سطح مناسب همه

فایل تمرینی دارد

آموزش Figma: Animating Design Prototypes

در این دوره ، فراتر از ابزارهای طراحی اصلی FIGMA به نمونه های اولیه و درگیر و پیچیده تر بروید. در حالی که نمونه های اولیه استاتیک می توانند بسیار مفید باشند ، اضافه کردن انیمیشن به انتقال صفحه نمایش شما و تعامل رابط کاربری فردی می تواند واقع گرایی طرح های شما را به سطح بعدی منتقل کند. مربی جوزف لابرک با نگاهی به چگونگی شروع می شود انیمیشن ها و انتقال ها در یک نمونه اولیه FIGMA طراحی شده اند. در مورد ویژگی Animate Smart برای حرکت سریع و انتقال ، نحوه سفارشی کردن پارامترهای انیمیشن - مانند مدت زمان ، تأخیر و حتی تنظیمات سهولت سفارشی و بهار - در FIGMA ، و نحوه ایجاد و تحریک الگوهای طراحی مشترک UX مانند صفحه های چلپ چلوپ ، بارگیری انیمیشن ها ، انتقال ، حالت های مؤلفه و نوار پیشرفت اطلاعات کسب کنید.

Animation Design Figma (Software) User Interface Prototyping

Introduction

Animating prototypes with Figma ()

Working with the exercise files ()

Design project overview ()

1. Animated Transition Basics

Figma animation prerequisites ()

Instant transitions in Figma ()

Dissolve transitions in Figma ()

Smart Animate transitions in Figma ()

Move in and move out transitions in Figma ()

Push transitions in Figma ()

Slide in and slide out transitions in Figma ()

2. Modifying Animation Properties

Adjusting transition duration ()

Applying a delay interaction ()

Resetting scroll position ()

Animating matching layers ()

Examining linear transitions ()

Designing ease effects ()

Designing spring effects ()

Applying motion presets ()

3. Designing Common UI Animations

Animating a button press ()

Animating a toggle switch ()

Animating an energetic button ()

Wiring a progress bar to variables ()

Using overlay animations ()

Creating a looping indicator ()

4. Animating Additional Experiences

Launching from the home screen ()

Creating splash screen states ()

Animating splash screen states ()

Using videos to add motion ()

Designing with animated GIF files ()

Conclusion

Next steps for animating in Figma ()

Ex_Files_Figma_Animating_Design_Prototypes.zip (278.5 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.