آموزش جامع طراحی وب و موبایل – مبانی Figma و UI/UX - آخرین آپدیت

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

مقدمه Introduction

• مقدمه: تسلط بر طراحی وب و موبایل: Figma، ضروریات UI/UX و موارد دیگر Introduction: Master Web & Mobile Design: Figma, UI/UX Essentials, +More

• از صفر تا قهرمان Figma: راهنمای گام‌به‌گام شما From Zero to Figma Hero: Your Step-by-Step Guide

• از Figma تا کد: طراحی رابط‌های کاربری خیره‌کننده بدون نوشتن حتی یک خط کد Figma to Code Design Stunning Interfaces Without Writing a Line

• تفاوت UI و UX در جادوی طراحی Figma UI vs. UX in Figma Design Magic Explained

• ساخت اپلیکیشن‌ها و وب‌سایت‌هایی که عاشقشان می‌شوید (در این دوره Figma) Build Apps & Websites You'll Love (In This Figma Course)

• آموزش UX Briefs و جریان‌های کاری (Task Flows) در Figma Learn UX Briefs & Task Flows in Figma

وایرفریمینگ: اصول و بهترین روش‌ها Wireframing: Fundamentals and Best Practices

• مقایسه طراحی وایرفریم‌های Lo-Fi و Hi-Fi Lo-Fi vs Hi-Fi Wireframes Design Showdown

• فریم‌ها و فایل‌های طراحی در محیط Figma Frames & Design File in Figma Design (Interface)

تسلط بر تایپوگرافی، رنگ و آیکون‌ها Mastering Typography, Color, and Icons

• ابزار متن و فونت‌ها در Figma Figma Text Tool and Fonts

• مبانی Figma: چگونه اشکال را ایجاد و اصلاح کنیم Figma Basics How To CREATE And MODIFY SHAPES

• چگونه رنگ‌ها را در Figma انتخاب و استفاده کنیم How to Choose and use Colors in Figma

• Strokeها و به‌روزرسانی ویژگی‌های پیش‌فرض در Figma Strokes & Updating Default Properties in Figma

• حالت ویرایش شیء (Object Editing Mode) چیست و چگونه از آن استفاده کنیم! What is Object Editing Mode & How to Use It! In Figma

• چگونه از ابزار Scale و انتخاب استفاده کنیم How to Use The Scale Tool And Selection in Figma

• گروه‌ها و فریم‌ها در Figma برای طراحی‌های UI بهتر Figma Groups and Frames for Better UI Designs

• پروژه ۱: از طرح اولیه تا واقعیت: وایرفریمینگ طراحی در Figma Project 1: From Sketch to Reality: Wireframing Your Design in Figma

• بهترین مجموعه‌های رایگان آیکون برای طراحان UI/UX Best Free Icon Set Packs for UI/UX Designers

• مبانی آیکون در Figma Icon Basics In Figma

• چگونه پلاگین‌ها را در Figma نصب و استفاده کنیم How To Install And Use Plugins in Figma

• پروژه ۲: تسلط بر جعبه ابزار: آیکون‌ها و پلاگین‌ها برای طراحی‌های قدرتمند Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs

ساخت صفحات در Figma Creating Pages in Figma

• چگونه صفحات را در فایل Figma خود ایجاد و استفاده کنیم How To Create And Use Pages In Your Figma File

آشنایی با پروتوتایپینگ در Figma: راهنمای مبتدیان Introduction to Prototyping in Figma: A Beginner's Guide

• پروتوتایپینگ Figma برای مبتدیان Figma Prototyping for Beginners

• پروتوتایپینگ و انتقال‌ها (Transitions/Easing) در Figma Figma Prototyping & Transitions (Easing)

• تست پروتوتایپ با استفاده از Figma Mirror Figma Testing Prototype with Figma Mirror

• پروژه ۳: جادوی طراحی موبایل: نمایش اپلیکیشن خود در Figma Project 3: Mobile Design Magic: Showcase Your App in Figma

مبانی انیمیشن در Figma Figma Animation Basics

• آموزش Smart Animate در Figma برای مبتدیان Figma Smart Animate for Beginners

• پروژه ۴: جان بخشیدن به طراحی: ایجاد انیمیشن‌های هوشمند در Figma Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma

همکاری با دیگران: اشتراک‌گذاری، کامنت‌گذاری و ویرایش در Figma Collaborate with Others: Sharing, Commenting, and Editing in Figma

• اشتراک‌گذاری و بازخورد آنی در Figma Sharing & Feedback in Real-Time with Figma

