آموزش Figma UI UX Design Advanced

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

معرفی Introduction

• مقدمه دوره پیشرفته Figma Intro to the Figma Advanced Course

• شروع دوره پیشرفته Figma Getting Started in Figma Advanced Course

طرح بندی خودکار - سطح 1 Auto Layout - Level 1

• طرح‌بندی خودکار و طراحی واکنش‌گرا 101: در طراحی واکنش‌گرا استفاده می‌شود Auto Layout & Responsive Design 101: It's use in responsive design

• طراحی در Figma با فاصله خودکار در طرح بندی خودکار Designing in Figma with Auto Spacing in Auto Layouts

• چه زمانی و چه زمانی از Component ها در Figma استفاده نکنید When and when not to use Components in Figma

• چه فاصله ای مناسب برای استفاده در Figma است What is good spacing to use in Figma

• از چه فاصله ای برای طراحی وب و اپلیکیشن در Figma استفاده کنم What spacing should I use for web & app design in Figma

• Layout خودکار در مقابل محدودیت ها در Figma Auto Layout vs Constraints in Figma

• میانبرهای Autolayout: نکات و ترفندهایی برای کار سریعتر با Auto Layout Autolayout shortcuts: Tips and tricks to work with Auto Layout faster

• کلاس پروژه 01 - ناوبری پایین پاسخگو Class Project 01 - Responsive Lower Navigation

• پروژه کلاس 01 - ناوبری پایین پاسخگو Class project 01 - Responsive Lower Navigation

ترفندهای پیشرفته گردش کار Advanced Workflow Tricks

• نحوه مدیریت فایل ها در Figma و تبدیل شدن به یک استاد مدیریت فایل How to handle files in Figma and become a File Handling Master

• چگونه از ترفندهای پیشرفته کپی، چسباندن و انتخاب در فیگما استفاده کنیم؟ How to use advanced Copy, Paste, and Selection Tricks in Figma?

• چگونه با فیلدهای فیگما کارهای دیوانه کننده انجام دهیم؟ How to do crazy things with your Figma fields?

• ترفندهای فریم: نکات و ترفندهایی برای کار موثر با فریم های Figma Frame Tricks: Tips and Tricks to work with Figma frames effectively

• تکنیک های زوم پیشرفته برای کار دقیق در Figma Advanced Zooming Techniques for precision work in Figma

• تم روشن یا تاریک در مقابل سیستم: کدام یک را در Figma استفاده کنیم؟ Light or Dark vs System Theme: Which one to use in Figma?

• کلاس پروژه 02 - محدودیت های کارت رویداد Class Project 02 - Event Card Constraints

• پروژه کلاس 02 - محدودیت های کارت رویداد Class project 02 - Event Card Constraints

• پروژه کلاس 02 - محدودیت های کارت رویداد - تکمیل شد Class Project 02 - Event Card Constraints - Completed

شبکه ها Grids

• Grid v Constraints v Autolayout در Figma: کدام یک و چه زمانی استفاده شود؟ Grid v Constraints v Autolayout in Figma: Which one to use and when?

• نحوه کپی و چسباندن شبکه‌ها و صادرات استایل‌های شبکه در Figma How to copy & paste grids and export grid styles in Figma

• نحوه اضافه کردن ردیف ها و شبکه های ستونی به یک طرح در Figma How to add rows and column grids to one layout in Figma

• نحوه به روز رسانی Grid Styles در Figma How to update Grid Styles in Figma

• شبکه های داخل قاب هایی که قاب اصلی نیستند Grids inside of frames that aren't the main frame

نام تجاری اپلیکیشن ساده Simple App Brand

• پروژه کلاس 03 - برندسازی رویداد Class project 03 - Event Branding

• پروژه کلاس 03 - برندسازی رویداد Class project 03 - Event Branding

• لوگوها با استفاده از Iconscout: چگونه از Iconscout برای ایجاد لوگو در Figma استفاده کنیم؟ Logos using Iconscout: How to use Iconscout to create logos in Figma?

• ویجت در مقایسه با پلاگین ها در Figma چیست؟ What are widget compared to plugins in Figma?

