آموزش مگاکورس Figma را کامل کنید: طراحی UI/UX از مبتدی تا متخصص

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

معرفی Introduction

• به دوره + مرور کلی رابط کاربری خوش آمدید Welcome to the Course + User Interface Overview

• تحقیقات کاربر و نیازهای کاربر User Research and User Needs

• اصول رابط کاربری User Interface Principles

تدوین Drafting

• ایجاد حساب Figma Creating a Figma Account

• ایجاد یک فایل طراحی جدید Creating a New Design File

• نقشه برداری از سفر کاربر pt 1 Mapping the User Journey pt 1

• نقشه برداری از سفر کاربر pt 2 Mapping the User Journey pt 2

• ایجاد Wireframes Creation of Wireframes

نمونه سازی Prototyping

• ایجاد فریم Creating Frames

• ایجاد فریم ها Creating frames

• عملکرد ابزارها Function of Tools

• عملکرد ابزارها Function of tools

• استفاده از فونت Font Usage

• استفاده از فونت Font usage

• برنامه ریزی چیدمان Layout Planning

• برنامه ریزی چیدمان Layout planning

• چارچوب بندی ، لایه بندی و گروه بندی Framing, layering, and grouping

• قاب بندی، لایه بندی و گروه بندی Framing, Layering, and Grouping

• ایجاد و ویرایش اشکال Creating and editing shapes

• ایجاد و ویرایش اشکال Creating and Editing Shapes

• تصاویر و ماسک زدن Images and Masking

• اجزاء Components

• محدودیت ها و نسخه بندی Constraints and Versioning

• نمونه سازی Prototyping

• کتابخانه ها و تنظیمات تیم Team Libraries and Setups

• کتابخانه ها و تنظیمات تیم Team libraries and setups

• پیش نمایش و اظهار نظر Previewing and Commenting

• صادرات دارایی ها Exporting assets

• صادرات دارایی Exporting Assets

تظاهرات Demonstrations

• سناریوی برنامه 1 App Scenario 1

• سناریوی برنامه 2 App Scenario 2

• سناریوی برنامه 3 App Scenario 3

• سناریوی وب سایت 1 Website Scenario 1

• سناریوی وب سایت 2 Website Scenario 2

• کلمات اخر Last Words

به یادگیری ادامه دهید Keep Learning

• تئوری رنگ Color Theory

• مقایسه های رابط کاربری UI Comparisons

• ترفندهای سه بعدی دکمه و گراف گرادیان 3D Button and Gradient Graph Tricks

• ایجاد محتوا Content Creation

• بحث UI حرفه ای Pt. 1 Professional UI Discussion Pt. 1

• بحث UI حرفه ای Pt. 2 Professional UI Discussion Pt. 2

• فرم ها Forms

• دکمه ها Buttons

• پلاگین ها Plugins

• متحرک سازی دکمه های "لایک". Animating "Like" Buttons

• متحرک کردن منوی برگر Animating a Burger Menu

• تقویم تعاملی Interactive Calendar

• نمونه اولیه نتفلیکس Netflix Prototype

• اشتباهات مبتدی Beginner Mistakes

• پیش نمایش رابط Figma Figma Interface Preview

امتیاز: در مورد UX بیاموزید Bonus: Learn about UX

• مقدمه ای بر محتوا Introduction to the Content

• طراحی UX و UX چیست؟ What is UX and UX Design?

• اهمیت طراحی UX Importance of UX Design

• 7 فاکتور کلیدی تجربه کاربری 7 Key Factors of User Experience

• به شکاف همدلی توجه کنید Mind the Empathy Gap

دوره پیشرفته فیگما - مقدمه Advanced Figma Course - Introduction

• مقدمه Introduction

• خوش آمدید Welcome

• نقشه راه دوره Course Roadmap

• دوره 1 بررسی اجمالی و خلاصه Course 1 Overview and Recap

رویکرد The Approach

• فکر کنید - راه اندازی - طراحی - تکرار کنید Think - Setup - Design - Iterate

• بهترین روش ها در Figma Best Practices in Figma

تسلط بر طرح بندی خودکار Mastering Auto Layout

• مبانی Basics

• ویژگی ها: مثال های عملکردی Pt. 1 Properties: Functionality Examples Pt. 1

• ویژگی ها: مثال های عملکردی Pt. 2 Properties: Functionality Examples Pt. 2

• ویژگی ها: مثال های عملکردی Pt. 3 Properties: Functionality Examples Pt. 3

• ویژگی ها: مثال های عملکردی Pt. 4 Properties: Functionality Examples Pt. 4

• جمع کردن Pt. 1 Wrap up Pt. 1

• جمع کردن Pt. 2 Wrap up Pt. 2

سیستم های طراحی Design Systems

• سبک ها: کارشناس هوشمند 1 Styles: Intelligent Work Pt. 1

• سبک ها: کارشناس هوشمند 2 Styles: Intelligent Work Pt. 2

• همه چیز به عنوان یک جزء: ساختن طرح ها کارآمد و مقیاس پذیر Pt. 1 Everything as a Component: Making Designs Efficient and Scalable Pt. 1

• همه چیز به عنوان یک جزء: ساختن طرح ها کارآمد و مقیاس پذیر Pt. 2 Everything as a Component: Making Designs Efficient and Scalable Pt. 2

