آموزش طراحی حرکت با Figma: انیمیشن ها، موشن گرافیک، UX/UI

سرفصل ها و درس ها

مقدمه Introduction

• به کلاس آنلاین ما بپیوندید Join Our Online Classroom

• تمرین: با همکلاسی ها و مربی خود آشنا شوید Exercise: Meet Your Classmates and Instructor

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• منابع طراحی Design Resources

حرکت در طراحی UX Motion in UX Design

• تصورات نادرست از طراحی حرکت Misconceptions of Motion Design

• حرکت از قابلیت استفاده پشتیبانی می کند Motion Supports Usability

• مدل‌های روایی و ذهنی Narrative and Mental Models

• میکرواینتراکشن چیست؟ What is a Microinteraction?

• ساختار یک ریز تعامل The Structure of a Microinteraction

• هر عنصری یک ریز تعامل نیست! Not Every Element is a Microinteraction!

• چگونه ریز تعاملات بر تجربیات کاربر تأثیر می گذارد How Microinteractions Impact User Experiences

• خلاصه - چه چیزی یاد گرفتیم؟ Recap - What Did We Learn?

• کجا بعدی؟ انتخاب شما... Where To Next? Your Choice...

مبانی Figma The Basics of Figma

• منابع این بخش Resources For This Section

• مقدمه ای بر Figma: برنامه های آموزشی و ثبت نام Intro to Figma: Education Plans and Signup

• مقدمه ای بر Figma: مقدمه Intro to Figma: Introduction

• معرفی Figma: کجا از Figma استفاده کنیم Intro to Figma: Where to use Figma

• Figma UI: مرورگر فایل Figma UI: File Browser

• Figma UI: فایل ها Figma UI: Files

• Figma UI: نوار ابزار Figma UI: Toolbar

• Figma UI: نوار کناری سمت چپ Figma UI: Left Sidebar

• رابط کاربری Figma: نوار کناری سمت راست Figma UI: Right Sidebar

• اشکال و ابزار: کار با ظروف Shapes and Tools: Working with Containers

• اشکال و ابزار: شکل‌های پایه و عملیات بولی Shapes and Tools: Basic Shapes and Boolean Operations

• طراحی در Figma: Images Designing in Figma: Images

• طراحی در Figma: شروع کار با متن Designing in Figma: Getting Started with Text

• طراحی در Figma: محدودیت ها Designing in Figma: Constraints

• طراحی در Figma: با استفاده از Auto Layout Designing in Figma: Using Auto Layout

• منابع و همکاری: فایل های انجمن Resources and Collaboration: Community Files

• منابع و همکاری: افزونه های انجمن Resources and Collaboration: Community Plugins

• منابع و همکاری: اشتراک گذاری و نظرات Resources and Collaboration: Sharing and Comments

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• تمرین: با استفاده از Shapes یک لوگوی سریع ایجاد کنید Exercise: Create a Quick Logo Using Shapes

• تمرین: دکمه های طرح خودکار Exercise: Autolayout Buttons

• تمرین: ناوبری پاسخگو Exercise: Responsive Navigation

• تمرین: متن پاسخگو Exercise: Responsive Text

• تمرین: تصویرسازی و گرادیان Exercise: Imagery and Gradients

• تمرین: چیدمان و پاسخگویی Exercise: Layout and Responsiveness

• تکلیف: ایجاد اجزای تعاملی پیچیده Assignment: Create Complex Interactive Components

مقدمه ای بر انیمیشن هوشمند Introduction to Smart Animate

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• ویژگی های متحرک هوشمند Smart Animate Properties

• اصول متحرک هوشمند Smart Animate Basics

• تمرین: اختلاف منظر Exercise: Parallax

• تمرین: پیام جدید Exercise: New Message

• تمرین: پوشش Exercise: Overlay

• ورود: اجزای تعاملی Check-in: Interactive Components

• تمرین: دکمه های تعاملی Exercise: Interactive Buttons

پروژه: اپلیکیشن الهام عکس Project: Photo Inspiration Application

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• نمونه اولیه: انتقال دسته Prototype: Category Transitions

• اجزای تعاملی: نمادها Interactive Components: Icons

• نمونه اولیه: ریز تعاملات ساده Prototype: Simple Microinteractions

• نمونه اولیه: Screen Transitions Prototype: Screen Transitions

• نمونه اولیه: طومار افقی ساده Prototype: Simple Horizontal Scroll

• نمونه اولیه: ربوده شده اسکرول افقی Prototype: Hijacked Horizontal Scroll

• تکلیف: برنامه موبایل Photo Inspiration Assignment: Photo Inspiration Mobile App

