آموزش طراحی اصلی وب و موبایل: Figma، UI/UX Essentials، + بیشتر

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

معرفی Introduction

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

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

• UI در مقابل UX در Figma Design Magic توضیح داده شد UI vs. UX in Figma Design Magic Explained

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

• خلاصه UX و جریان وظیفه را در Figma بیاموزید Learn UX Briefs & Task Flows in Figma

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

• مسابقه طراحی Lo-Fi در مقابل Hi-Fi Wireframes Lo-Fi vs Hi-Fi Wireframes Design Showdown

• فایل فریم و طراحی در Figma Design (رابط) 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

• Strokes و به روز رسانی ویژگی های پیش فرض در figma Strokes & updating default properties in figma

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

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

• گروه ها و فریم های Figma برای طراحی های UI بهتر Figma groups and frames for better UI designs

• پروژه 1: از اسکچ تا واقعیت: قالب بندی طرح شما در Figma Project 1: From Sketch to Reality: Wireframing Your Design in Figma

• پروژه 1: از اسکچ تا واقعیت: قالب بندی طرح شما در Figma Project 1: From Sketch to Reality: Wireframing Your Design in Figma

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

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

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

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

• پروژه 2: تسلط بر جعبه ابزار: نمادها و پلاگین ها برای طراحی های قدرتمند 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

• Figma Prototyping & Transitions (Easing) Figma Prototyping & Transitions (Easing)

• نمونه اولیه آزمایش Figma با آینه Figma Figma Testing Prototype with Figma Mirror

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

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

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

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

• پروژه 4: زندگی را در طراحی خود تنفس کنید: ایجاد انیمیشن های هوشمند در Figma Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma

• پروژه 4: زندگی را در طراحی خود تنفس کنید: ایجاد انیمیشن های هوشمند در 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

راهنمای نهایی برای ایجاد Moodboards در 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

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

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

تسلط بر ستون ها و شبکه ها در Figma Mastering Columns & Grids in Figma

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

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

• نحوه انتخاب رنگ (الهام از رنگ) How to Choose Colors (Color Inspiration)

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

• نحوه ایجاد گرادیان در Figma How To Create Gradients in Figma

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

• ساده ترین راه برای تولید پالت رنگ در Figma (با استفاده از پلاگین ها) Easiest way to generate color palette in Figma (Using Plugins)

• پروژه 6: رنگ ها، سبک ها و شبکه ها در عمل! 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

• سریع ترین راه برای ایجاد سبک های متن در 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 و نحوه افزودن فونت های گمشده در Figma How to add fonts in Figma and How TO Add missing fonts in Figma

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

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

ابزارهای طراحی Figma Figma's Drawing Tools

• Figma Pen Tool Basics & Vector Networks Figma Pen Tool Basics & Vector Networks

• چرا نمادهای اپل متفاوت هستند (هموارسازی گوشه) Why are the Apple icons different (corner smoothing)

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

• عملیات بولی Figma (اتحاد، تفریق، قطع، حذف) Figma Boolean Operations (Union, Subtract, Intersect, Exclude)

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

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

• پروژه 08: طراحی صفحه اصلی و منو برگر در 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 Essentials: کار با تصاویر و دارایی ها Figma Essentials: Working with Images and Assets

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

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

• پلاگین های Figma images برای طراحان UIUX Figma images Plugins for UIUX Designers

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

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

Figma Essentials: Mastering Auto Layout and Constraints Figma Essentials: Mastering Auto Layout and Constraints

• چیدمان خودکار و محدودیت ها در Figma Auto Layout And Constraints In Figma

• Figma Layout Auto Space Between Objects Figma Auto Layout Space Between Objects

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

• Nest Frames، چیدمان خودکار و محدودیت ها در Figma Nest Frames,Auto Layout And Constraints In Figma

• تکنیک های چیدمان خودکار پیشرفته - Figma Advanced Auto Layout Techniques - Figma

• پروژه 10: طراحی سازگار: ایجاد طرح‌بندی‌های واکنش‌گرا در Figma Project 10: Design that Adapts: Creating Responsive Layouts in Figma

• پروژه 10: طراحی سازگار: ایجاد طرح‌بندی‌های واکنش‌گرا در Figma Project 10: Design that Adapts: Creating Responsive Layouts in Figma

Figma Essentials: کار با افکت ها Figma Essentials: Working with Effects

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

• نحوه ایجاد Blur پس زمینه و لایه Blur در Figma How to Create Background Blur and layer Blur in Figma

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

