اتولی‌اوت (Auto Layout) در فیگما؛ آموزش کامل با مثال

اتولی‌اوت (Auto Layout) در فیگما ویژگی‌ای است که به یک فریم می‌گوید فرزندانش را خودکار در یک جهت مشخص، با فاصله و حاشیه‌ی تعیین‌شده بچیند؛ کافی است لایه‌ها را انتخاب کنید و Shift + A را بزنید. نتیجه طرحی است که با بلند شدن یک متن، حذف یک آیتم یا تغییر اندازه‌ی صفحه، بدون جابه‌جایی دستی خودش را مرتب می‌کند.

اگر با CSS آشنا باشید، اتولی‌اوت تقریباً همان منطق Flexbox است و گزینه‌ی Grid آن به CSS Grid نزدیک است. همین شباهت باعث می‌شود طرحی که با اتولی‌اوت ساخته شده، برای برنامه‌نویس هم قابل‌فهم‌تر و نزدیک‌تر به کد نهایی باشد.

چرا auto layout در فیگما این‌قدر مهم است؟

فرض کنید ده دکمه در یک فایل دارید و متن یکی از «ثبت» به «ثبت و ادامه‌ی خرید» تغییر می‌کند. بدون اتولی‌اوت باید پهنای دکمه و جای آیکون و فاصله‌ها را دستی درست کنید. با اتولی‌اوت دکمه خودش پهن می‌شود و آیکون همیشه در فاصله‌ی ثابت می‌ماند.

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

مثال اول: ساخت یک دکمه با اتولی‌اوت

ساده‌ترین تمرین، یک دکمه با متن و آیکون است. این مراحل را دقیقاً دنبال کنید:

• با T یک متن بنویسید، مثلاً «افزودن به سبد» و یک آیکون ۲۰ پیکسلی کنارش بگذارید.
• هر دو را انتخاب کنید و Shift + A بزنید؛ فیگما آن‌ها را در یک فریم اتولی‌اوت افقی قرار می‌دهد.
• در پنل راست، فاصله‌ی بین آیتم‌ها (Gap) را ۸ و حاشیه‌ی داخلی (Padding) را ۱۲ عمودی و ۲۴ افقی بگذارید.
• به فریم رنگ پس‌زمینه و گردی گوشه بدهید.
• حالا متن را طولانی‌تر کنید و ببینید دکمه خودش پهن می‌شود.

دلیل این رفتار، حالت اندازه‌ی Hug contents است: فریم به اندازه‌ی محتوایش در می‌آید. اگر بخواهید دکمه در موبایل تمام عرض صفحه را بگیرد، آن را داخل یک فریم والد اتولی‌اوت بگذارید و عرضش را روی Fill container تنظیم کنید.

تنظیمات اصلی اتولی‌اوت در پنل راست

جهت چیدمان (Flow)

گزینه‌های اصلی عمودی (Vertical)، افقی (Horizontal)، Wrap و Grid هستند. حالت Wrap آیتم‌ها را افقی می‌چیند و وقتی جا تمام شد به خط بعد می‌برد؛ برای برچسب‌ها و فیلترها مناسب است. Grid چیدمان دوبعدی با سطر و ستون می‌سازد و برای گالری محصولات یا داشبورد به کار می‌آید.

فاصله و حاشیه (Gap و Padding)

Gap فاصله‌ی بین فرزندان است. اگر آن را روی Auto بگذارید، آیتم‌ها در دو سر فریم قرار می‌گیرند و فضای خالی بینشان پخش می‌شود؛ همان چیزی که برای هدر یک صفحه با لوگو در یک سمت و آیکون منو در سمت دیگر لازم دارید. Padding فاصله‌ی محتوا از لبه‌های فریم است و می‌توانید برای هر چهار طرف عدد جدا بدهید.

تراز (Alignment)

مربع نه‌خانه‌ای پنل راست تعیین می‌کند محتوا به کدام گوشه یا وسط فریم بچسبد. برای ردیف‌هایی که متن با اندازه‌ی مختلف دارند، تراز خط پایه (Baseline alignment) را فعال کنید تا متن‌ها روی یک خط بنشینند؛ وقتی جعبه‌ی تراز فعال است، کلید B همین کار را می‌کند.

