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

آموزش Auto Layout Wrap در Figma برای طراحی چندردیفه — آموزش Auto Layout Wrap در Figma

Wrap در Auto Layout زمانی کاربرد دارد که Childها در یک Row یا Column جا نمی‌شوند و باید به خط بعدی منتقل شوند. این قابلیت برای مجموعه Tagها، Chipها، Cardها، Filterها و Layoutهایی که تعداد Item آن‌ها متغیر است بسیار کاربردی است.

نسخه قدیمی این مقاله فقط معرفی کوتاهی از Wrap داشت. در Figma فعلی Wrap هم در Horizontal Flow و هم Vertical Flow وجود دارد و در کنار Grid Auto Layout گزینه‌های بیشتری برای ساخت Layoutهای Responsive فراهم می‌کند.

در این آموزش چه چیزهایی یاد می‌گیرید؟

Auto Layout Wrap چیست و چه زمانی استفاده می‌شود
Horizontal Wrap و Vertical Wrap چه تفاوتی دارند
چطور Gap، Padding و Alignment روی Wrap اثر می‌گذارند
Resizing Parent و Child در Wrap چگونه تنظیم شود
چطور Tag/Chip Group ریسپانسیو بسازیم
Wrap با Grid چه تفاوتی دارد
چرا Vertical Wrap یک Masonry Layout نیست
Min/Max Dimensions چگونه Wrap را قابل‌کنترل‌تر می‌کنند
اشتباهات رایج در Layoutهای Wrap

ویدیوی آموزش Auto Layout Wrap

نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را همین‌جا قرار داده‌ایم. متن مقاله با رفتار فعلی Wrap در Figma به‌روزرسانی شده است.

تماشای آموزش Wrap در یوتیوب

Wrap در Figma چیست؟

در Auto Layout معمولی، Childها در یک Flow افقی یا عمودی قرار می‌گیرند. با فعال‌کردن Wrap، وقتی فضای Axis اصلی کافی نباشد، Childها به Row یا Column بعدی منتقل می‌شوند. به این ترتیب تعداد Itemها یا Width Parent می‌تواند تغییر کند بدون اینکه مجبور باشید Layout را دستی بازچینی کنید.

Horizontal Wrap چگونه کار می‌کند؟

در Horizontal Wrap، Itemها از چپ به راست یا مطابق Direction فایل در Row قرار می‌گیرند و وقتی Width کافی نباشد به Row بعدی می‌روند. این الگو برای Tag Cloud، Chip Group، Button Group، Filter و Cardهای هم‌اندازه بسیار مناسب است.

Parent معمولا Width مشخص یا Fill container دارد و Childها می‌توانند Fixed، Hug یا ترکیبی از Resizingهای دیگر باشند. انتخاب Width Child تعیین می‌کند در هر Row چند Item جا شود.

Vertical Wrap چیست؟

در Vertical Wrap، Itemها از بالا به پایین قرار می‌گیرند و وقتی Height Parent تمام شود، به Column بعدی منتقل می‌شوند. این حالت برای Listهای چندستونه با Height ثابت، Checkbox list، Bioها یا مجموعه Itemهایی که باید در چند Column پخش شوند کاربرد دارد.

Vertical Wrap با Masonry فرق دارد. Itemها همچنان ترتیب Auto Layout را حفظ می‌کنند و بعد از پر شدن Height موجود به Column بعدی می‌روند؛ Itemها برای پر کردن حفره‌های خالی مانند Masonry آزادانه جابه‌جا نمی‌شوند.

Gap، Row Gap و Column Gap

در Layout Wrap فاصله فقط بین Itemهای یک Line مهم نیست؛ فاصله بین Rowها یا Columnها هم روی Rhythm کلی Layout اثر دارد. Gap را براساس Spacing System تنظیم کنید تا Wrap در Widthهای مختلف منظم بماند.