• چگونه با استفاده از ویجت Figma انواع رنگ های ux ایجاد کنیم؟ How to create ux color variants using a Figma Widget ?

طرح‌بندی خودکار تودرتو و پاسخگو Nested & Responsive Auto layouts

• معرفی بخش طرح‌بندی خودکار تودرتو و پاسخگو Intro to Nested & Responsive Auto layouts Section

• فیلم تولید - مرتب کردن بهم ریختگی قاب و اجزای من Production video - Tidying up my frame & component mess

• تصاویر را با استفاده از افزونه unsplash در Figma وارد کنید Bring in images using the unsplash plugin in Figma

• فیلم تولید - ساخت قطعات برای طرح خودکار تو در تو Production video - Making the parts for our nested autolayout

• تودرتوی چند طرح خودکار در داخل یکدیگر در Figma Nesting Multiple Auto Layouts inside each other in Figma

• طراحی خودکار تودرتو با انواع و متن پاسخگو در Figma Autolayout Nesting with variants and responsive text in Figma

• طرح بندی خودکار در اندازه های مختلف دستگاه - نحوه ایجاد طرح بندی خودکار پیشرفته Auto Layout on different device sizes- How to make advanced Auto Layouts

• متن پاسخگو که برای 2 خط در Figma تنظیم می شود Responsive text that adjusts for 2 lines in Figma

انیمیشن - سطح 1 Animation - Level 1

• پس زمینه انتزاعی گرادیان در Figma راه آسان Abstract Gradient Background in Figma the easy way

• نحوه کپی و پیست کردن Interactions در Figma How to copy and paste Interactions in Figma

• نحوه متحرک سازی مش گرادیان با استفاده از Variants در Figma How to animate gradient mesh using Variants in Figma

• نحوه ارائه بازخورد در مورد یک پروژه UX - The Critique Sandwich How to give feedback on a UX project - The Critique Sandwich

• پروژه کلاس 04 - انیمیشن پس زمینه Class project 04 - Background Animation

• پروژه کلاس 04 - انیمیشن پس زمینه Class project 04 - Background Animation

• Houdini Text: چگونه یک انیمیشن ماسک متنی فیگما بسازیم؟ Houdini Text: How to make a text mask animation Figma?

• نحوه استفاده از انیمیشن های Spring در Figma How to use the Spring Animations in Figma

• انیمیشن Spring: نحوه ساخت انیمیشن بهار سفارشی در Figma Spring Animation: How to make custom Spring Animation in Figma

• چرا تعامل با ضربه زدن روی کلیک خاکستری است و در Figma وجود ندارد؟ Why is interaction on tap on click grayed out of missing in Figma?

• پروژه کلاس 05 - انیمیشن متنی هودینی Class project 05 - Houdini Text Animation

• پروژه کلاس 05 - انیمیشن متنی هودینی Class project 05 - Houdini Text Animation

نمونه سازی - سطح 1 Prototyping - Level 1

• در Figma چندین سیم رشته فرنگی را به طور همزمان ایجاد و حذف کنید Create & remove bulk multiple noodles wires at once in Figma

• نحوه به‌روزرسانی انبوه لینک‌های ناو در نمونه اولیه Figma How to bulk update nav links in your Figma prototype

• نحوه تنظیم گوشی مناسب و پیدا کردن نمونه اولیه گوشی های قدیمی در Figma How to set the right phone and find old prototype phones in Figma

• نحوه ایجاد نوار جستجوی موقعیت اسکرول چسبنده در Figma How to make sticky scroll position search bar in Figma

• نحوه انباشتن چند متن چسبنده عمودی اسکرول در Figma How to stack multiple sticky text vertical scrolling in Figma

• پروژه کلاس 06 - چند عنوان چسبنده Class project 06 - Multiple Sticky Headings

• پروژه کلاس 06 - چند عنوان چسبنده Class project 06 - Multiple Sticky Headings

• نحوه ساخت کامپوننت های تعاملی در Figma How to make Interactive Components in Figma

• چگونه یک علامت چک را در Figma روشن و خاموش کنیم How to make a checkmark turn on and off in Figma