رفتار اندازه: Hug، Fill و Fixed

• Hug contents: فریم به اندازه‌ی محتوایش بزرگ و کوچک می‌شود.
• Fill container: لایه همه‌ی فضای باقی‌مانده‌ی والد را پر می‌کند.
• Fixed: اندازه ثابت است و با محتوا تغییر نمی‌کند.
• Min و Max: از منوی Width یا Height می‌توانید حداقل و حداکثر عرض یا ارتفاع بدهید، مثلاً کارتی که از ۲۸۰ پیکسل باریک‌تر و از ۴۰۰ پیکسل پهن‌تر نشود.

نادیده گرفتن اتولی‌اوت (Ignore auto layout)

گاهی یک لایه باید داخل فریم اتولی‌اوت باشد ولی در چیدمان شرکت نکند؛ مثل نشان قرمز تعداد اعلان روی گوشه‌ی آیکون. این گزینه که قبلاً Absolute position نام داشت، لایه را از جریان چیدمان بیرون می‌آورد تا آزادانه جایش را تعیین کنید.

مثال دوم: کارت محصول فروشگاهی با اتولی‌اوت تودرتو

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

• لایه‌ی بیرونی: فریم عمودی با Padding ۱۲ و Gap ۸، عرض Fixed روی ۱۸۰ پیکسل و ارتفاع Hug.
• تصویر: عرض Fill container و نسبت ثابت، تا با تغییر عرض کارت درست کوچک و بزرگ شود.
• نام کالا: عرض Fill و حداکثر دو خط با Truncate، تا نام‌های طولانی کارت را بلند نکنند.
• ردیف قیمت: فریم افقی با Gap روی Auto؛ درصد تخفیف در یک سمت و قیمت در سمت دیگر.
• ستون قیمت: فریم عمودی کوچک با قیمت خط‌خورده بالا و قیمت نهایی پایین، تراز به راست.

حالا کارت را به کامپوننت تبدیل کنید و شش نمونه از آن را داخل یک فریم Wrap یا Grid بگذارید. با تغییر عرض فریم گالری، کارت‌ها خودشان در ردیف‌ها جابه‌جا می‌شوند. برای چیدمان ستونی صفحه، مقاله‌ی گرید در فیگما را هم ببینید.

مثال سوم: فهرست تراکنش‌های یک اپ بانکی

فهرست‌ها جایی‌اند که اتولی‌اوت بیشترین وقت را صرفه‌جویی می‌کند. هر ردیف تراکنش شامل آیکون نوع تراکنش، عنوان و تاریخ و مبلغ است.

• ردیف: فریم افقی با عرض Fill، Padding ۱۶ و Gap ۱۲.
• بلوک عنوان و تاریخ: فریم عمودی با عرض Fill تا همه‌ی فضای وسط را بگیرد.
• مبلغ: عرض Hug، رنگ سبز برای واریز و قرمز برای برداشت.
• فهرست: فریم عمودی با Gap صفر و یک خط جداکننده داخل هر ردیف، یا Gap یک پیکسلی روی پس‌زمینه‌ی خاکستری.

حالا یک ردیف را حذف کنید یا عنوانی خیلی بلند بنویسید؛ فهرست بدون هیچ دخالتی مرتب می‌ماند. این همان رفتاری است که در کد هم اتفاق می‌افتد و طرح شما را به محصول نهایی نزدیک می‌کند.

نکته‌های تکمیلی: راست‌به‌چپ و ترفندهای سرعت

اتولی‌اوت در طراحی راست‌به‌چپ

اتولی‌اوت افقی آیتم‌ها را از چپ به راست می‌چیند. در طراحی فارسی باید ترتیب لایه‌ها را طوری بچینید که آیتم شروع (مثلاً آیکون یا عنوان) در سمت راست قرار بگیرد. حالت Wrap هم آیتم‌ها را از چپ به راست به خط بعد می‌برد؛ پس در فهرست برچسب‌های فارسی، خط آخر از چپ پر می‌شود و ممکن است با انتظار کاربر فارسی‌زبان جور نباشد. در این موارد یا تعداد آیتم را کنترل کنید یا در یادداشت تحویل، رفتار درست راست‌به‌چپ را برای برنامه‌نویس توضیح دهید.

