نحوه استفاده از طرح بندی خودکار در Figma

Auto Layout یک ابزار ضروری برای هر طراح و کاربر Figma است. این ویژگی به شما اجازه می دهد تا تغییراتی مانند تغییر اندازه یا تغییر مکان فریم ها و اشیاء ایجاد کنید. طرح‌بندی خودکار به شما امکان می‌دهد ارتفاع و وزن یک عنصر را تنظیم کنید، به عنوان مثال، با تنظیم خودکار، کار خود را به نصف برش دهید.

از آنجایی که اندازه صفحه نمایش بر اساس دستگاه یا مرورگری که کاربر برای دسترسی به وب‌سایت استفاده می‌کند تغییر می‌کند، طرح‌بندی خودکار باعث می‌شود عناصر داخل فریم‌ها با این تغییرات تنظیم شوند. این باعث می شود که چیدمان و ساختار دقیق تر و هماهنگ تر به نظر برسند. برای یادگیری نحوه استفاده از Auto Layout در Figma و ویژگی های آن به ادامه مطلب مراجعه کنید.

با استفاده از طرح بندی خودکار

برای استفاده از طرح‌بندی خودکار و همه ویژگی‌های آن، ابتدا باید آن را به فریمی که روی آن کار می‌کنید اضافه کنید، که می‌تواند یک فریم جدید یا با محتوا، اشیا و اجزا باشد. پس از انتخاب فریم یا اشیاء، نحوه اضافه کردن طرح‌بندی خودکار به آن به این صورت است:

• کلیدهای Alt + A را فشار دهید (در مک و ویندوز کار می کند).
• روی اشیاء یا مؤلفه ها کلیک راست کرده و روی Auto Layout کلیک کنید (شما باید این ویژگی را به هر مؤلفه اضافه کنید زیرا به صورت انبوه غیرممکن است).
• در منوی Figma روی نماد مثبت در کنار گزینه "Auto Layout" ضربه بزنید.

علاوه بر اضافه کردن طرح‌بندی خودکار به کادر خود، می‌توانید کارهای مختلفی انجام دهید، از روی هم قرار دادن فریم‌ها گرفته تا کپی کردن، مرتب کردن، و حذف اشیا.

اضافه کردن و حذف اشیاء

افزودن اشیاء به قاب شما بسیار ساده است. فقط باید شیئی را که می خواهید اضافه کنید بگیرید و نشانگر را دنبال کنید. و اگر می‌خواهید یکی را حذف کنید، آن را به عقب بکشید و حذف را فشار دهید. اگر انتخاب می کنید که یک شی بزرگتر از فریم والد اضافه کنید، باید از تنظیمات پیش فرض Figma اجتناب کنید تا بتوانید این کار را انجام دهید. می توانید این کار را با نگه داشتن دکمه "Ctrl" برای ویندوز و "Command" برای مک انجام دهید.

کپی کردن اشیاء

اگر می‌خواهید دو یا چند شیء مشابه به قاب اضافه کنید، می‌توانید آن‌ها را کپی کنید، که یک ویژگی مفید لایه خودکار است. به این صورت می توانید این کار را انجام دهید:

1. روی شیئی که می خواهید کپی کنید ضربه بزنید.
   
2. اگر ویندوز دارید، دکمه های «Ctrl» و «D» را به طور همزمان نگه دارید.
   
3. برای مک، با نگه داشتن دکمه های "Command" و "D" کپی کنید.
   

مرتب کردن اشیا

اگر از ظاهر قاب خود و سازماندهی اشیا و اجزای داخل آن خوشتان نمی آید، می توانید آنها را دوباره مرتب کنید. اگر دو لایه را ادغام کرده اید، باید تنظیمات پیش فرض Figma را با فشار دادن "Ctrl" برای ویندوز و "Command" برای Mac برای دسترسی به گزینه انتخاب عمیق و جابجایی جزء از لایه اولیه دور بزنید. با این حال، اگر یک فریم است، می‌توانید یک شی را انتخاب کنید و آن را به جای دیگری منتقل کنید، شبیه به اضافه کردن اشیا، یا از کلید پیکان استفاده کنید.

