راهنمای چیدمان خودکار (Auto Layout)
- طراحی رابط کاربری
- بروزرسانی شده در
چیدمان خودکار یا Auto Layout، یکی از قدرتمندترین و ضروری‌ترین ابزارهای فیگما برای طراحان مدرن است. اگر از صرف زمان زیاد برای تنظیم دستی فاصله‌ها و ابعاد هر بار که محتوای یک دکمه یا لیست تغییر می‌کند خسته شده‌اید، این قابلیت راه‌حل شماست. Auto Layout به شما اجازه می‌دهد فریم‌ها و کامپوننت‌هایی بسازید که به صورت هوشمند و پویا به محتوای درون خود واکنش نشان می‌دهند و به طور خودکار رشد یا کوچک می‌شوند. در این راهنمای جامع، ما قدم به قدم از مفاهیم اولیه تا تکنیک‌های پیشرفته را بررسی میکنیم تا به شما نشان دهیم چگونه طراحی‌های انعطاف‌پذیر، واکنش‌گرا و مقیاس‌پذیری بسازید که در زمان شما صرفه‌جویی کرده و فرآیند طراحی را متحول می‌کنند.
آنچه در این مقاله می‌خوانید
چه کسانی می‌توانند از این ویژگی استفاده کنند؟
- در تمام پلن‌ها موجود است.
- در Figma Design و Figma Sites در دسترس است. همچنین می‌توانید از حالت طراحی در Figma Slides و Figma Buzz به چیدمان خودکار دسترسی داشته باشید.
- هر کسی که دسترسی «can edit» به یک فایل داشته باشد، می‌تواند از چیدمان خودکار استفاده کند.
چیدمان خودکار (Auto Layout) می‌تواند روی فریم‌ها اعمال شود تا طرح‌ها به صورت پویا به تغییرات محتوا واکنش نشان دهند، که این امر باعث صرفه‌جویی در زمان شما شده و طرح‌هایتان را واکنش‌گرا و سازگار می‌سازد.
عناصر موجود در یک فریم با چیدمان خودکار، به طور اتوماتیک بر اساس جهت، فاصله، پدینگ، تراز و سایر خصوصیات چیدمان خودکار مرتب می‌شوند. هنگامی که محتوا تغییر می‌کند یا عناصری اضافه، حذف یا تغییر اندازه داده می‌شوند، چیدمان بدون نیاز به جابجایی دستی، خود را تطبیق می‌دهد.
از چیدمان خودکار برای ایجاد طرح‌های واکنش‌گرا استفاده کنید، مانند:
- دکمه‌هایی که با ویرایش متن برچسب، بزرگ یا کوچک می‌شوند.
- لیست‌هایی که با اضافه، حذف یا مخفی شدن آیتم‌ها، خود را تطبیق می‌دهند.
- باکس‌های Bento و داشبوردها.
- یک صفحه وب که با اندازه‌های مختلف صفحه نمایش سازگار است.
افزودن چیدمان خودکار
برای شروع استفاده از چیدمان خودکار روی طرح‌ها، یک یا چند لایه را انتخاب کرده و کلیدهای ⇧ Shift A را فشار دهید یا روی + در کنار Auto layout در نوار کناری سمت راست کلیک کنید. فیگما سعی می‌کند تشخیص دهد که شما قصد استفاده از کدام جریان چیدمان خودکار (عمودی، افقی یا گرید) را دارید. شما می‌توانید در هر زمان جریان را تغییر دهید.
انتخاب یک جریان چیدمان خودکار
هنگامی که چیدمان خودکار روی یک فریم اعمال شد، می‌توانید از بین سه گزینه برای تعیین جریان و ترتیب اشیاء در فریم انتخاب کنید:
- Vertical (عمودی)
- Horizontal (افقی)
- Grid (شبکه‌ای)
افقی و عمودی
گزینه Vertical (عمودی) ↓ اشیاء را در فریم شما در امتداد محور Y قرار می‌دهد. هر شیئی که اضافه، حذف یا جابجا کنید، از محور Y پیروی خواهد کرد. برای مثال: چندین آیتم در یک لیست کارها (to-do list)، یا پست‌ها در یک فید خبری یا تایم‌لاین.
گزینه Horizontal (افقی) → اشیاء را در فریم شما در امتداد محور X قرار می‌دهد. هر شیئی که اضافه، حذف یا جابجا کنید، از محور X پیروی خواهد کرد. برای مثال: یک ردیف از دکمه‌ها، یا آیکون‌ها در یک منوی ناوبری موبایل.
هنگامی که حالت افقی را انتخاب می‌کنید، گزینه Wrap (شکستن خط) در دسترس قرار می‌گیرد. این گزینه اشیاء اضافی را به خط بعدی در فریم شما منتقل می‌کند.
گزینه‌های چیدمان خودکار افقی و عمودی همچنین دارای خصوصیات اضافی مانند تغییر اندازه، فاصله، تراز و موارد دیگر هستند.
درباره جریان‌های چیدمان خودکار افقی و عمودی بیشتر بیاموزید.
گرید (Grid) – نسخه بتای باز
گزینه گرید برای چیدمان خودکار در حال حاضر در نسخه بتای باز قرار دارد. برخی از عملکردها و تنظیمات ممکن است هنوز برای گرید در دسترس نباشند. این ویژگی ممکن است تغییر کند و ممکن است در طول دوره بتا با باگ‌ها یا مشکلات عملکردی مواجه شوید.
گزینه Grid (شبکه‌ای) اشیاء را در ستون‌ها و ردیف‌ها قرار می‌دهد و به شما امکان می‌دهد گالری‌ها، باکس‌های Bento و طرح‌های داشبوردی بسازید که به اندازه‌های مختلف فریم واکنش نشان داده و تغییر اندازه می‌دهند.
برخلاف تنظیم Wrap برای جریان‌های افقی و عمودی، اشیاء در یک گرید به خط بعدی نمی‌روند. در عوض، آن‌ها در یک «شبکه» قرار می‌گیرند و قابلیت پوشش چندین ردیف یا ستون را دارند.
فریم‌های چیدمان خودکار گرید نیز دارای خصوصیات اضافی مانند تغییر اندازه ستون و ردیف، پوشش (span) و موارد دیگر خواهند بود.
تنظیم خصوصیات فاصله‌گذاری
انواع خصوصیات موجود در فریم چیدمان خودکار شما به جریانی که استفاده می‌شود بستگی دارد. با این حال، همه جریان‌ها چند ویژگی کلیدی فاصله‌گذاری مشترک دارند:
- Padding (پدینگ): فضای خالی یا سفید بین لبه یک فریم والد با چیدمان خودکار و اشیاء داخل آن است. شما می‌توانید پدینگ را به صورت یکنواخت، به صورت عمودی و افقی، یا با مقادیر متفاوت برای بالا، راست، پایین و چپ تنظیم کنید.
- Gap between (فاصله بین عناصر): فاصله یا توزیع بین اشیاء در یک فریم با چیدمان خودکار است. از یک مقدار عددی برای تعیین دقیق فاصله بین اشیاء استفاده کنید. یا، برای فریم‌های چیدمان خودکار عمودی و افقی، می‌توانید فاصله بین آیتم‌ها را روی Auto تنظیم کنید تا اشیاء بیشترین فاصله ممکن را از یکدیگر داشته باشند.
تنظیم واکنش‌گرایی با تغییر اندازه (Resizing)
توجه: در حالی که گرید در نسخه بتا است، گزینه گرید ممکن است در خصوصیات و عملکرد تغییر اندازه محدودیت‌هایی داشته باشد.
یکی از قدرتمندترین عملکردهای چیدمان خودکار، توانایی آن در تطبیق ابعاد اشیاء با تنظیمات و اشیاء اطرافشان با استفاده از خاصیت resizing است. شما می‌توانید رفتار تغییر اندازه را روی یک فریم والد با چیدمان خودکار تنظیم کنید تا نحوه تغییر اندازه آن بر اساس تغییرات محتوای داخلی‌اش (و بالعکس) تعیین شود.
تنظیمات تغییر اندازه را می‌توان هم روی محورهای X و Y با استفاده از منوهای کشویی عرض (width) و ارتفاع (height) در پنل سمت راست اعمال کرد.
وقتی روی یک گزینه تغییر اندازه از منوی کشویی نگه می‌دارید، خطوطی روی بوم ظاهر می‌شود تا نشان دهد که کادر محدودکننده طرح چگونه تغییر اندازه خواهد داد.
| خاصیت Resizing | قابل اعمال بر روی… | رفتار ابعاد |
| Hug contents | فریم‌های چیدمان خودکار | شیء بر اساس اشیاء فرزند خود تغییر اندازه می‌دهد. |
| Fill container | اشیاء فرزند فریم‌های چیدمان خودکار | شیء تمام فضای موجود را پر می‌کند. |
| Fixed width / height | هر دو | اندازه شیء ثابت می‌ماند. |
| Minimum width / height | هر دو | اندازه شیء برابر یا بزرگتر از حداقل مقدار خواهد بود. |
| Maximum width / height | هر دو | اندازه شیء برابر یا کوچکتر از حداکثر مقدار خواهد بود. |
Hug contents (در آغوش گرفتن محتوا)
از Hug contents روی هر فریم با چیدمان خودکار استفاده کنید تا کوچک‌ترین ابعاد ممکن را در اطراف اشیاء فرزند خود حفظ کند، در حالی که به مقادیر فاصله‌گذاری احترام می‌گذارد.
نکته: روی لبه عمودی یا افقی کادر محدودکننده یک شیء با چیدمان خودکار دوبار کلیک کنید تا آن را روی
Hug contentsتنظیم کنید.
توجه: اگر هر یک از اشیاء فرزند در یک فریم با چیدمان خودکار روی
Fill containerتنظیم شده باشد، فریم والد دیگر محتوا را در آغوش نخواهد گرفت و برای آن محورFixedخواهد شد.
Fill container (پر کردن کانتینر)
لایه‌هایی که روی Fill container تنظیم شده‌اند، کشیده می‌شوند تا تمام فضای موجود در فریم والد خود را اشغال کنند، در حالی که به مقادیر فاصله‌گذاری احترام می‌گذارند.
نکته: کلید ⌥ Option (در مک) یا Alt (در ویندوز) را نگه دارید و روی لبه عمودی یا افقی کادر محدودکننده یک شیء با چیدمان خودکار دوبار کلیک کنید تا آن را روی Fill container تنظیم کنید.
Fixed width or height (عرض یا ارتفاع ثابت)
عرض یا ارتفاع Fixed را روی یک لایه تنظیم کنید تا مطمئن شوید ابعاد آن بدون توجه به تغییرات مقادیر فاصله‌گذاری و اشیاء فرزند، والد یا هم‌سطح، ثابت و بدون تغییر باقی می‌ماند.
Minimum and maximum dimensions (حداقل و حداکثر ابعاد)
توجه: حداقل و حداکثر ابعاد یک تنظیم اضافی است که می‌تواند همزمان با سایر خصوصیات تغییر اندازه استفاده شود.
حداقل یا حداکثر عرض و ارتفاع را برای هر فریم با چیدمان خودکار و فرزندان آن تنظیم کنید.
- منوی کشویی
Widthرا باز کنید تاAdd min widthوAdd max widthرا پیدا کنید. - منوی کشویی
Heightرا باز کنید تاAdd min heightوAdd max heightرا پیدا کنید.
برای حذف یک تنظیم حداقل یا حداکثر، منوی کشویی Width یا Height را باز کرده و Remove min and max را انتخاب کنید.
نادیده گرفتن چیدمان خودکار (Ignore auto layout)
توجه:
Ignore auto layoutقبلاً با نامabsolute positionشناخته می‌شد. این ویژگی نام جدیدی دارد، اما همچنان به همان شکل کار می‌کند.
یک شیء با Ignore auto layout فعال، از جریان چیدمان خودکار مستثنی می‌شود در حالی که در فریم چیدمان خودکار باقی می‌ماند. این شیء و هم‌سطح‌های اطرافش یکدیگر را نادیده می‌گیرند، حتی زمانی که تغییر اندازه می‌دهند یا جابجا می‌شوند.
برای اینکه یک شیء جریان چیدمان خودکار را نادیده بگیرد، یکی از کارهای زیر را انجام دهید:
- یک فرزند از فریم با چیدمان خودکار را انتخاب کرده و روی آیکون Absolute position در پنل سمت راست کلیک کنید.
- یک شیء را در حالی که کلید
⌃ Controlرا فشار داده‌اید، به داخل یک فریم با چیدمان خودکار بکشید.
فریم‌های چیدمان خودکار تودرتو (Nested)
قدرت واقعی واکنش‌گرایی چیدمان خودکار زمانی آشکار می‌شود که رفتارهای تغییر اندازه را در فریم‌های چیدمان خودکار تودرتو ترکیب کنید.
قرار دادن یک فریم با چیدمان خودکار در داخل فریم دیگری با چیدمان خودکار به شما امکان می‌دهد گزینه‌های چیدمان خودکار افقی، عمودی و گرید را برای ایجاد رابط‌های کاربری پیچیده ترکیب کنید.
نحوه ایجاد جریان‌های چیدمان خودکار چندبعدی را بیاموزید.
ملاحظات مربوط به سایر ویژگی‌ها
- Constraints (محدودیت‌ها): شما نمی‌توانید محدودیت‌ها را به اشیاء فرزند در یک فریم با چیدمان خودکار اعمال کنید، مگر اینکه آن شیء جریان چیدمان خودکار را نادیده بگیرد. در عوض، از خاصیت resizing استفاده کنید.
- Components and instances (کامپوننت‌ها و نمونه‌ها): از آنجایی که کامپوننت‌ها فریم هستند، می‌توانید چیدمان خودکار را به آن‌ها اضافه کنید. شما باید چیدمان خودکار را به هر کامپوننت به صورت جداگانه اضافه کنید.
- Prototypes with auto layout (پروتوتایپ‌ها با چیدمان خودکار): برای اعمال اسکرول، باید محتوایی داشته باشید که از مرزهای فریم فراتر رود. از آنجایی که ابعاد والد با چیدمان خودکار توسط محتوا تعیین می‌شود، برای شبیه‌سازی اسکرول باید فریم چیدمان خودکار را داخل یک فریم معمولی قرار دهید.
- Text layers (لایه‌های متنی): لایه‌های متنی نمی‌توانند همزمان
max height(حداکثر ارتفاع) و تعداد مشخصیmax lines(حداکثر خطوط) داشته باشند. - Text resizing (تغییر اندازه متن): اگر می‌خواهید فریم‌های چیدمان خودکار شما کاملاً روان باشند، توصیه میکنیم از جعبه‌های متنی با اندازه ثابت استفاده نکنید.
راهنمای میانبرهای کیبورد
| عملکرد | Mac | Windows |
| افزودن چیدمان خودکار | ⇧ Shift A | ⇧ Shift A |
| حذف چیدمان خودکار | ⌥ Option ⇧ Shift A | Alt ⇧ Shift A |
| تنظیم روی Hug contents | دوبار کلیک روی لبه عمودی/افقی | دوبار کلیک روی لبه عمودی/افقی |
| تنظیم روی Fill container | ⌥ Option + دوبار کلیک روی لبه | Alt + دوبار کلیک روی لبه |
منابع
- مقاله: فعال/غیرفعال کردن چیدمان خودکار در یک طرح
- مقاله: استفاده از جریان‌های افقی یا عمودی در چیدمان خودکار
- سایت فیگما
برای ارسال نظر لطفا ابتدا ثبتنام کنید یا وارد شوید.