برای متن‌ها هم جهت راست‌به‌چپ و چینش راست را تنظیم کنید و عرض لایه‌ی متن را در اتولی‌اوت روی Fill بگذارید؛ در غیر این صورت متن راست‌چین داخل یک جعبه‌ی Hug عملاً تراز درستی نمی‌گیرد.

ترفندهای سرعت در کار با اتولی‌اوت

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

• دابل‌کلیک روی لبه‌ی عمودی یا افقی فریم، اندازه‌ی آن سمت را روی Hug می‌گذارد؛ با نگه داشتن Alt (در مک Option) همین کار Fill را تنظیم می‌کند.
• هنگام کشیدن دستگیره‌ی Padding، نگه داشتن Alt حاشیه‌ی دو طرف مقابل را با هم تغییر می‌دهد و Alt + Shift هر چهار طرف را.
• وقتی جعبه‌ی تراز فعال است، کلیدهای جهت تراز را عوض می‌کنند و کلید X فاصله را بین حالت عددی و Auto جابه‌جا می‌کند.
• اگر صفحه‌ای قدیمی بدون اتولی‌اوت دارید، گزینه‌ی Suggest auto layout فیگما تلاش می‌کند ساختار مناسب را برای لایه‌های انتخاب‌شده پیشنهاد دهد؛ نتیجه را همیشه بازبینی کنید.

یک عادت مفید دیگر: پیش از ساختن هر بخش، روی کاغذ مشخص کنید کدام ظرف‌ها عمودی‌اند و کدام افقی. این طرح ذهنی چند ثانیه‌ای، جلوی فریم‌های تودرتوی اضافه را می‌گیرد.

اشتباه‌های رایج در کار با اتولی‌اوت

• استفاده از لایه‌ی خالی یا مستطیل شفاف برای ایجاد فاصله، به‌جای Gap و Padding.
• گذاشتن همه‌چیز روی Fixed؛ طرح ظاهراً درست است ولی با اولین تغییر محتوا می‌شکند.
• تودرتو کردن بی‌دلیل؛ اگر دو فریم پشت‌سرهم همان جهت و همان فاصله را دارند، یکی کافی است.
• عددهای فاصله‌ی دلبخواهی مثل ۱۳ و ۱۷؛ یک مقیاس ثابت (مثلاً مضرب‌های ۴) انتخاب کنید و به آن پایبند بمانید.
• Fill کردن فرزند در والدی که خودش Hug است؛ نتیجه رفتاری غیرمنتظره است چون والد اندازه‌ی مشخصی ندارد.

قاعده‌ی ساده: هر جا دو لایه کنار هم یا زیر هم قرار دارند و فاصله‌شان مهم است، باید داخل یک فریم اتولی‌اوت باشند.

سوالات متداول

میانبر اتولی‌اوت در فیگما چیست؟

برای افزودن اتولی‌اوت Shift + A را بزنید. برای حذف آن در ویندوز Alt + Shift + A و در مک Option + Shift + A کار می‌کند.

تفاوت اتولی‌اوت با Constraints چیست؟

Constraints تعیین می‌کند یک لایه هنگام تغییر اندازه‌ی فریم والد به کدام لبه بچسبد، ولی لایه‌ها را نسبت به هم مرتب نمی‌کند. اتولی‌اوت چیدمان فرزندان نسبت به یکدیگر را مدیریت می‌کند و در بیشتر طرح‌های امروزی جای Constraints را گرفته است.

Grid در اتولی‌اوت با Layout guide چه فرقی دارد؟

Layout guide (که قبلاً Layout grid نام داشت) فقط خطوط راهنمای بصری است و لایه‌ها را جابه‌جا نمی‌کند. Grid در اتولی‌اوت واقعاً فرزندان را در سطر و ستون می‌چیند.

چرا فرزند اتولی‌اوت من Fill container را نشان نمی‌دهد؟

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

از دکمه تا صفحه‌ی کامل، با یک منطق

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