• اجزای تعاملی با دکمه کشویی در مسیریابی برای Figma Interactive components with sliding button in navigation for Figma

• پروژه کلاس 07 - چالش Nav Button Sliding Class project 07 - Sliding Button Nav Challenge

• پروژه کلاس 07 - چالش Nav Button Sliding Class project 07 - Sliding Button Nav Challenge

• پروژه کلاس 07 - تکمیل شد Class project 07 - Completed

• نحوه استفاده از Sections در Figma برای سازماندهی محتوای خود How to use Sections in Figma for organizing your content

• نحوه استفاده از بخش ها برای نمونه سازی در Figma How to use sections for prototyping in Figma

• نحوه اضافه کردن نوار وضعیت بریدگی وای فای باتری iOS به Figma How to add iOS battery wifi notch status bar to Figma

• نحوه اضافه کردن رابط کاربری iOS یا Android Snack Bar به Figma How to add iOS or Android Snack Bar UI to Figma

• پروژه کلاس 08 - رابط کاربری سیستم عامل Class project 08 - Operating System UI

• پروژه کلاس 08 - رابط کاربری سیستم عامل Class project 08 - Operating System UI

• مراقب باشید که در Figma چه چیزی ایجاد می کنید Be careful what you create in Figma

لایه های پیشرفته Advanced Layers

• میانبرهای لایه پیشرفته در Figma چیست؟ What are the advanced Layer shortcuts in Figma

• چگونه میانبرهای لایه Zen را در Figma پیدا کنیم How to find layer Zen shortcuts in Figma

• نحوه مخفی کردن و قفل باز کردن تمام لایه ها در Figma How to hide and lock unlock all layers in Figma

• نحوه استفاده از لایه های قفل شده در Figma How to use Locked layers in Figma

• نحوه یافتن جایگزینی و جستجوی چندلایه در Figma How to Find Replace and Multi-select Layer Search in Figma

• نحوه تغییر نام انبوه لایه ها با ترفندهای پیشرفته در Figma How to Bulk Rename Layers with advanced tricks in Figma

اجزا و انواع - سطح 1 Components & Variants - Level 1

• نحوه جایگزینی نمونه ها و انواع با میانبرها در Figma How to replace instances and variants with shortcuts in Figma

• نحوه استفاده از ویژگی های Instance Swap Component with preferred در Figma How to use Instance Swap Component Properties with preferred in Figma

• نحوه استفاده از Component Text Property در Figma How to use Component Text Property in Figma

• نحوه استفاده از Property Component Boolean در Figma How to use Boolean Component Property in Figma

• نحوه ایجاد یک فیلد ورودی فقط با استفاده از ویژگی های جزء در Figma How to make a input field using only component properties in Figma

• نحوه ترکیب واریانت ها با ویژگی های کامپوننت در Figma How to Combine Variants with Component Properties in Figma

• نحوه اعمال ویژگی های جزء در سیستم های طراحی موجود How to apply component properties to existing design systems

• Simplify Instances در Figma چیست؟ What is Simplify Instances in Figma

• Expose Nested Instances در Figma چه می کند What does Expose Nested Instances do in Figma

• پروژه کلاس 09 - یک دکمه برای حکومت بر همه آنها Class project 09 - One button to rule them all

• پروژه کلاس 09 - یک دکمه برای حکومت بر همه آنها Class project 09 - One button to rule them all

تایپوگرافی Typography

• نکات و ترفندهای فونت در Figma چیست What are some font tips and tricks in Figma

• نحوه مشاهده پیش نمایش فونت زنده در Figma How to see Live Font Previews in Figma

• نحوه بازنشانی فونت ها و تنظیم فونت های پیش فرض در Figma How reset fonts & set default fonts in Figma

• نحوه استفاده از درصد ارتفاع خط در شبکه 8pt در Figma How to Use Line Height Percentage in 8pt grid in Figma

• نحوه استفاده از تریم پیشرو برای درپوش ارتفاع تا خط پایه در Figma How to use Leading trim to cap height to baseline in Figma

• نحوه تنظیم نشانه گذاری آویزان برای نقل قول ها و خروجی های تماس در Figma How to set Hanging Punctuation for pull quotes & call outs in Figma