اصول طراحی حرکت Motion Design Principles

• تسهیل Easing

• افست و تاخیر Offset and Delay

• فرزندپروری Parenting

• دگرگونی Transformation

• تغییر ارزش Value Change

• نقاب زدن Masking

• پوشش Overlay

• شبیه سازی Cloning

• تیرگی Obscuration

• اختلاف منظر Parallax

• ابعاد Dimensionality

• دالی و زوم Dolly and Zoom

الگوهای طراحی حرکت در Figma Motion Designs Patterns in Figma

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• ناوبری: ساخت ناوبری Navigation: Building the Navigation

• ناوبری: نمونه سازی با انواع ساده Navigation: Prototyping with Simple Variants

• ناوبری: اجزای تعاملی خانگی Navigation: Home Interactive Components

• ناوبری: اجزای تعاملی قلب Navigation: Heart Interactive Components

• ناوبری: اجزای تعاملی سبد خرید Navigation: Cart Interactive Components

• ناوبری: تنظیمات اجزای تعاملی Navigation: Settings Interactive Components

• ناوبری: انیمیشن ها با مؤلفه ناوبری شما Navigation: Animations with Your Navigation Component

• اسکرول: طراحی صفحه فرود Scrolling: Landing Page Design

• پیمایش: پیوندهای لنگر Scrolling: Anchor Links

• پیمایش: اختلاف منظر کوتاه Scrolling: Short Parallax

• پیمایش: اختلاف منظر گسترده Scrolling: Extended Parallax

• صفحه بندی: نقطه چرخ فلک Pagination: Carousel Dots

• صفحه بندی: کنترل صفحه بندی Pagination: Pagination Control

• کشیدن: کارت فهرست Dragging: Listing Card

• کشیدن: پیمایش برنامه Dragging: App Scrolling

• کشیدن: کشیدن و رها کردن Dragging: Drag and Drop

• Microinteractions: Simple File Uploader Microinteractions: Simple File Uploader

• ریز تعاملات: موفقیت آپلودکننده Microinteractions: Uploader Success

• ریز تعاملات: لغو آپلود Microinteractions: Cancel Upload

• ریز تعامل: دکمه مانند عادی Microinteractions: Normal Like Button

• ریز تعاملات: مانند دکمه پرش Microinteractions: Like Button Bounce

• لذت: آبنبات Delight: Confetti

• لذت: چک لیست Delight: Checklist

• Delight: افزودن به سبد خرید Delight: Add to Cart

فرآیند طراحی حرکت The Motion Design Process

• مرحله 1: کشف و تحقیق Step 1: Discovery and Research

• مرحله 2: طراحی و استوری برد Step 2: Design and Storyboard

• مرحله 3: نمونه اولیه Step 3: Prototype

• مرحله 4: تست Step 4: Testing

• بررسی کنید: نکات سریع! Check in: Quick Tips!

• خلاصه: چه چیزی یاد گرفتیم؟ Recap: What Did We Learn?

پروژه: چرخ فلک نشنال جئوگرافیک Project: National Geographic Carousel

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• جزء تعاملی: بخش چرخ فلک Interactive Component: Carousel Section

• نمونه اولیه: انتقال چرخ و فلک ساده Prototype: Simple Carousel Transition

• نمونه اولیه: منظر پیچیده و جلوه تصویر سه بعدی Prototype: Complex Parallax and 3D Image Effect

• تکلیف: یک چرخ فلک صفحه کامل ایجاد کنید Assignment: Create a Full Page Carousel

پروژه: اپلیکیشن خانه هوشمند Project: Smart Home App

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• مؤلفه تعاملی: کارت را تغییر دهید Interactive Component: Toggle Card

• مؤلفه تعاملی: لغزنده دما Interactive Component: Temperature Slider

• نمونه اولیه: Toggle Cards Prototype: Toggle Cards

• نمونه اولیه: کنترل ساده دما Prototype: Simple Temperature Control

• نمونه اولیه: کنترل دمای رنگ Prototype: Colour Temperature Control

• نمونه اولیه: انتقال ناوبری Prototype: Navigation Transition

• تکلیف: ایجاد اجزای تعاملی پیچیده Assignment: Create Complex Interactive Components

بازخورد Feedback

• بازخورد باعث طراحی بهتر می شود Feedback Drives Better Design

• بازخورد سازنده Constructive Feedback

• خلاصه: چه چیزی یاد گرفتیم؟ Recap: What Did We Learn?

پروژه: صفحه فرود بازسازی خانه Project: Home Renovation Landing Page

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are going to Learn

• مؤلفه تعاملی: دکمه های وب سایت Interactive Component: Website Buttons

