Auto Layout یکی از مهم‌ترین ابزارهای Figma برای ساخت رابط‌هایی است که با تغییر محتوا و اندازه صفحه به‌صورت منطقی واکنش نشان می‌دهند. به‌جای اینکه فاصله و موقعیت هر Layer را دستی تنظیم کنید، Auto Layout ترتیب، Direction، Gap، Padding، Alignment و Resizing را مدیریت می‌کند.
نسخه قبلی این آموزش Auto Layout را در سه بخش ویدیویی توضیح می‌داد و ویدیوی Wrap را هم در انتها قرار داده بود. هر چهار ویدیو حفظ شده‌اند؛ متن مقاله هم با Resizing فعلی Figma، Min/Max Dimensions، Wrap و Grid به‌روزرسانی شده است.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- Auto Layout چیست و چه زمانی استفاده می‌شود
- چطور با Shift + A Auto Layout بسازیم
- Direction، Gap، Padding و Alignment چه نقشی دارند
- تفاوت Hug contents، Fill container و Fixed چیست
- Min/Max Width و Height چگونه ریسپانسیو بودن را کنترل می‌کنند
- Nested Auto Layout برای ساخت Componentهای واقعی چگونه کار می‌کند
- Wrap و Grid چه تفاوتی دارند
- چطور Button، Card، List و Page Section ریسپانسیو بسازیم
- اشتباهات رایج در Auto Layout و Resizing
ویدیوهای کامل آموزش Auto Layout
نسخه منطبق این آموزش‌ها در آپارات پیدا نشد؛ بنابراین ویدیوهای اصلی YouTube را حفظ کرده‌ایم. مقاله زیر با قابلیت‌های فعلی Figma به‌روزرسانی شده است.
بخش اول: مبانی Auto Layout
بخش دوم: تنظیمات و Resizing
بخش سوم: کاربرد عملی Auto Layout
Auto Layout در Figma چیست؟
Auto Layout یک رفتار Layout برای Frame است که Childها را بر اساس Direction، Spacing، Padding و Alignment مرتب می‌کند. وقتی Text طولانی‌تر شود، Layer اضافه یا حذف شود یا Frame تغییر اندازه دهد، Layout می‌تواند بدون جابه‌جایی دستی خود را با شرایط جدید تطبیق دهد.
این قابلیت برای Button، Input، Card، Navigation، List، Table، Dashboard و حتی Page Layoutهای بزرگ کاربرد دارد. بخش مهم Auto Layout فقط مرتب‌کردن نیست؛ Resizing بین Parent و Child است که آن را برای طراحی Responsive قدرتمند می‌کند.
چطور Auto Layout را فعال کنیم؟
- Layerها یا Frame موردنظر را انتخاب کنید.
- کلید Shift + A را بزنید یا Add auto layout را از پنل Properties انتخاب کنید.
- Direction را Horizontal یا Vertical تعیین کنید.
- Gap، Padding و Alignment را تنظیم کنید.
- Resizing Parent و Child را بررسی کنید؛ Auto Layout بدون Resizing درست معمولا نتیجه ریسپانسیو مناسبی نمی‌دهد.
Direction، Gap، Padding و Alignment
Direction ترتیب اصلی Childها را مشخص می‌کند. در Horizontal، Childها کنار هم و در Vertical زیر هم قرار می‌گیرند. Gap فاصله بین Childها است و Padding فاصله Content از لبه Parent را کنترل می‌کند.
Alignment مشخص می‌کند Childها در Cross Axis چگونه قرار بگیرند. در طراحی Component بهتر است Padding و Gap را به‌عنوان بخشی از System تعریف کنید، نه مقدارهای تصادفی برای هر Instance.
Hug contents چیست؟
وقتی Width یا Height یک Auto Layout Frame روی Hug contents باشد، اندازه Parent بر اساس Childها تعیین می‌شود. Button مثال کلاسیک است: اگر Label از «ورود» به «ایجاد حساب کاربری» تغییر کند، Button می‌تواند همراه متن بزرگ‌تر شود و Padding ثابت بماند.
Fill container چیست؟
Fill container روی Childهای داخل Auto Layout استفاده می‌شود و Child فضای موجود Parent را پر می‌کند. مثلا در یک Row، Text Container می‌تواند Fill باشد تا فضای باقی‌مانده را بگیرد، در حالی که Icon یا Avatar Fixed باقی بماند.
Fill فقط زمانی معنا دارد که Layer داخل Auto Layout Parent باشد. انتخاب اشتباه Hug و Fill یکی از رایج‌ترین دلایل رفتار عجیب Componentها هنگام Resize است.
Fixed Width و Fixed Height
Fixed یعنی Dimension مستقل از Content یا فضای Parent ثابت بماند. برای Icon، Avatar یا Thumbnail با اندازه مشخص کاربردی است. اگر یک Dimension را دستی وارد کنید، Figma معمولا Resizing همان Axis را Fixed می‌کند.
Min و Max Dimensions
در Figma فعلی می‌توانید Min Width/Height و Max Width/Height را همزمان با Resizingهای دیگر تعریف کنید. مثلا Card می‌تواند Fill container باشد اما بیشتر از 400px بزرگ نشود یا Button حداقل Width مشخصی داشته باشد.
این قابلیت برای Responsive Componentها بسیار مهم است، چون بین «کاملا آزاد» و «کاملا Fixed» یک محدوده کنترل‌شده ایجاد می‌کند. Min/Max همچنین می‌تواند با Number Variable ترکیب شود.
مثال عملی: Button ریسپانسیو
- Icon و Text را داخل یک Horizontal Auto Layout قرار دهید.
- Gap را براساس Spacing System تنظیم کنید.
- Padding افقی و عمودی را تعریف کنید.
- Button Parent را روی Hug contents بگذارید.
- برای Label از Hug استفاده کنید و Icon را Fixed نگه دارید.
- اگر Button باید در Form تمام عرض شود، Instance یا Parent مناسب را روی Fill container قرار دهید.
- حالت‌های طولانی متن و کوچک‌ترین/بزرگ‌ترین عرض را تست کنید.
Nested Auto Layout
رابط‌های واقعی معمولا چند لایه Auto Layout دارند. Card می‌تواند Vertical Auto Layout باشد، Header داخل آن Horizontal و Button Group یک Auto Layout دیگر. این Nested structure زمانی خوب کار می‌کند که هر Parent/Child مسئولیت مشخصی در Resizing داشته باشد.
به‌جای اضافه‌کردن Frameهای زیاد فقط برای فاصله، اجازه دهید Gap و Padding کار اصلی Spacing را انجام دهند. Nesting غیرضروری فایل را پیچیده می‌کند و Debug Resizing را سخت‌تر می‌کند.
Wrap در Auto Layout
Wrap وقتی استفاده می‌شود که Childها در فضای Parent جا نشوند و باید به Row یا Column بعدی منتقل شوند. Figma فعلی Wrap را در Flow افقی و عمودی پشتیبانی می‌کند. Horizontal Wrap برای Tag/Chip و Card Grid مناسب است؛ Vertical Wrap می‌تواند Fixed-height multi-column layout بسازد.
Wrap با Masonry یکی نیست؛ ترتیب Auto Layout حفظ می‌شود. برای جزئیات بیشتر، آموزش Auto Layout Wrap در Figma را ببینید.
ویدیوی Auto Layout Wrap
Grid Auto Layout با Wrap چه تفاوتی دارد؟
Grid یک Flow جدا در Auto Layout است که Childها را در Row و Column قرار می‌دهد و قابلیت‌هایی مثل Span و Row/Column sizing دارد. برخلاف Wrap، Grid فقط «وقتی جا تمام شد برو خط بعد» نیست؛ ساختار Row/Column را مستقیما کنترل می‌کند. برای Gallery، Bento و Dashboardهای ساختاریافته Grid می‌تواند انتخاب مناسب‌تری باشد.
Auto Layout یا Constraints؟
Auto Layout برای Layout flow و رابطه Parent/Child بسیار قدرتمند است. Constraints بیشتر برای Child داخل Frame معمولی استفاده می‌شود تا هنگام Resize نسبتش با لبه‌ها مشخص بماند. Figma اجازه نمی‌دهد Constraints معمولی را روی Childهای داخل Auto Layout Frame به همان شکل اعمال کنید؛ بنابراین باید بدانید هر مسئله را با کدام سیستم حل کنید.
برای جزئیات، آموزش Constraints و طراحی ریسپانسیو در Figma را بخوانید.
اشتباهات رایج در Auto Layout
- همه چیز Fixed: نتیجه در Widthهای مختلف نمی‌تواند تطبیق پیدا کند.
- همه چیز Fill: Childها بی‌دلیل کشیده می‌شوند.
- Frame برای فاصله: Gap/Padding را جایگزین Spacerهای ساختاری کنید.
- Nesting بیش‌ازحد: فقط وقتی Parent جدید مسئولیت Layout دارد آن را اضافه کنید.
- نداشتن Min/Max: بعضی Componentها در عرض بسیار کم یا زیاد خراب می‌شوند.
- تست نکردن Content واقعی: متن بلند، Localization و تعداد Itemهای متفاوت را امتحان کنید.
جمع‌بندی و ادامه مسیر
Auto Layout زمانی قدرتمند می‌شود که Direction، Spacing و Resizing را به‌عنوان یک سیستم ببینید. Hug بر اساس Content اندازه می‌گیرد، Fill فضای Parent را می‌گیرد، Fixed ثابت می‌ماند و Min/Max محدوده امن ایجاد می‌کند. Wrap و Grid هم برای Layoutهای چندردیفه و ساختاریافته گزینه‌های جدیدتری هستند.
- ادامه: Auto Layout Wrap
- مرتبط: Constraints
- مرتبط: Components
- همه آموزش‌ها: Figma در LearnUIX