• گزینه های نوع پیشرفته در Figma چیست؟ What are the Advanced Type Options in Figma

• نحوه استفاده از Variable Type در طراحی اپلیکیشن UX در Figma How to use Variable Type in UX app design in Figma

• نحوه منحنی کردن متن با نوع در یک مسیر در Figma How to curve text with type on a path in Figma

• نحوه استفاده از فونت های adobe و فونت های محلی در Figma How to use adobe fonts & local fonts in Figma

• چگونه می توان متن را نادیده گرفت یا نه در نوع Figma How to Preserve text overrides or not in Figma variant

• نحوه استفاده از Chat GPT AI برای ایجاد مکان یا پرسونا در Figma How to use Chat GPT AI to create placeholder and personas in Figma

تصویرسازی Imagery

• نحوه ایجاد استایل تصویر در Figma How to create an image style in Figma

• تفاوت تصاویر درون فریم در مقابل پر کردن در مقابل ماسک شده در Figma چیست What's the difference with Images inside frames vs fills vs Masked in Figma

• نحوه برش تصاویر با استفاده از میانبرها در Figma How to crop images using shortcuts in Figma

• نحوه ماسک کردن تصاویر با متن در Figma How to mask images with text in Figma

• پروژه کلاس 10 - ماسک متنی Class Project 10 - Text Mask

• پروژه کلاس 10 - ماسک متن Class project 10 - Text Mask

• نحوه ماسک کردن با استفاده از png های شفاف با کانال های آلفا در Figma How to mask using transparent pngs with alpha channels in Figma

• پروژه کلاس 11 - ماسک آلفا Class Project 11 - Alpha Mask

• پروژه کلاس 11 - ماسک آلفا Class project 11 - Alpha Mask

• نحوه ایجاد ماسک لوما در فیگما How to create a luma mask in Figma

• پروژه کلاس 12 - ماسک لوما Class project 12 - Luma Mask

• پروژه کلاس 12 - ماسک لوما Class project 12 - Luma Mask

• نحوه ساخت ماسک سرریز خارج از قاب در فیگما How to make a spillover mask outside of the frame in Figma

• نحوه استفاده از ابزار pen برای ساخت ماسک تصویر در Figma How to use the pen tool to make image masks in Figma

• نحوه استفاده از حالت های ترکیب لایه رنگ در Figma How to use color layer blending modes in Figma

• پروژه کلاس 13 - آگهی اجتماعی Class project 13 - Social Ad

• پروژه کلاس 13 - تبلیغ رسانه های اجتماعی Class project 13 - Social Media Ad

ویدیو Video

• نحوه اضافه کردن ویدئو در Figma How to add video in Figma

• نحوه ساخت ویدیو پخش خودکار پس زمینه در Figma How to make a background autoplay video in Figma

• نحوه پخش ویدیو با شناور در Figma How to get a video play when you hover in Figma

• پروژه کلاس 14 - بازی شناور Class project 14 - Hover Play

• پروژه کلاس 14 - بازی شناور Class project 14 - Hover Play

• نحوه ساخت دکمه توقف پخش برای ویدیو در Figma How to make a play pause button for video in Figma

• نحوه ساخت کارت گرافیک در Figma How to build a video card in Figma

• پروژه کلاس 15 - کارت ویدیو Class project 15 - Video Card

• پروژه کلاس 15 - کارت ویدیو Class project 15 - Video Card

رنگ Color

• چند ترفند رنگی پیشرفته در figma چیست؟ What are some advanced color tricks in figma

• نحوه تغییر رنگ های جایگزین در Figma How to change replace colors in Figma

• نحوه ایجاد تم های رنگی برای روشن و تاریک در Figma How to create Color Themes for light and dark in Figma

سبک ها و کتابخانه ها Styles & Libraries

• نحوه گروه بندی سبک های رنگی با استفاده از اسلش یا پوشه ها در Figma How to group color styles using slashes or folders in Figma

• نحوه توصیف استایل های خود در Figma برای استفاده دیگران How to descriptions to your styles in Figma for others to use