Figma Essentials: Understanding Saving and Version History Figma Essentials: Understanding Saving and Version History

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

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

• اجزای Figma - مبانی Figma Components - The Basics

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

• حذف اجزای اصلی در figma غیرممکن است (نکات و ترفندهای کامپوننت) Deleting main components in figma is impossible (Tips & Tricks of components)

• جابجایی اجزای اصلی و نحوه سازماندهی اجزای خود Moving main components and how to Organize Your Components

• بهترین روش های Figma نام لایه ها و سازماندهی ماندن Figma Best Practices Name Layers & Stay Organized

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

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

Figma Essentials: Exploring the Power of Variants Figma Essentials: Exploring the Power of Variants

• اجزا و انواع Figma برای مبتدیان Figma components and variants for beginners

• ویژگی های کامپوننت Figma Figma Component properties

• پروژه 13: قدرت متغیر: طراحی خود را با انواع مختلف شارژ کنید Project 13: Variant Power: Supercharge Your Design with Variants

• پروژه 13: قدرت متغیر: طراحی خود را با انواع مختلف شارژ کنید Project 13: Variant Power: Supercharge Your Design with Variants

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

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

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

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

• نحوه طراحی یک طراحی رابط کاربری Notification در Figma How to design a Notification UI design in Figma

تکنیک های نمونه سازی پیشرفته در Figma Advanced Prototyping Techniques in Figma

• نحوه افزودن همپوشانی پاپ آپ در Figma How to Add Popup Overlays in Figma

• چگونه یک مؤلفه TOOLTIP (مانوس را برای نمایش متن) در Figma ایجاد کنیم How To Create a TOOLTIP (Hover to Show Text) Component in Figma

• نحوه ایجاد چند نمونه اولیه و ایجاد جریان های جداگانه در یک صفحه Figma. How to Create Multiple Prototypes & Create Separate Flows on One Figma Page.

• نمونه سازی انتقال همپوشانی در Figma Prototyping overlay transitions in Figma

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

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

• اسکرول چسبنده در Figma Sticky Scroll In Figma

• نحوه ایجاد انیمیشن اسکرول خودکار در Figma How to Create Auto Scrolling Animation in Figma

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

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

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

• Figma یک کتابخانه تیمی قابل اشتراک‌گذاری ایجاد کنید Figma Create a shareable team library

انیمیشن و تعاملات خرد در Figma Animation and Micro Interactions in Figma

• انیمیشن VS Micro Interaction در Figma Animation VS Micro Interaction In Figma

• انیمیشن های دکمه ای شگفت انگیز در Figma Amazing Button Animations in Figma

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

• پروژه 17: حالت تاریک و حالت روشن Project 17: Dark Mode And Light Mode

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

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

• انیمیشن های میکرو با استفاده از اجزای تعاملی در Figma Micro animations using interactive components in Figma

• Figma Prototype easing & Spring animations Figma Prototype easing & spring animations

• انیمیشن ضربان دار در Figma Pulsing animation in Figma

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

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

ریز عکسها Figma Figma Thumbnails

• چگونه می توانم یک تصویر کوچک یا جلد پروژه را در Figma تنظیم کنم How do I set a project thumbnail or cover in Figma

Master Figma Export: راهنمای گام به گام Master Figma Export: A Step-by-Step Guide

• نحوه صادرات طرح Figma به عنوان تصویر (PNG، JPG، SVG، PDF) How to Export Your Figma Design as Image (PNG,JPG,SVG,PDF)

• چگونه از طرح های UX خود مانند یک PRO استفاده کنید How to Hand off your UX designs like a PRO

• مقدمه ای بر منابع و الهامات سیستم های طراحی Introduction to design systems resources and inspirations

بیایید پروژه UIUX دنیای واقعی بسازیم Let's Build Real World UIUX Project

• مقدمه - پروژه های دنیای واقعی با figma Intro - Real world projects With figma

• پروژه دنیای واقعی UIUX 2 StayWave Real World UIUX Project 2 StayWave

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

• برنامه تحویل غذا در دنیای واقعی UIUX Project 3 Real World UIUX Project 3 Food Delivery App

• برنامه تحویل غذا در دنیای واقعی UIUX Project 3 Real World UIUX Project 3 Food Delivery App

• برنامه موسیقی Real World UIUX Project 4 Real World UIUX Project 4 Music App

• برنامه موسیقی Real World UIUX Project 4 Real World UIUX Project 4 Music App

• Real World UIUX Project 5 DIY Real World UIUX Project 5 DIY

• Real World UIUX Project 5 DIY Real World UIUX Project 5 DIY