• همکاری تیمی آنلاین و همزمان در Figma Figma Collaborate in Real-Time with Multiplayer

راهنمای جامع ساخت مودبورد (Moodboard) در Figma The Ultimate Guide to Creating Moodboards in Figma

• مودبورد چیست و راز پیدا کردن ایده برای طراحی وب و اپلیکیشن What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design

• چگونه یک مودبورد در Figma بسازیم How To Create A Mood Board In Figma

• پروژه ۵: ایستگاه الهام: ساخت یک مودبورد در Figma Project 5: Inspiration Station: Building a Moodboard in Figma

تسلط بر ستون‌ها و گریدها (Grids) در Figma Mastering Columns & Grids in Figma

• ایجاد سیستم گرید واکنش‌گرا برای طراحی وب و UI Create a Responsive Grid System for Web & UI Design

راهنمای کامل استفاده از رنگ‌ها در Figma The Ultimate Guide to Using Colors in Figma

• چگونه رنگ‌ها را انتخاب کنیم (الهام رنگی) How to Choose Colors (Color Inspiration)

• من چگونه پالت‌های رنگی UI را در Figma می‌سازم How I Make UI Color Palettes In Figma

• چگونه گرادینت (Gradient) در Figma بسازیم How To Create Gradients in Figma

• ایجاد یک سیستم رنگی در Figma Creating a Color System in Figma

• ساده‌ترین راه برای تولید پالت رنگی با استفاده از پلاگین‌ها Easiest Way to Generate Color Palette in Figma (Using Plugins)

• پروژه ۶: رنگ‌ها، استایل‌ها و گریدها در عمل! Project 6: Colors, Styles, and Grids in Action!

تسلط بر متن و فونت‌ها در Figma Mastering Text and Fonts in Figma

• بهترین روش‌ها برای انتخاب و ترکیب فونت‌ها در طراحی UI و وب Best Practices for Choosing Fonts and Font Pairing in UI and Web Design

• ایجاد مقیاس تایپوگرافی کامل برای پروژه‌های UI و وب Create the Perfect Typography Scale for UI & Web Projects

• سریع‌ترین راه برای ساخت Text Styles در Figma Fastest Way to Create Text Styles in Figma

• چگونه متن Lorem Ipsum را در Figma اضافه کنیم How to Add Lorem Ipsum Text in Figma

• نکات و ترفندهای مفید متن در Figma Useful Text Tips & Tricks in Figma

• چگونه فونت‌ها را به Figma اضافه کنیم و رفع مشکل فونت‌های مفقود شده How to Add Fonts in Figma and How To Add Missing Fonts in Figma

• پروژه ۷: مهارت در متن: تسلط بر استایل‌های متنی در Figma Project 7: Textpertise: Mastering Text Styles in Figma

ابزارهای ترسیم در Figma Figma's Drawing Tools

• مبانی ابزار Pen و شبکه‌های برداری (Vector Networks) Figma Pen Tool Basics & Vector Networks

• چرا آیکون‌های اپل متفاوت هستند؟ (Corner Smoothing) Why Are the Apple Icons Different (Corner Smoothing)

ضروریات Figma: کار با عملیات Boolean Figma Essentials: Working with Boolean Operations

• عملیات Boolean در Figma (اتحاد، تفریق، اشتراک، استثنا) Figma Boolean Operations (Union, Subtract, Intersect, Exclude)

• دوقلوی قدرتمند Figma: چه زمانی از Union و چه زمانی از Flatten استفاده کنیم Figma's Power Duo: When to Use Union and When to Flatten

• پروژه ۸: طراحی صفحه اصلی و منوی همبرگری در Figma Project 08: Homepage & Burger Menu Design in Figma

• چگونه از Smart Selection و Tidy Up در Figma استفاده کنیم How to Use Smart Selection and Tidy Up in Figma

ضروریات Figma: کار با تصاویر و دارایی‌ها (Assets) Figma Essentials: Working with Images and Assets

• قرار دادن تصاویر در Figma Placing Images in Figma

• ماسک‌ها در Figma (ماسک کردن تصویر و متن) Figma Masks (Mask Image and Text in Figma)

• پلاگین‌های تصویر برای طراحان UI/UX Figma Images Plugins for UI/UX Designers

• پروژه ۹: کیمیاگری تصاویر: تسلط بر تصاویر و پلاگین‌ها Project 9: Image Alchemy: Mastering Images & Plugins in Figma

ضروریات Figma: تسلط بر Auto Layout و Constraints Figma Essentials: Mastering Auto Layout and Constraints

• Auto Layout و Constraints در Figma Auto Layout And Constraints in Figma

