آموزش قدم‌به‌قدم Auto Layout در فیگما - قسمت پنجم

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

معرفی Auto Layout در فیگما

Auto Layout امکان خوبی در فیگما برای طراحی رابط‌های کاربری ریسپانسیو است. با استفاده از آن می‌توانید المان‌های طراحی شده مانند دکمه‌ها، تصاویر و متن‌ها را به گونه‌ای تنظیم کنید که با تغییر اندازه صفحه، خودشان مکان و اندازه خود را تغییر دهند.

چگونگی استفاده از Auto Layout

استفاده از Auto Layout در فیگما راحت است. کافیست المان مورد نظر را انتخاب کرده و از منوی Design گزینه Auto Layout را انتخاب کنید.

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

مثلا می‌توانید عرض آن را بر اساس درصد تغییر دهید یا فاصله آن را از لبه‌های صفحه تنظیم کنید.

مزایای Auto Layout

استفاده از Auto Layout مزایای زیادی دارد:

طراحی سریع و راحت رابط‌های کاربری ریسپانسیو
صرفه‌جویی قابل‌توجه در زمان طراحی
طراحی المان هایی که با تغییر اندازه صفحه، اندازه و مکان خود را تطبیق می دهند
امکان چیدمان مجدد المان ها بر اساس space و gap های مشخص شده
حفظ فواصل و نسبت های المان ها نسبت به یکدیگر در حالت های مختلف
جلوگیری از به هم ریختگی layout در اندازه های متفاوت صفحه
اعمال سریع تغییرات layout و دیدن فوری نتیجه آن
و…

برای آشنایی با آموزش‌های بیشتر درباره فیگما می‌توانید به صفحه آموزش فیگما در وبلاگ یا کانال یوتیوب مراجعه کنید.

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

آموزش قدم‌به‌قدم Auto Layout در فیگما – قسمت پنجم – بخش اول

آموزش قدم‌به‌قدم Auto Layout در فیگما – قسمت پنجم – بخش دوم

آموزش قدم‌به‌قدم Auto Layout در فیگما – قسمت پنجم – بخش سوم

آموزش جامع فیگما – اتو لی اوت Auto Layout Wrap

آموزش‌های تخصصی طراحی UI/UX

اگر می‌خواهید مهارت‌های خود را در زمینه‌های طراحی رابط کاربری و تجربه کاربری افزایش دهید، می‌توانید از طریق سایت Learnuix.com در دوره‌های آموزشی زیر ثبت‌نام کنید:

این دوره‌ها به شیوه‌ای عملی و کاربردی طراحی UI/UX را آموزش می‌دهند تا بتوانید مهارت‌های خود را ارتقا دهید.

کانال تلگرام آموزشی طراحی UI/UX

کانال تلگرام AsteriXarts محتواهای آموزشی و کاربردی مفیدی در زمینه طراحی رابط کاربری و تجربه کاربری منتشر می‌کند.

از طریق این کانال می‌توانید به آخرین اخبار، آموزش‌های ویدیویی، معرفی کتاب، نکات کاربردی و دیگر مطالب آموزشی مرتبط با UI/UX دسترسی داشته باشید.

با عضویت در کانال تلگرام AsteriXarts همواره در جریان دانش روز طراحی رابط و تجربه کاربر باشید.

گروه تلگرام جامعه طراحان UI/UX

گروه تلگرامی UIXFamily بستری برای ارتباط و تعامل طراحان UI/UX فراهم می‌کند.

اعضای این گروه می‌توانند درباره موضوعات مختلف طراحی رابط کاربر و تجربه کاربر بحث و تبادل نظر کنند، سوالات خود را مطرح کنند و از تجارب یکدیگر بهره ببرند.

با پیوستن به گروه تلگرام UIXFamily به جامعه بزرگ طراحان رابط کاربر ملحق شوید.

دیگر آموزش های مرتبط:

آموزش جامع Figma – کار با ابزارها و محیط فیگما – قسمت اول (learnuix.com)

آموزش جامع Figma – کار با پنل Design در فیگما – قسمت دوم (learnuix.com)

آموزش جامع فیگما – Constraints و ریسپانسیو دیزاین – قسمت سوم (learnuix.com)

آموزش ساخت پروتوتایپ در فیگما برای طراحی UI/UX – قسمت چهارم (learnuix.com)

آموزش فیگما – 5 پلاگین فوق العاده کاربردی Figma – قسمت اول (learnuix.com)

آموزش فیگما – 5 پلاگین فوق العاده کاربردی Figma – قسمت دوم (learnuix.com)

آموزش فیگما – 7 پلاگین فوق العاده کاربردی Figma – قسمت سوم (learnuix.com)