• همه چیز به عنوان یک جزء: ساختن طرح ها کارآمد و مقیاس پذیر Pt. 3 Everything as a Component: Making Designs Efficient and Scalable Pt. 3

• همه چیز به عنوان یک جزء: ساختن طرح ها کارآمد و مقیاس پذیر Pt. 4 Everything as a Component: Making Designs Efficient and Scalable Pt. 4

• نمونه سازی پیشرفته Pt. 1 Advanced Prototyping Pt. 1

• نمونه سازی پیشرفته Pt. 2 Advanced Prototyping Pt. 2

• کتابخانه های خارجی External Libraries

• مستندات Documentation

• جمع بندی: استاد سیستم های طراحی Wrap Up: Design Systems Master

بسته بندی کنید Wrap Up

• منابع پیشنهادی و خلاصه مفاهیم Recommended Resources and Summary of Concepts

موارد استفاده: کاربرد مفاهیم Use Cases: Applying Concepts

• وب پاسخگو (صفحه فرود) Pt. 1 Responsive Web (Landing page) Pt. 1

• وب پاسخگو (صفحه فرود) Pt. 2 Responsive Web (Landing page) Pt. 2

• وب پاسخگو (صفحه فرود) Pt. 3 Responsive Web (Landing page) Pt. 3

• وب پاسخگو (صفحه فرود) Pt. 4 Responsive Web (Landing page) Pt. 4

• وب پاسخگو (صفحه فرود) Pt. 5 Responsive Web (Landing page) Pt. 5

• سایت تجارت الکترونیک پاسخگو (جریان ثبت نام) Pt. 1 Responsive E-commerce Site (Registration Flow) Pt. 1

• سایت تجارت الکترونیک پاسخگو (جریان ثبت نام) Pt. 2 Responsive E-commerce Site (Registration Flow) Pt. 2

• سایت تجارت الکترونیک پاسخگو (جریان ثبت نام) Pt. 3 Responsive E-commerce Site (Registration Flow) Pt. 3

• سایت تجارت الکترونیک پاسخگو (جریان ثبت نام) Pt. 4 Responsive E-commerce Site (Registration Flow) Pt. 4

• سایت تجارت الکترونیک پاسخگو (جریان ثبت نام) Pt. 5 Responsive E-commerce Site (Registration Flow) Pt. 5

• داشبورد مبادله رمزنگاری (تبدیل جریان دارایی های رمزنگاری شده) Pt. 1 Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 1

• داشبورد مبادله رمزنگاری (تبدیل جریان دارایی های رمزنگاری شده) Pt. 2 Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 2

• داشبورد مبادله رمزنگاری (تبدیل جریان دارایی های رمزنگاری شده) Pt. 3 Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 3

• داشبورد مبادله رمزنگاری (تبدیل جریان دارایی های رمزنگاری شده) Pt. 4 Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 4

• داشبورد مبادله رمزنگاری (تبدیل جریان دارایی های رمزنگاری شده) Pt. 5 Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 5

• برنامه Android - Smart Translate (جریان ترجمه) Pt. 1 Android App - Smart Translate (Translation Flow) Pt. 1

• برنامه Android - Smart Translate (جریان ترجمه) Pt. 2 Android App - Smart Translate (Translation Flow) Pt. 2

• برنامه Android - Smart Translate (جریان ترجمه) Pt. 3 Android App - Smart Translate (Translation Flow) Pt. 3

• برنامه Android - Smart Translate (جریان ترجمه) Pt. 4 Android App - Smart Translate (Translation Flow) Pt. 4

• برنامه Android - Smart Translate (جریان ترجمه) Pt. 5 Android App - Smart Translate (Translation Flow) Pt. 5

• برنامه IOS - برنامه بانکی (ارسال جریان پول) Pt. 1 IOS App - Banking App (Sending Money Flow) Pt. 1

• برنامه IOS - برنامه بانکی (ارسال جریان پول) Pt. 2 IOS App - Banking App (Sending Money Flow) Pt. 2

• برنامه IOS - برنامه بانکی (ارسال جریان پول) Pt. 3 IOS App - Banking App (Sending Money Flow) Pt. 3

• برنامه IOS - برنامه بانکی (ارسال جریان پول) Pt. 4 IOS App - Banking App (Sending Money Flow) Pt. 4

• برنامه IOS - برنامه بانکی (ارسال جریان پول) Pt. 5 IOS App - Banking App (Sending Money Flow) Pt. 5

• برنامه IOS - برنامه اجاره خودرو (جریان اجاره خودرو) Pt. 1 IOS App - Car Rental App (Renting a Car Flow) Pt. 1

• برنامه IOS - برنامه اجاره خودرو (جریان اجاره خودرو) Pt. 2 IOS App - Car Rental App (Renting a Car Flow) Pt. 2

• برنامه IOS - برنامه اجاره خودرو (جریان اجاره خودرو) Pt. 3 IOS App - Car Rental App (Renting a Car Flow) Pt. 3

• برنامه IOS - برنامه اجاره خودرو (جریان اجاره خودرو) Pt. 4 IOS App - Car Rental App (Renting a Car Flow) Pt. 4

• برنامه IOS - برنامه اجاره خودرو (جریان اجاره خودرو) Pt. 5 IOS App - Car Rental App (Renting a Car Flow) Pt. 5

مراحل بعدی Next Steps

• مراحل بعدی Next Steps

• آخرین کلمات Last Words