• ویرایش استایل ها یا کتابخانه اجزای شخص دیگری در Figma Editing someone else's styles or component library in Figma

• نحوه پنهان کردن سبک ها و اجزای فونت رنگی از کتابخانه تیم در Figma How to hide color font styles & components from team library in Figma

• نحوه مقایسه تغییرات کامپوننت با همپوشانی در Figma How to compare changes in component with overlay in Figma

• نحوه بازآفرینی استایل ها به یک فایل طراحی دیگر در Figma How to refactoring styles to another design file in Figma

• نحوه انتقال اجزای Refactoring Relink به یک فایل طراحی دیگر در Figma How to move relink refactoring components to another design file in Figma

• نحوه تعویض قطعات یا کل کتابخانه مؤلفه و سبک در Figma How to swap parts or entire component & style library in Figma

طراحی، سکته مغزی و پر کردن Drawing, Stroke & Fill

• نکات و ترفندهای طراحی پیشرفته در figma چیست What are some advanced drawing tips and tricks in figma

• نحوه ترسیم در Figma با ابزار pen- Anchor point mastery How to draw in Figma with the pen tool- Anchor point mastery

• نحوه ترسیم با زاویه Bend & Mirror در Figma How to draw with Bend & Mirror angle in Figma

• آیا می توانید نقاط لنگر یا بولین را در Figma متحرک کنید Can you animated anchor points or booleans in Figma

• نحوه متحرک سازی منوی ناوبری موبایل در Figma با استفاده از dip How to animate a mobile nav menu in Figma using a dip

• پروژه کلاس 16 - انیمیشن Alt Nav Class project 16 - Alt Nav Animation

• پروژه کلاس 16 - انیمیشن Alt Nav Class project 16 - Alt Nav Animation

طرح بندی خودکار - سطح 2 Auto Layout - Level 2

• نحوه همپوشانی و چیدن چیزها در طرح خودکار Figma How to overlap & stack things in a Figma Autolayout

• میانبرهای hug & fill in Figma چیست؟ What are the shortcuts for hug & fill in Figma

• نحوه تنظیم فاصله مطلق به طوری که همه چیز از Autolayout در Figma چشم پوشی کند How to set absolute spacing so things ignore Autolayout in Figma

• نحوه قرار دادن مطلق چیزی که در Figma پاسخگو است How to absolute position something that is responsive in Figma

• چگونه چیزها را به سمت راست پایین طرح‌بندی خودکار در Figma بچسبانید How stick things to the bottom right of an auto layout in Figma

• چگونه اندازه یک کادر را به صورت خودکار در یک طرح خودکار برای مطابقت با متن در Figma تغییر دهید How to resize a box automatically in a Auto Layout to match text in Figma

• میانبرهای لایه بندی خودکار و تغییر اندازه چیست؟ What are the autolayout padding and resizing shortcuts

• نحوه ایجاد دکمه حداقل عرض ارتفاع در Figma How to create a minimum width height button in Figma

• نحوه قرار دادن اشیاء طرح بندی خودکار در Figma How to wrap auto layout objects in Figma

• معنی سکته مغزی شامل حذف شده در چیدمان خودکار Figma چیست What does stroke included excluded mean in Figma auto layout

• نحوه تنظیم فاصله سفارشی در طرح بندی خودکار در Figma How to set custom spacing in auto layouts in Figma

اجزا و انواع - سطح 2 Components & Variants - Level 2

• نحوه سازماندهی کامپوننت ها به گروه ها در Figma How to organize Components into groups in Figma

• نحوه ایجاد کامپوننت های Slot placehold در Figma How to create slot placehold components in Figma

• چگونه یک وب سایت موجود را به طرح figma تبدیل کنیم How to convert an existing website into a figma design

نمونه سازی - سطح 2 Prototyping - Level 2

• نحوه ایجاد یک کشویی با استفاده از همپوشانی در Figma How to make a drop down using overlays in Figma

• نحوه ایجاد یک منوی کشویی چند سطحی در Figma How to make a multi level drop down menu in Figma

• پروژه کلاس 17 - منوی کشویی تودرتو Class project 17 - Nested Dropdown Menu