اگر Layout شما در Breakpoint کوچک متراکم‌تر می‌شود، می‌توانید Spacing را با Number Variables مدیریت کنید یا ساختار Parent را متناسب با Context تغییر دهید.

مثال عملی: Tag Group ریسپانسیو

چند Tag یا Chip را به Component تبدیل کنید.
همه Instanceها را داخل یک Horizontal Auto Layout قرار دهید.
Wrap را فعال کنید.
Parent را روی Fill container یا Width موردنیاز بگذارید.
Tagها را روی Hug contents نگه دارید تا Width براساس Label تغییر کند.
Gap افقی و عمودی را براساس Spacing System تعیین کنید.
Parent را از Width کوچک تا بزرگ Resize کنید و شکستن Rowها را تست کنید.
متن طولانی و Localization را هم امتحان کنید.

Wrap و Resizing

اگر Childها Fill container باشند ممکن است رفتار Wrap با انتظار شما فرق کند، چون هر Child تلاش می‌کند فضای موجود را پر کند. برای Chip یا Tag معمولا Hug contents انتخاب مناسب‌تری است. برای Cardها ممکن است Fixed یا Min/Max Width کنترل بهتری بدهد.

Parent نیز باید Dimension منطقی داشته باشد. اگر Parent روی Hug در همان Axis باشد، ممکن است هیچ کمبود فضایی ایجاد نشود که Wrap را فعال کند. بنابراین Wrap را همیشه همراه Resizing Parent و Child بررسی کنید.

Min و Max Dimensions در Wrap

Min/Max Width و Height کمک می‌کنند Itemها در Layout Wrap بیش‌ازحد کوچک یا بزرگ نشوند. مثلا Card می‌تواند Fill باشد اما Min Width داشته باشد تا وقتی Container کوچک می‌شود، به‌جای فشرده‌شدن نامناسب به Row بعدی منتقل شود.

Wrap یا Grid؟

Wrap برای Flow خطی‌ای مناسب است که در صورت کمبود فضا به Line بعدی می‌رود. Grid Auto Layout ساختار Row/Column صریح‌تری دارد و قابلیت‌هایی مثل Span و Row/Column resizing ارائه می‌دهد. برای Gallery، Bento و Dashboardهایی که ساختار شبکه‌ای مشخص دارند، Grid می‌تواند مناسب‌تر باشد.

Wrap: Tag، Chip، Button Group، Card flow و Itemهای متغیر
Grid: Gallery، Dashboard، Bento و Layout با Row/Column structure مشخص

Wrap یا Constraints؟

Wrap بخشی از Auto Layout است و ترتیب Flow را مدیریت می‌کند. Constraints برای Layerهای داخل Frame معمولی مشخص می‌کند هنگام Resize نسبت به لبه‌های Parent چه رفتاری داشته باشند. اگر مسئله شما «چند Item که باید خودکار به Row بعدی بروند» است، Wrap انتخاب مستقیم‌تری است.

اشتباهات رایج در Wrap

Hug بودن Parent در Axis اشتباه: فضای Parent هیچ‌وقت کم نمی‌شود و Wrap دیده نمی‌شود.
Fill کردن همه Childها: هر Item تمام Row را می‌گیرد و Layout غیرمنتظره می‌شود.
توقع Masonry: Vertical Wrap حفره‌های نامنظم را پر نمی‌کند.
نداشتن Min Width: Cardها ممکن است قبل از Wrap بیش‌ازحد باریک شوند.
Gap تصادفی: Row و Column spacing باید با Design System هماهنگ باشد.
تست نکردن Content: Labelهای کوتاه و بلند، تعداد Item و Widthهای مختلف را تست کنید.

جمع‌بندی

Auto Layout Wrap برای زمانی است که یک Flow باید با تغییر فضای Parent به چند Row یا Column تقسیم شود. Horizontal و Vertical Wrap هر دو در Figma فعلی وجود دارند؛ انتخاب Resizing درست، Gap و Min/Max تعیین می‌کند نتیجه واقعا Responsive باشد.