طراحی واکنش‌گرا در Figma Deep Dive: طرح‌بندی خودکار Figma، محدودیت‌ها، نقاط شکست و حالت‌ها (2024) - آخرین آپدیت

Responsive Design in Figma Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes (2024)

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

Deep Dive: طرح بندی خودکار Figma، محدودیت ها، حالت های نقطه شکست

لطفاً توجه داشته باشید، در صورتی که هنوز به رابط کاربری جدید Figma دسترسی ندارید، می‌توانید از دوره قبلی آرشیو شده که در اینجا یافت شده است نیز استفاده کنید: (این را در ویدیوی 2 توضیح می‌دهم).

طرح بندی خودکار شما را دیوانه می کند؟ از اینکه با طراحی شما در مرورگر چه اتفاقی خواهد افتاد می ترسید؟ پس این کلاس فقط برای شما مناسب است! ما همه چیز را در مورد نحوه تنظیم طرح های واکنش گرا در Figma یاد خواهیم گرفت.

این یک بررسی عمیق واقعی در طرح‌بندی خودکار، محدودیت‌ها، و مهم‌تر از همه اما به ندرت مورد بحث قرار گرفته است، نحوه برخورد با نقاط شکست برای طراحی UI شما است، از یک راه‌اندازی ساده تا رویکرد پیشرفته‌تر با متغیرها و حالت‌ها .

درک و ترکیب این ابزارها به شما کمک می کند تا مؤلفه ها، الگوهای طراحی و کل صفحات را تنظیم کنید که با تنظیمات کد هماهنگ شوند.

با فایل مطالب دوره Figma می‌توانید در کنار من کار کنید یا با دستورالعمل‌های دقیق در زمان خود به تمرینات بازگردید.

اگر دانش پایه ای از Figma دارید یا اگر یک کاربر پیشرفته Figma هستید و می خواهید مهارت های خود را تقویت کنید، این کلاس برای شما مناسب است.

طرح‌بندی خودکار غواصی عمیق

  1. چیدمان خودکار چیست؟
  2. تنظیم قاب های طرح بندی خودکار
  3. منوی طرح بندی خودکار
  4. تنظیم خودکار
  5. منوی طرح‌بندی خودکار پیشرفته
  6. تغییر اندازه تنظیمات
  7. نکات تغییر اندازه عمودی
  8. طرح‌بندی خودکار را نادیده بگیرید
  9. اجزاء و متغیرهای طرح بندی خودکار
  10. تنظیم مقادیر حداقل و حداکثر
  11. بسته بندی طرح بندی خودکار
  12. تصاویر نسبت تصویر ثابت (هک)
  13. درباره لانه سازی بیاموزید: رابطه والد و فرزند
  14. پیشنهاد طرح‌بندی خودکار
  15. چند جادو با جداول: طرح‌بندی خودکار و هوش مصنوعی
  16. تنظیمات پیشرفته تر (نمونه)
  17. صفحات طرح بندی خودکار
  18. طرح‌بندی خودکار و CSS flexbox
  19. اجزای اسلات با چیدمان خودکار

محدودیت‌ها

  1. محدودیت ها در Figma چیست؟
  2. محدودیت ها و شبکه ها
  3. معرفی سریع شبکه‌ها در Figma

حالت های نقطه انفصال

  1. معرفی نقاط شکست CSS
  2. نقاط شکست در Figma
  3. حالت‌ها و اندازه‌های صفحه: مقدمه‌ای سریع
  4. اتصال انواع به حالت‌ها
  5. مخفی کردن و نمایش با Booleans
  6. تایپوگرافی پاسخگو با حالت ها

فایل مطالب دوره پلاس Figma

این یک دوره آموزشی توسط moonlearning، moonlearning.io یادگیری ماه است


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