سطوح طرح بندی خودکار

یکی دیگر از ویژگی‌های طرح‌بندی خودکار ترکیب فریم‌های بیشتر در یکی برای ایجاد یک رابط پیچیده‌تر است که در آن می‌توانید سطوح مختلف طرح‌بندی خودکار مانند ردیف‌های دکمه‌ها و دکمه‌ها، یک پست و یک جدول زمانی را پوشش دهید. هر سطح به شما این امکان را می دهد که یک شی دیگر را به فریم خود اضافه کنید. سطوح ردیف دکمه ها و دکمه ها افقی هستند، در حالی که یک پست یک لایه عمودی است که می توانید توضیحات، تصاویر و غیره را وارد کنید.

هنگامی که دو فریم را در کنار هم قرار می دهید، آنها ادغام می شوند و ویژگی های یک فریم والد را به دست می آورند. این به کاربر اجازه می دهد تا اشیاء قابل تنظیم را پیاده سازی کند. می توانید یکی را بگیرید و روی دیگری بگذارید تا دو قاب به هم متصل شوند. برای انجام این کار، باید:

1. یک فریم و هر چیزی را که می خواهید به آن اضافه کنید انتخاب کنید.
   
2. "Shift + A" را فشار دهید تا یک قاب طرح بندی خودکار اضافه شود.
   

توابع طرح بندی خودکار

گزینه Auto Layout در Figma دارای ویژگی ها یا عملکردهای ارزشمند بسیاری است، از جهت و ترتیب انباشتگی تا فاصله گذاری، تغییر اندازه و تراز کردن. در این بخش در مورد هر یک از این توابع با جزئیات بیشتری صحبت خواهد شد.

جهت

همانطور که از نام آن پیداست، جهت اشاره به ترتیب اشیاء در یک قاب دارد. هنگام استفاده از طرح بندی خودکار، اشیاء را می توان قرار داد:

• به صورت عمودی - اجسام روی محور y قرار می گیرند. این گزینه برای لیست ها، منوها، فیدهای خبری و غیره مناسب است.
• به صورت افقی - اشیاء و اجزای موجود در محور x (دکمه ها، نمادها و غیره).
• موقعیت قرار دادن - اشیاء در چندین ستون و ردیف تنظیم می شوند.

سفارش انباشته

شما می توانید انتخاب کنید که کدام ترتیب انباشته شدن با قاب شما مناسب تر است. این فقط یک تغییر بصری است زیرا ترتیب انباشته شدن یکسان می ماند (اگر 1،2،3 باشد، 1،2،3 باقی می ماند اما با تنظیمات بصری). هنگامی که اشیاء روی یکدیگر چیده می شوند، می توانید انتخاب کنید که کدام یک در بالا باشد. بنابراین، به عنوان مثال، اگر شما سه چیز با علامت 1، 2، و 3 دارید، می توانید 1 یا 3 را انجام دهید.

1. قاب Auto Layout را انتخاب کنید.
   
2. به گزینه Auto Layout در سمت راست صفحه خود بروید.
   
3. روی سه نقطه افقی ضربه بزنید تا گزینه های پیشرفته باز شوند.
   
4. گزینه “Canvas Stacking” را پیدا کنید.
   
5. «اول در بالا» یا «آخر در بالا» را انتخاب کنید.
   

موقعیت مطلق

یکی دیگر از ویژگی های "جریان لایه" یک موقعیت مطلق است، جدا از ترتیب و جهت انباشته. این ویژگی به شما این امکان را می دهد که بدون توجه به مرزهای فریم، یک شی را در هر کجا که می خواهید قرار دهید. نحوه فعال کردن آن به این صورت است:

