آموزش دوره جامع فیگما (قسمت چهارم): تسلط بر متغیرها، توکن‌ها و حالت توسعه (Dev Mode) - آخرین آپدیت

تسلط بر میان‌برهای اتولایوت و فاصله‌گذاری Mastering Auto Layout Shortcuts and Spacing

• میان‌برهای Hug و Fill در فیگما چیستند What are the shortcuts for hug & fill in Figma

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

• چگونه یک المان واکنش‌گرا را در فیگما در موقعیت مطلق قرار دهیم How to absolute position something that is responsive in Figma

• چگونه المان‌ها را به گوشه پایین سمت راست اتولایوت بچسبانیم How stick things to the bottom right of an auto layout in Figma

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

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

دکمه‌ها، Wrapping و دقت در چیدمان Buttons, Wrapping, and Layout Precision

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

• نحوه Wrap کردن اشیاء اتولایوت در فیگما How to wrap auto layout objects in Figma

• مفهوم Stroke Included و Excluded در اتولایوت فیگما چیست What does stroke included excluded mean in Figma auto layout

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

کامپوننت‌ها، اورل‌ها و افکت‌های Hover Components, Overlays, and Hover Effects

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

• نحوه ساخت کامپوننت‌های جایگزین (Slot Placeholder) در فیگما How to create slot placehold components in Figma

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

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

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

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

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

• پروژه کلاسی ۱۸: افکت Hover Grow Class project 18 - Hover Grow Effect

• نحوه ساخت نوار جستجوی بازشونده در فیگما How to make an expanding Search Bar in Figma

• پروژه کلاسی ۱۹: نوار جستجوی بازشونده Class project 19 - Expanding Search Bar

آشنایی با متغیرها و پروتوتایپینگ پویا Intro to Variables and Dynamic Prototyping

• متغیرها (Variables) در فیگما چیستند What are Variables in Figma

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

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

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

• تغییر مقدار متغیر Boolean به False در فیگما Turning our boolean variable to false in Figma

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

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

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

توکن‌های طراحی، انیمیشن و دسترسی‌پذیری Design Tokens, Animation, and Accessibility

• توکن‌های طراحی (Design Tokens) در فیگما چیستند What are Design Tokens in Figma

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

• ساخت توکن‌های طراحی برای فاصله و شعاع گوشه‌ها (Radius) در فیگما Creating spacing & radius design tokens in Figma

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

• چگونه در فیگما در امتداد یک مسیر (Path) انیمیشن بسازیم How do you animate along a path in Figma

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

• دسترسی‌پذیر کردن طراحی‌ها: راهنمای پلاگین Accessibility در فیگما Making Your Designs Accessible - A Guide to Accessibility plugin in Figma

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

حالت توسعه (Dev Mode)، خروجی گرفتن و تحویل پروژه Dev Mode, Exporting, and Project Handoff

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

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

• نحوه ایجاد و به اشتراک‌گذاری جریان‌ها (Flows) در فیگما How to create & share a flows in Figma

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

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

• نحوه خروجی گرفتن تصاویر WebP از فیگما و فتوشاپ How to export webp images from Figma & Photoshop

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

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

• نحوه استفاده از DEV MODE در فیگما How to use DEV Mode in Figma

• پروژه کلاسی ۲۰: نهایی کردن طراحی شما Class Project 20 - Finish your design

• گام بعدی: فیگما پیشرفته What's Next - Figma Advanced