Postدر Figma اگر هنوز از Frame‌های ثابت و دستی استفاده می‌کنی، Auto Layout می‌تونه زندگی‌ات رو خیلی راحت‌تر کنه 😄 مخصوصاً بر…

در Figma اگر هنوز از Frame‌های ثابت و دستی استفاده می‌کنی، Auto Layout می‌تونه زندگی‌ات رو خیلی راحت‌تر کنه 😄 مخصوصاً برای چیزهایی مثل کارت محصول، کارت خبر یا هر کامپوننتی که قراره روی چند سایز اسکرین جواب بده. اینجا یه ورک‌فلو واقعی و ساده‌ست بر اساس داک رسمی Figma: Create dynamic designs with Auto layout 🧩 سناریو: کارت محصول واکنش‌گرا فرض کن تو یه اپ فروشگاهی کار می‌کنی و یه کارت لازم داری که: - بالا عکس محصول باشه - زیرش عنوان - زیر عنوان، قیمت و دکمه Add to Cart کنار هم - تو موبایل و دسکتاپ بدون شکستن، خودش رو Adapt کنه ۱️⃣ ساخت اسکلت کارت - یه Frame بساز (F) - توش ۳ آیتم بذار: Image، Title، Row پایینی (Price + Button) - حالا روی Frame اصلی از پنل راست، Auto layout رو فعال کن (یا Shift+A) - Direction رو بذار روی عمودی (Vertical) - Spacing بین آیتم‌ها رو مثلاً 8 یا 12 بذار که ریتم خوبی بده 🔁 ۲️⃣ کنترل Padding و Radius کارت - روی همون Frame اصلی: - Padding افقی/عمودی رو مثلاً 16 بذار - Corner Radius مثلاً 12 تا کارت نرم و مدرن بشه - Fill کارت رو یه رنگ خنثی روشن انتخاب کن (مثلاً #FFFFFF روی پس‌زمینه خاکستری روشن) ۳️⃣ ردیف قیمت و دکمه با Auto Layout افقی - Price و Button رو انتخاب کن - Shift+A تا یه Auto layout افقی بسازی - Justify content رو روی "Space between" بذار تا دو سر کارت وایسن - Alignment عمودی رو وسط تنظیم کن تا Price و Button روی یک خط باشن ۴️⃣ رفتار متن و دکمه روی Resize - روی کارت اصلی، از قسمت Resizing، عرض رو روی "Fill container" برای متن عنوان بذار - برای Image می‌تونی "Fixed width" بذاری که پروپورشن ثابت بمونه - دکمه رو تو Auto layout افقی روی Hug content بذار که با طول متن خودش تنظیم بشه ✅ ۵️⃣ تست در چند سایز (واقعا مهم برای UI/UX) - کارت رو انتخاب کن و از Scale استفاده نکن؛ فقط Width رو با درگ کردن Handleها یا وارد کردن عدد عوض کن - ببین متن رپ می‌شه؟ فاصله‌ها منطقی می‌مونن؟ چیزی نمی‌چسبه به لبه‌ها؟ این دقیقاً همون چیزیه که تو داک رسمی Figma هم تاکید شده: اول رفتار، بعد سایز. ۶️⃣ نمونه Auto Layout واقعی (کد JSON Frame) چون اینجا کد برنامه‌نویسی نداریم، یه نمونه JSON از ساختار Auto layout که Figma API تولید می‌کنه رو می‌ذارم که ببینی زیر hood چه اتفاقی می‌افته 👇 { "layoutMode": "VERTICAL", "itemSpacing": 12, "paddingLeft": 16, "paddingRight": 16, "paddingTop": 16, "paddingBottom": 16, "primaryAxisAlignItems": "SPACE_BETWEEN", "counterAxisAlignItems": "CENTER" } Ref: Figma FrameNode layoutMode با چند تا کارت این‌طوری و تبدیل‌شون به Component، می‌تونی کل لیست محصولات یا مقالات رو خیلی تمیز و قابل نگه‌داری طراحی کنی. دفعه بعد نیاز به تغییر Padding یا Radius داشتی، فقط تو یه جا آپدیت می‌کنی و بقیه Variantها خودشون تنظیم می‌شن ✨ امتحانش کن روی یه پروژه واقعی و ببین چقدر زمانت تو Iterationهای بعدی سیو می‌شه 🙌 🔖 #Design #طراحی #UI #UX #Figma #Auto_Layout #UI_Design #Component #Product_Card #Design_System 👤 Developix 💎 Channel: @DevelopixDesign