1. یک شی را بگیرید و داخل قاب قرار دهید.
   
2. در منوی سمت راست، در کنار مقادیر «X» و «Y»، روی نمادی مانند مربع بدون لبه با داخل پلاس ضربه بزنید.
   
3. جسم را در امتداد خطوط قاب حرکت دهید.
   

تنظیم شکاف

چند ویژگی وجود دارد که می توانید در مورد فاصله گذاری تنظیم کنید، مانند فاصله. شما دو راه برای تغییر شکاف دارید: خودکار و تایپ کردن در یک شکاف خاص. اگر می خواهید شکاف شما تا حد امکان بزرگ باشد، باید تنظیمات خودکار را در منوی Auto Layout انتخاب کنید. اما اگر می خواهید مقادیر خود را وارد کنید، آنها را در کادرهای اختصاص داده شده تایپ کنید.

علاوه بر این، تنظیم شکاف را می توان برای همه جهات تنظیم کرد. اگر نمادهای شما فقط افقی و عمودی هستند، می توانید یک فاصله افقی بین آنها انتخاب کنید. با این حال، اگر آنها در موقعیت بسته بندی هستند، می توانید تنظیمات شکاف عمودی و افقی را تنظیم کنید.

تنظیم تراز

پس از تنظیم ویژگی‌های جهت، بالشتک و شکاف، می‌توانید تراز شی فرزند را در کادر خود تنظیم کنید زیرا این ویژگی به تنظیمات فاصله بستگی دارد. شما نمی توانید تراز هر شی را تغییر دهید، اما الگوی ارائه شده در منوی طرح بندی خودکار را انتخاب کنید. می توانید روی شبکه 3×3 در منو کلیک کنید و تراز مورد نظر خود را انتخاب کنید. این کار را می توان با کلیدهای جهت دار یا دکمه های WSAD روی صفحه کلید انجام داد.

علاوه بر این، می‌توانید تنظیمات خودکار را در اینجا برای تغییر ترازهای افقی و عمودی به عنوان یک ردیف انتخاب کنید. با مقادیر خاص، می توانید هر نه گزینه (بالا چپ، پایین سمت چپ، چپ، راست چپ، پایین سمت راست و غیره) را داشته باشید.

همچنین می توانید با فعال کردن این گزینه از منو و نگه داشتن دکمه "B" تراز متن را تنظیم کنید.

تغییر اندازه

گزینه‌های تغییر اندازه طرح‌بندی خودکار دارای ویژگی‌های اضافی بسیاری مانند محتوای در آغوش گرفتن، گزینه پر کردن ظرف، تنظیم عرض و ارتفاع، ابعاد و غیره هستند. اگر می‌خواهید مقادیر شما ثابت شوند، می‌توانید گزینه خودکار را انتخاب کنید، اما این امکان را محدود می‌کند. برای تغییر اندازه، توصیه می شود مقادیر خود را تنظیم کنید.

می توانید یک مقدار ثابت را انتخاب کنید یا آن را روی حداکثر یا حداقل ابعاد ممکن برای عرض و ارتفاع تنظیم کنید. محتوای Hug به شما امکان می دهد اندازه یک قاب را بر اساس شی فرزند تنظیم کنید، در حالی که گزینه fill container اندازه یک شی را مطابق با فریم اصلی تغییر می دهد.

ایجاد فریم های منحصر به فرد با طرح خودکار

Auto Layout به عنوان یکی از ویژگی های ضروری فیگما، می تواند قاب و اشیاء و محفظه های داخل آن را به دلخواه تنظیم کند. خواص و ویژگی های آن چندگانه است و به شما امکان می دهد محصولی مناسب و مرتب بسازید. Auto Layout ابزاری اساسی است که باید قبل از کار در Figma به آن مسلط شوید.

از کدام عملکرد طرح بندی خودکار بیشتر استفاده می کنید؟ در بخش نظرات زیر به ما اطلاع دهید.