• پروژه کلاس 17 - منوی کشویی تودرتو Class project 17 - Nested Dropdown Menu

• نحوه ایجاد افکت رشد شناور برای تصاویر در Figma How to create a hover grow effect for images in Figma

• پروژه کلاس 18 - جلوه رشد شناور Class project 18 - Hover Grow Effect

• پروژه کلاس 18 - جلوه رشد شناور Class project 18 - Hover Grow Effect

• چگونه یک نوار جستجو در حال گسترش در Figma ایجاد کنیم How to make an expanding Search Bar in Figma

• پروژه کلاس 19 - گسترش نوار جستجو Class project 19 - Expanding Search Bar

• پروژه کلاس 19 - گسترش نوار جستجو Class project 19 - Expanding Search Bar

متغیرها Variables

• متغیرها در Figma چیست؟ What are Variables in Figma

• نحوه ایجاد کل سبد خرید با استفاده از متغیرهای عددی در Figma How to create cart total using number variables in Figma

• نحوه اضافه کردن شرایط به متغیرها در Figma How to add add conditions to variables in Figma

• تغییر متغیر با استفاده از متغیر Boolean - تغییر رنگ سبد خرید Variant change using Boolean variable - change cart color

• تبدیل متغیر بولی ما به false در Figma Turning our boolean variable to false in Figma

• ساخت پاپ آپ Overlay در پنل اکشن متغیر در Figma Making a Overlay Popup in the Variable action panel in Figma

• حالت های روشن و تاریک با استفاده از مجموعه ها و متغیرهای رنگ در Figma Light and Dark Modes using Collections & Color Variables in Figma

• نحوه تغییر فاصله با متغیرهای عددی در Figma How to change spacing with number Variables in Figma

توکن های طراحی Design Tokens

• طراحی توکن ها در Figma چیست؟ What are Design Tokens in Figma

• نحوه ایجاد توکن های طراحی در Figma How to create Design Tokens in Figma

• ایجاد توکن های طراحی فاصله و شعاع در Figma Creating spacing & radius design tokens in Figma

• چه زمانی از نشانه های طراحی در Figma استفاده می کنید When would you use design tokens in Figma

انیمیشن - سطح 2 Animation - Level 2

• چگونه در Figma در طول یک مسیر متحرک می شوید How do you animate along a path in Figma

• نحوه اضافه کردن فایل های انیمیشن Lottie در Figma How to add Lottie animation files in Figma

دسترسی Accessibility

• دسترسی به طرح های شما - راهنمای پلاگین دسترسی در Figma Making Your Designs Accessible - A Guide to Accessibility plugin in Figma

کار با سهامداران Working with Stakeholders

• چند نکته برای کار با همکاران در فیگما چیست؟ What are some tips for working with colleagues in Figma

• نحوه مشاهده کپی و بازیابی تاریخچه نسخه در Figma How view version history duplicate and restore in Figma

• نحوه آرشیو و بازیابی نسخه های قبلی فایل های Figma How to archive and restore previous versions of Figma files

• نحوه ایجاد و اشتراک گذاری یک جریان در Figma How to create & share a flows in Figma

• نحوه استفاده از ابزار Slice در Figma How to use the Slice Tool in Figma

• نحوه صادرات تصاویر بدون برش و مقیاس نشده از Figma How export uncropped and unscaled images from Figma

• نحوه صادرات تصاویر webp از Figma و Photoshop How to export webp images from Figma & Photoshop

• چگونه می توان اندازه فایل را کاهش داد و حجم تمام تصاویر را در یک فایل Figma کاهش داد How to downsize reduce file size of all images in a Figma file

• نحوه مستندسازی یک جزء در یک سیستم طراحی در Figma How to document a component in a design system in Figma

• نحوه استفاده از حالت DEV در Figma How to use DEV Mode in Figma

بعدش چی What Next

• کلاس پروژه 20 - طراحی خود را به پایان برسانید Class Project 20 - Finish your design

• کلاس پروژه 20 - طراحی خود را به پایان برسانید Class Project 20 - Finish your design

• چه چیزی بعد - Figma پیشرفته What's Next - Figma Advanced