• فاصله بین اشیاء در Auto Layout فیگما Figma Auto Layout Space Between Objects

• ساده‌سازی Constraints و تغییر اندازه Figma Constraints & Resizing Made SIMPLE

• استفاده از Nest Frames، Auto Layout و Constraints Nest Frames, Auto Layout And Constraints in Figma

• تکنیک‌های پیشرفته Auto Layout در Figma Advanced Auto Layout Techniques - Figma

• پروژه ۱۰: طراحی تطبیق‌پذیر: ایجاد چیدمان‌های واکنش‌گرا Project 10: Design That Adapts: Creating Responsive Layouts in Figma

ضروریات Figma: کار با افکت‌ها Figma Essentials: Working with Effects

• چگونه سایه‌های زیبا در طراحی UI بسازیم How to Make Beautiful Shadows - UI Design with Figma

• چگونه Blur پس‌زمینه و لایه را ایجاد کنیم How to Create Background Blur and Layer Blur in Figma

• پروژه ۱۱: بیایید سایه، بلور و دکمه‌های نرم اضافه کنیم! Project 11: Let's Add Shadows, Blurs, and Squishy Buttons!

ضروریات Figma: درک نحوه ذخیره‌سازی و تاریخچه نسخه‌ها Figma Essentials: Understanding Saving and Version History

• چگونه فایل‌های خود را ذخیره کنیم و به تاریخچه فایل دسترسی داشته باشیم How To Save Your Figma Files To Desktop and How To Access Figma File's History

ضروریات Figma: درک کامپوننت‌ها و ایجاد Instance Figma Essentials: Understanding Components and Creating Instances

• مبانی کامپوننت‌ها در Figma Figma Components - The Basics

• به‌روزرسانی، تغییر، ویرایش و ریست کردن کامپوننت‌ها Update, Change, Edit, and Reset Components In Figma

• چرا حذف Main Component غیرممکن است؟ (نکات و ترفندها) Deleting Main Components in Figma is Impossible (Tips & Tricks of Components)

• جابجایی کامپوننت‌های اصلی و نحوه سازماندهی آن‌ها Moving Main Components and How to Organize Your Components

• بهترین روش‌ها: نام‌گذاری لایه‌ها و منظم ماندن Figma Best Practices: Name Layers & Stay Organized

• پروژه ۱۲: بلوک‌های سازنده: تسلط بر کامپوننت‌ها Project 12: Building Blocks: Mastering Components in Figma

ضروریات Figma: بررسی قدرت Variant‌ها Figma Essentials: Exploring the Power of Variants

• کامپوننت‌ها و Variant‌ها برای مبتدیان Figma Components and Variants for Beginners

• ویژگی‌های کامپوننت (Component Properties) Figma Component Properties

• پروژه ۱۳: قدرت Variant‌ها: ارتقای طراحی با استفاده از واریانت‌ها Project 13: Variant Power: Supercharge Your Design with Variants

ضروریات Figma: تسلط بر طراحی و عملکرد فرم‌های ورودی Figma Essentials: Mastering Input Form Design and Functionality

• چگونه یک فیلد ورودی تعاملی طراحی کنیم How to Design an Interactive Input Field in Figma

• پروژه ۱۴: تسلط بر حساب کاربری و دسته‌بندی: طراحی جریان کاربر Project 14: Account & Category Mastery: Designing for User Flow in Figma

• چگونه رابط کاربری اعلان (Notification) طراحی کنیم How to Design a Notification UI Design in Figma

تکنیک‌های پیشرفته پروتوتایپینگ در Figma Advanced Prototyping Techniques in Figma

• چگونه پاپ‌آپ‌ها (Overlays) را اضافه کنیم How to Add Popup Overlays in Figma

• چگونه یک کامپوننت Tooltip بسازیم How to Create a TOOLTIP (Hover to Show Text) Component in Figma

• ساخت چندین پروتوتایپ و جریان‌های مجزا در یک صفحه How to Create Multiple Prototypes & Create Separate Flows on One Figma Page

• پروتوتایپ کردن انتقال‌های Overlay Prototyping Overlay Transitions in Figma

• پروژه ۱۵: پاپ‌آپ و جریان حرفه‌ای: پروتوتایپ کردن تعاملات Project 15: Pop Up & Flow Like a Pro: Prototyping Interactions in Figma

• اسکرول چسبنده (Sticky Scroll) در Figma Sticky Scroll in Figma

• چگونه انیمیشن اسکرول خودکار بسازیم How to Create Auto Scrolling Animation in Figma