درس ها Lessons

  • AUTO LAYOUT: 03 منوی طرح بندی خودکار AUTO LAYOUT: 03 The auto layout menu

  • طرح‌بندی خودکار: 08 طرح‌بندی خودکار را نادیده بگیرید AUTO LAYOUT: 08 Ignore auto layout

  • نسخه UI و مواد دوره UI Version & Course Material

  • نقاط شکست: 05 مخفی کردن و نمایش با Booleans BREAKPOINTS: 05 Hide and show with booleans

  • AUTO LAYOUT: 04 تنظیم خودکار AUTO LAYOUT: 04 The auto setting

  • نقاط شکست: 06 تایپوگرافی پاسخگو با حالت ها BREAKPOINTS: 06 Responsive typography with modes

  • AUTO LAYOUT: 05 منوی طرح بندی خودکار پیشرفته AUTO LAYOUT: 05 Advanced auto layout menu

  • طرح بندی خودکار: 16 نمونه راه اندازی پیشرفته تر AUTO LAYOUT: 16 More advanced setup examples

  • محدودیت ها: 03 معرفی سریع شبکه ها در Figma CONSTRAINTS: 03 Quick intro to grids in Figma

  • نقاط شکست: 04 انواع اتصال به حالت ها BREAKPOINTS: 04 Binding variants to modes

  • چند چیز رایگان برای خداحافظی Some free stuff to say goodbye

  • طرح بندی خودکار: 11 بسته بندی طرح بندی خودکار AUTO LAYOUT: 11 Auto layout wrap

  • طرح بندی خودکار: 07 نکته تغییر اندازه عمودی AUTO LAYOUT: 07 Vertical resizing tips

  • طرح بندی خودکار: 12 هک عکس با نسبت تصویر ثابت AUTO LAYOUT: 12 Fixed aspect ratio images hack

  • طرح بندی خودکار: 17 صفحه طرح بندی خودکار AUTO LAYOUT: 17 Auto layout pages

  • طرح بندی خودکار: 13 در مورد رابطه تودرتو و فرزند والدین بیاموزید AUTO LAYOUT: 13 Learn about nesting and parent child relationship

  • طرح بندی خودکار: 14 طرح بندی خودکار را پیشنهاد کنید AUTO LAYOUT: 14 Suggest auto layout

  • نقاط شکست: محدودیت ها: 02 نقطه شکست در Figma BREAKPOINTS: CONSTRAINTS:02 Breakpoints in Figma

  • محدودیت ها: 02 محدودیت ها و شبکه ها CONSTRAINTS: 02 Constraints and grids

  • AUTO LAYOUT: 09 اجزا و متغیرهای طرح بندی خودکار AUTO LAYOUT: 09 Auto layout components and variables

  • AUTO LAYOUT: 01 طرح خودکار چیست؟ AUTO LAYOUT: 01 What is auto layout?

  • طرح بندی خودکار: 15 مقداری جادو با جداول AUTO LAYOUT: 15 Some magic with tables

  • نقاط شکست: 01 معرفی نقاط شکست CSS BREAKPOINTS: 01 Introducing CSS breakpoints

  • AUTO LAYOUT: 02 تنظیم قاب های طرح بندی خودکار AUTO LAYOUT: 02 Setting up auto layout frames

  • محدودیت ها: 01 محدودیت ها در Figma چیست؟ CONSTRAINTS: 01 What are constraints in Figma?

  • مقدمه Intoduction

  • نقاط شکست: 03 حالت ها و اندازه های صفحه یک مقدمه سریع BREAKPOINTS: 03 Modes and screen sizes a quick intro

  • طرح بندی خودکار: 10 تنظیم مقادیر حداقل و حداکثر AUTO LAYOUT: 10 Setting min and max values

  • AUTO LAYOUT: 06 تغییر اندازه تنظیمات AUTO LAYOUT: 06 Resize settings

  • AUTO LAYOUT: 18 طرح خودکار و CSS flexbox AUTO LAYOUT: 18 Auto layout and CSS flexbox

  • AUTO LAYOUT: 19 جزء اسلات با طرح خودکار AUTO LAYOUT: 19 Slot components with auto layout

نمایش نظرات

طراحی واکنش‌گرا در Figma Deep Dive: طرح‌بندی خودکار Figma، محدودیت‌ها، نقاط شکست و حالت‌ها (2024)
جزییات دوره
1h 43m
31
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
13
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christine Vallaure Christine Vallaure

UI/UX DESIGN + CODE

طراح UX/UI با علاقه به کد و بنیانگذار .

من در سطح بین‌المللی، داخلی و از راه دور روی پروژه‌هایی برای برندها، آژانس‌ها و استارت‌آپ‌های پیشرو کار کرده‌ام. من عمیقاً به ایجاد محصولاتی با فکر و زیبایی اهمیت می دهم. کارهای من از ایده‌های اولیه گرفته تا طرح‌ها، وایرفریم‌ها، نمونه‌سازی اولیه و تنظیم جلویی را شامل می‌شود.

علاوه بر پروژه‌های مشتری (بازدید برای منابع)، من در حال ساختن یک پلتفرم یادگیری آنلاین برای طراح UX/UI. من همچنین در مورد کد طراحی در رسانه و من می نویسم.

برای اطلاعات بیشتر درباره من لطفاً به من مراجعه کنید صفحه LinkedIn .