در این دوره، فراتر از ابزارهای طراحی اولیه Figma به سراغ نمونههای اولیه و مدلهای پیچیدهتر و درگیرتر بروید. در حالی که نمونه های اولیه استاتیک می توانند بسیار مفید باشند، افزودن انیمیشن به تغییرات صفحه نمایش و تعاملات فردی رابط کاربری می تواند واقع گرایی طرح های شما را به سطح بالاتری برساند. مربی Joseph Labrecque با نگاهی به چگونگی شروع می کند، انیمیشن ها و انتقال ها در یک نمونه اولیه Figma طراحی شده اند. در مورد ویژگی Smart Animate برای حرکت و انتقال سریع، نحوه سفارشی کردن پارامترهای انیمیشن - مانند مدت زمان، تأخیر، و حتی تنظیمات آسان و فنری سفارشی - در Figma، و نحوه ایجاد و متحرک سازی الگوهای طراحی UX رایج مانند صفحه نمایش اسپلش بیاموزید. بارگذاری انیمیشن ها، انتقال ها، حالت های مؤلفه و نوارهای پیشرفت.
نمونه ویدیوی آموزشی ( زیرنویسها جدا از ویدیو است و میتوانید آنرا نمایش ندهید ) :
[فارسی]
01 مقدمه
01-01 متحرک سازی نمونه های اولیه با Figma
01-02 کار با فایل های تمرین
01-03 نمای کلی پروژه طراحی
02 مبانی انتقال متحرک
02-01 پیش نیاز انیمیشن Figma
02-02 انتقال های فوری در Figma
02-03 انتقال ها را در Figma حل کنید
02-04 انتقال متحرک هوشمند در Figma
02-05 انتقال ها را در Figma به داخل و خارج کنید
02-06 انتقال فشار در Figma
02-07 انتقال به داخل و خارج در Figma
03 اصلاح ویژگی های انیمیشن
03-01 تنظیم مدت زمان انتقال
03-02 اعمال یک تعامل تاخیری
03-03 بازنشانی موقعیت اسکرول
03-04 متحرک سازی لایه های تطبیق
03-05 بررسی انتقال های خطی
03-06 طراحی آسان افکت
03-07 طراحی افکت های فنری
03-08 اعمال از پیش تنظیمات حرکت
04 طراحی انیمیشن های رابط کاربری رایج
04-01 متحرک سازی یک دکمه
04-02 متحرک کردن سوئیچ ضامن
04-03 متحرک سازی یک دکمه پر انرژی
04-04 سیم کشی نوار پیشرفت به متغیرها
04-05 استفاده از انیمیشن های همپوشانی
04-06 ایجاد نشانگر حلقه
05 متحرک سازی تجربیات اضافی
05-01 راه اندازی از صفحه اصلی
05-02 ایجاد حالت های صفحه نمایش چلپ چلوپ
05-03 متحرک کردن حالات چلپ چلوپ صفحه نمایش
05-04 استفاده از فیلم ها برای افزودن حرکت
05-05 طراحی با فایل های متحرک GIF
06 نتیجه گیری
06-01 مراحل بعدی انیمیشن سازی در Figma
[ENGLISH]
01 Introduction
01-01 Animating prototypes with Figma
01-02 Working with the exercise files
01-03 Design project overview
02 Animated Transition Basics
02-01 Figma animation prerequisites
02-02 Instant transitions in Figma
02-03 Dissolve transitions in Figma
02-04 Smart Animate transitions in Figma
02-05 Move in and move out transitions in Figma
02-06 Push transitions in Figma
02-07 Slide in and slide out transitions in Figma
03 Modifying Animation Properties
03-01 Adjusting transition duration
03-02 Applying a delay interaction
03-03 Resetting scroll position
03-04 Animating matching layers
03-05 Examining linear transitions
03-06 Designing ease effects
03-07 Designing spring effects
03-08 Applying motion presets
04 Designing Common UI Animations
04-01 Animating a button press
04-02 Animating a toggle switch
04-03 Animating an energetic button
04-04 Wiring a progress bar to variables
04-05 Using overlay animations
04-06 Creating a looping indicator
05 Animating Additional Experiences
05-01 Launching from the home screen
05-02 Creating splash screen states
05-03 Animating splash screen states
05-04 Using videos to add motion
05-05 Designing with animated GIF files
06 Conclusion
06-01 Next steps for animating in Figma
ژوزف لابرِسک مهندس ارشد نرم افزارهای تعاملی ، و همچنین، مربی Adobe و رئیس degital media store است. ژوزف لابرِسک در وهله اول کارمند دانشگاه دنور به عنوان مهندس ارشد نرم افزارهای تعاملی ، متخصص در ساخت expressive desktop، وب، و راه حل های موبایل است. کار وی ترکیبی از تمرکز زیاد روی Adobe flash platform در کنار ابتکارات استاندارد وب است که شامل استفاده از HTML5، CSS، JavaScript، و تکنولوژی های مرتبط است. وی همچنین صاحب حق شرکت انحصاری Fractured Vison Media می باشد که یک شرکت تولید رسانه دیجیتال، مشاوره فنی، و وسیله توزیع برای آثار خلاق متنوعی است. ژوزف رهبر تربیتی Adobe و حرفه ای در اجتماعات Adobe می باشد.