ضروریات Figma: کار با تیم‌ها و مدیریت پروژه Figma Essentials: Working with Teams and Project Management

• تفاوت بین تیم‌ها، پروژه‌ها و صفحات The Difference Between Teams, Projects and Pages

ضروریات Figma: درک و استفاده از کتابخانه‌ها (Libraries) Figma Essentials: Understanding and Using Libraries

• ساخت یک کتابخانه تیمی قابل اشتراک‌گذاری در Figma Figma Create a Shareable Team Library

انیمیشن و ریزتعامل‌ها (Micro Interactions) در Figma Animation and Micro Interactions in Figma

• تفاوت انیمیشن و ریزتعامل (Micro Interaction) Animation vs Micro Interaction in Figma

• انیمیشن‌های جذاب دکمه در Figma Amazing Button Animations in Figma

• پروژه ۱۶: انیمیشن دکمه افزودن به سبد خرید Project 16: Add To Cart Button Animation

• پروژه ۱۷: حالت تاریک (Dark Mode) و روشن (Light Mode) Project 17: Dark Mode and Light Mode

• پروژه ۱۸: کمال در ابعاد جیبی: طراحی صفحه محصول و سبد خرید آیفون Project 18: Pocket-Sized Perfection: Design an iPhone Product Page & Cart

• ریزانیمیشن‌ها با استفاده از کامپوننت‌های تعاملی Micro Animations Using Interactive Components in Figma

• انیمیشن‌های Easing و Spring در پروتوتایپ Figma Prototype Easing & Spring Animations

• انیمیشن ضربان‌دار (Pulsing) در Figma Pulsing Animation in Figma

• پروژه ۱۹: کلیک نهایی: اتمام طراحی اپلیکیشن Clickkart Project 19: The Final Click: Finishing Your Clickkart App Design in Figma

ساخت تامنیل (Thumbnail) در Figma Figma Thumbnails

• چگونه تامنیل یا کاور پروژه را تنظیم کنیم How Do I Set a Project Thumbnail or Cover in Figma

تسلط بر خروجی گرفتن از Figma: راهنمای گام‌به‌گام Master Figma Export: A Step-by-Step Guide

• خروجی گرفتن از طراحی (PNG, JPG, SVG, PDF) How to Export Your Figma Design as Image (PNG, JPG, SVG, PDF)

• چگونه طرح‌های UX خود را مانند یک حرفه‌ای تحویل دهید (Hand off) How to Hand Off Your UX Designs Like a Pro

• آشنایی با سیستم‌های طراحی، منابع و الهامات Introduction to Design Systems, Resources, and Inspirations

رمزگشایی ذهن کاربر: روانشناسی پشت طراحی موثر UI/UX Decoding User Minds: The Psychology Behind Effective UI/UX Design

• ۱۰ اصل روانشناسی برای طراحی UX قدرتمند 10 Psychological Principles for Powerful UX Design

• بهره‌گیری از روانشناسی برای تجربه‌های کاربری شخصی‌سازی شده Leveraging Psychology for Personalized User Experiences: A Case Study

• روانشناسی رنگ در طراحی UI/UX Color Psychology in UI/UX Design

• پارادوکس خوشحالی: درک انطباق لذت‌جویانه در طراحی The Happiness Paradox: Understanding Hedonic Adaptation in UI/UX Design

• اثر دوپامین در طراحی UI/UX The Dopamine Effect in UI/UX Design

• قدرت صدا: چگونه صوت بر روانشناسی تجربه کاربری اثر می‌گذارد The Power of Sound: How Audio Shapes User Experience (UX) Psychology

ساخت پروژه‌های واقعی UI/UX Let's Build Real World UI/UX Projects

• مقدمه: پروژه‌های واقعی با Figma Intro - Real World Projects With Figma

• پروژه واقعی UI/UX شماره ۲: StayWave Real World UI/UX Project 2: StayWave

• پروژه واقعی UI/UX شماره ۳: اپلیکیشن سفارش غذا Real World UI/UX Project 3: Food Delivery App

• پروژه واقعی UI/UX شماره ۴: اپلیکیشن موسیقی Real World UI/UX Project 4: Music App

• پروژه واقعی UI/UX شماره ۵: اپلیکیشن DIY Real World UI/UX Project 5: DIY

گام‌های بعدی و سپاسگزاری: مسیر یادگیری شما در Figma Next Steps and Thank You: Your Figma Learning Path

• Figma برای طراحی UI/UX: شما فارغ‌التحصیل شدید! (قدم بعدی چیست؟) Figma for UI/UX Design: You've Graduated! (What's Next)