Auto Layout یکی از مهم‌ترین قابلیت‌های Figma برای ساخت رابط‌های منعطف و Componentهای قابل استفاده مجدد است. با Auto Layout می‌توانید اندازه و فاصله عناصر را بر اساس محتوا کنترل کنید تا دکمه، کارت، منو یا بخش‌های بزرگ‌تر رابط با تغییر متن و اندازه Container رفتار قابل پیش‌بینی داشته باشند.
Auto Layout در Figma چیست؟
Auto Layout یک سیستم Layout مبتنی بر Frame است که چیدمان فرزندان یک Frame را مدیریت می‌کند. به‌جای قرار دادن دستی Rectangle پشت متن، می‌توانید متن را داخل یک Auto Layout Frame قرار دهید و Padding، Gap، Alignment و رفتار اندازه را تعریف کنید. در نتیجه Component با تغییر محتوا خودش را تطبیق می‌دهد.
مفاهیم اصلی که باید یاد بگیرید
- Direction: چیدمان افقی یا عمودی عناصر.
- Gap: فاصله منظم بین آیتم‌ها.
- Padding: فاصله محتوا از لبه‌های Container.
- Hug contents: اندازه Frame بر اساس محتوای داخل آن تنظیم می‌شود.
- Fill container: عنصر فضای قابل دسترس Parent را پر می‌کند.
- Fixed: عرض یا ارتفاع مقدار ثابتی دارد.
مثال ساده: ساخت دکمه با Auto Layout
برای ساخت یک Button، متن را داخل Frame قرار دهید، Auto Layout را فعال کنید و Padding افقی و عمودی تعیین کنید. اگر Width روی Hug contents باشد، با تغییر Label دکمه، عرض آن نیز به‌صورت خودکار تغییر می‌کند. اضافه کردن Icon هم بدون جابه‌جایی دستی عناصر انجام می‌شود.
Auto Layout و Responsive Design
Auto Layout به‌تنهایی معادل Responsive Web Design نیست، اما ابزار اصلی Figma برای شبیه‌سازی رفتار منعطف Layout است. با ترکیب Auto Layout، Constraints، Min/Max dimensions و رفتارهای Hug و Fill می‌توانید Componentهایی بسازید که در عرض‌های مختلف منطقی‌تر تغییر کنند.
ویدیوی آموزش
نکته: ویدیوی اصلی مربوط به نسخه قدیمی‌تر Figma است و رابط بعضی تنظیمات در نسخه‌های جدید تغییر کرده، اما منطق اصلی Auto Layout همچنان کاربردی است.