• جزء تعاملی: کارت اتاق عمومی Interactive Component: General Room Card

• مؤلفه تعاملی: ناوبری و پیوندها Interactive Component: Navigation and Links

• نمونه اولیه: صفحه فرود Parallax Intro Prototype: Landing Page Parallax Intro

• نمونه اولیه: اختلاف منظر تصویر کامل Prototype: Full Image Parallax

• نمونه اولیه: چرخ فلک گواهی Prototype: Testimonial Carousel

• نمونه اولیه: کارت های گام به گام Prototype: Staggered Cards

• نمونه اولیه: اسکرول خودکار تصویر گالری Prototype: Gallery Image Automated Scroll

• تکلیف: نمونه اولیه جلوه های اختلاف منظر Assignment: Prototype Parallax Effects

پروژه: فرم برآورد بازسازی منزل Project: Home Renovation Estimation Form

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• مؤلفه تعاملی: دکمه های فرم Interactive Component: Form Buttons

• مؤلفه تعاملی: نوار پیشرفت Interactive Component: Progress Bar

• مؤلفه تعاملی: دکمه های نماد پیکان Interactive Component: Arrow Icon Buttons

• مؤلفه تعاملی: ورودی عمومی Interactive Component: General Input

• مؤلفه تعاملی: ورودی و کشویی را انتخاب کنید Interactive Component: Select Input and Dropdown

• مؤلفه تعاملی: کارت تعویض نماد Interactive Component: Icon Toggle Card

• مؤلفه تعاملی: مورد چک باکس Interactive Component: Checkbox Item

• مولفه تعاملی: کارت آشپزخانه و نقاط چرخ فلک Interactive Component: Kitchen Card and Carousel Dots

• جزء تعاملی: چرخ فلک آشپزخانه Interactive Component: Kitchen Carousel

• نمونه اولیه: طرح بندی فرم Prototype: Form Layout

• نمونه اولیه: معرفی فرم Prototype: Form Introduction

• نمونه اولیه: ورودی عمومی و روکش کشویی Prototype: General Input and Dropdown Overlay

• نمونه اولیه: کارت ها و چک باکس را تغییر دهید Prototype: Toggle Cards and Checkbox

• نمونه اولیه: چرخ فلک Prototype: Carousel

• تکلیف: اجزای فرم تعاملی ایجاد کنید Assignment: Create Interactive Form Components

پروژه: برنامه تحویل غذا Project: Food Delivery App

• منابع این بخش Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• اجزای تعاملی: دکمه ها Interactive Components: Buttons

• اجزای تعاملی: دکمه های نماد Interactive Components: Icon Buttons

• اجزای تعاملی: کارت دسته Interactive Components: Category Card

• اجزای تعاملی: نوار ناوبری Interactive Components: Tab Navigation

• اجزای تعاملی: کارت آیتم Interactive Components: Item Card

• اجزای تعاملی: کارت تبلیغاتی Interactive Components: Promo Card

• اجزای تعاملی: دکمه اکشن شناور سبد خرید Interactive Components: Cart Floating Action Button

• اجزای تعاملی: پوشش مورد Interactive Components: Item Overlay

• اجزای تعاملی: نمادهای وضعیت پیشرفت سفارش Interactive Components: Order Progression Status Icons

• اجزای تعاملی: همپوشانی پیشرفت سفارش Interactive Components: Order Progression Overlay

• نمونه اولیه: چرخ فلک پارالکس اتوماتیک Prototype: Automatic Parallax Carousel

• نمونه اولیه: انتقال فهرست برگه ها Prototype: Tab List Transition

• نمونه اولیه: پوشش و پوشش Prototype: Masking and Overlay

• نمونه اولیه: روکش سبد خرید Prototype: Cart Overlay

• نمونه اولیه: پیشرفت سفارش Prototype: Order Progress

• تکلیف: ایجاد و طراحی یک برنامه تحویل کامل غذا Assignment: Create and Design a Full Food Delivery App

نمایش کار شما Showcasing Your Work

• منابع Figma برای این بخش Figma Resources For This Section

• آنچه ما قرار است یاد بگیریم What We Are Going to Learn

• کاپ چیست؟ What is Kap?

• با استفاده از Kap Using Kap

• Screencastify چیست؟ What is Screencastify?

• با استفاده از Screencastify Using Screencastify

از اینجا به کجا برویم؟ Where To Go From Here?

• متشکرم Thank You!

• یک فارغ التحصیل شوید Become An Alumni

• راهنمای یادگیری Learning Guideline

• تاییدیه های لینکدین LinkedIn Endorsements

بخش پاداش BONUS SECTION

• سخنرانی پاداش ویژه Special Bonus Lecture