در ادامه آموزش‌های فیگما، قصد داریم با ابزارهای تراز (Align) و سایر ابزارهای مرتبط در Figma آشنا شویم که به شما کمک می‌کنند تا اشیا و اشکال را به شیوه‌ای منظم و دقیق در طراحی خود تراز کنید. علاوه بر این، مفاهیمی مانند تغییر اندازه، تنظیم فاصله و حالت Dev Mode را بررسی خواهیم کرد تا بتوانید پروژه‌های UI Design خود را برای کدنویسی آماده کنید.
- چطور وضعیت “آماده برای کدنویسی” یک فریم را در Figma فعال کنیم؟
- نحوه ورود به Dev Mode در فیگما
- روش‌های مختلف ساخت کامپوننت در Figma
- چطور وضعیت “آماده برای کدنویسی” یک فریم را غیرفعال کنیم؟
- چطور یک فریم را به اسلاید دک Figma تبدیل کنیم؟
- معرفی بخش Position در پنل دیزاین Figma
- معرفی و کار با ابزارهای Alignment (تراز کردن) در فیگما
- چطور فاصله بین آبجکت‌ها را در فیگما به طور مساوی تقسیم و تنظیم کنیم؟
- نحوه مشاهده فاصله بین اشیا در Figma
- چطور اشیای بهم ریخته را سریع مرتب و منظم کنیم؟
- چطور موقعیت اشیا و عناصر را در Figma مشاهده و تغییر دهیم؟
- چرخش اشیا در Figma و روش آینه‌ای کردن آن‌ها
- تغییر سایز و اندازه اشیا در Figma
ویدیوی کامل Align و Tidy Up در Figma
اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.
آموزش Align در Figma؛ تراز حرفه‌ای لایه‌ها و تنظیم فاصله
تراز یا Alignment یکی از اصول پایه طراحی رابط کاربری است. در فیگما ابزارهایی داریم که کمک می‌کنند چند لایه را دقیقا نسبت به هم تراز کنیم، فاصله بین آن‌ها را یکسان کنیم و آبجکت‌های نامرتب را مرتب بچینیم. در این درس فقط اسم دکمه‌ها را مرور نمی‌کنیم؛ با متن‌های «UI Design»، «UX Design» و «Product Design» آزمایش می‌کنیم تا فرق Align، Distribute و Tidy Up را در عمل ببینید.
Align در فیگما دقیقا چه کاری انجام می‌دهد؟
سه متن یا شکل را در Canvas قرار دهید و همه را انتخاب کنید. در بخش Position یا نوار ابزار مرتبط، شش دستور اصلی تراز را می‌بینید: Align left، Align horizontal centers، Align right، Align top، Align vertical centers و Align bottom. سه دستور نخست موقعیت افقی را تنظیم می‌کنند و سه دستور بعدی به محور عمودی مربوط‌اند.
مثلا اگر از بین سه متن، عنوان UX Design از بقیه بالاتر قرار گرفته باشد، با Align top می‌توانید لبه بالای هر سه را روی یک خط قرار دهید. اگر می‌خواهید متن‌ها از سمت چپ هم‌راستا باشند، Align left را انتخاب کنید. در ویدیو برای همین مثال تفاوت انتخاب هر دستور را نشان می‌دهم. علامت کوچک روی آیکون‌های Align هم جهت تراز را مشخص می‌کند؛ به این نشانه‌ها توجه کنید تا لازم نباشد اسم تمام دستورها را حفظ کنید.
Distribute Spacing؛ یکسان‌کردن فاصله بین عناصر
ممکن است سه آبجکت را Align کنید، اما فاصله بین اولی و دومی با فاصله دومی و سومی برابر نباشد. اینجا باید از Distribute horizontal spacing یا Distribute vertical spacing استفاده کنید. ابتدا دست‌کم سه عنصر با فاصله نامنظم بسازید، همه را انتخاب کنید و با دستور مناسب، فاصله خالی بین آن‌ها را یکسان کنید. فیگما معمولا موقعیت دو عنصر انتهایی را ثابت نگه می‌دارد و عناصر میانشان را جابه‌جا می‌کند.
در نسخه آموزش، میانبرهای Alt + Shift + H برای پخش افقی و Alt + Shift + V برای پخش عمودی هم نشان داده شده‌اند. از آنجا که میانبرها ممکن است با سیستم‌عامل یا نسخه تغییر کنند، نام دستورهای فعلی را در منوی Figma بررسی کنید. برای اندازه‌گیری نتیجه، یک آبجکت را انتخاب کنید و با نگه‌داشتن Alt نشانگر را روی آبجکت کناری ببرید تا فاصله آن‌ها دیده شود.
Tidy Up در فیگما چه تفاوتی با Distribute دارد؟
فرض کنید چند دایره و مستطیل را بدون نظم روی Canvas پخش کرده‌اید. با Tidy Up می‌توانید آن‌ها را در یک ردیف، ستون یا شبکه مرتب کنید. تفاوت مهم این است که Distribute عمدتا فاصله را در یک محور یکسان می‌کند؛ Tidy Up علاوه بر فاصله‌گذاری می‌تواند چیدمان عناصر را برای Smart Selection منظم کند. نتیجه دقیق آن بسته به شکل انتخاب شما متفاوت است.
در ویدیو چند آبجکت پراکنده ایجاد می‌کنم و بعد از انتخاب همه، Tidy Up را می‌زنم تا ببینید چطور مرتب می‌شوند. پیشنهاد می‌کنم این ابزار را روی چند شکل آزمایشی با فاصله‌های متفاوت تست کنید؛ استفاده عملی از آن خیلی بهتر از حفظ‌کردن توضیح دکمه است. برای جزئیات به‌روز، مستندات رسمی Alignment و Tidy Up را بررسی کنید.
Position و مختصات X و Y در پنل Properties
بعد از تراز، نوبت کنترل موقعیت دقیق هر شیء است. وقتی یک لایه را انتخاب کنید، در پنل Properties مقدارهای X و Y را می‌بینید که موقعیت آن را روی محور افقی و عمودی تعیین می‌کنند. نکته مهم این است که این مختصات نسبت به کانتینر مرجع محاسبه می‌شوند. مثلا موقعیت یک Rectangle داخل Frame نسبت به همان فریم معنا پیدا می‌کند، نه لزوما نقطه صفر کل Canvas.
من در ویدیو ابتدا یک Frame را جابه‌جا می‌کنم، بعد عددهای X و Y یکی از متن‌های داخلی را تغییر می‌دهم و نشان می‌دهم چطور شیء به نقطه موردنظر منتقل می‌شود. این روش برای تنظیم دقیق جای عناصر خیلی مفید است، اما نباید ساختارهای واکنش‌گرا را صرفا بر پایه مختصات ثابت طراحی کرد.
Rotation و Flip؛ چرخاندن یا قرینه‌کردن شکل و عکس
با مقدار Rotation می‌توانید یک لایه را مثلا ۴۵ درجه بچرخانید؛ مقدار منفی جهت چرخش را عوض می‌کند. دستورات Rotate 90° هم شیء را به‌اندازه یک‌ربع دور می‌چرخانند. دو ابزار دیگر Flip horizontal و Flip vertical هستند که آبجکت را مثل آینه به‌صورت افقی یا عمودی قرینه می‌کنند.
یک نکته کاربردی از ویدیو: اگر تصویر فردی را Flip کنید که روی لباسش نوشته‌ای وجود دارد، نوشته هم آینه‌ای می‌شود. پس قبل از استفاده از Flip روی عکس‌های تبلیغاتی یا تصویر محصول، لوگوها و متن‌های داخل تصویر را بررسی کنید. گاهی بهتر است به‌جای Flip از عکس مناسب‌تری استفاده کنید.
تغییر Width و Height و حفظ تناسب تصویر
در بخش Layout یا ابعاد، مقدارهای W و H عرض و ارتفاع عنصر را نشان می‌دهند. اگر نسبت ابعاد قفل باشد، با تغییر عرض، ارتفاع هم متناسب تغییر می‌کند. مثلا وقتی یک دایره ۵۰۰ در ۵۰۰ را با قفل تناسب کوچک کنید، شکل دایره حفظ می‌شود؛ اما اگر قفل را بردارید و فقط عرض را ۲۵۰ کنید، به بیضی تبدیل خواهد شد.
برای تصویرها باید به نوع Fill هم توجه کنید. Fit، Fill و Crop نتیجه‌های متفاوتی دارند: گاهی قاب تصویر کوچک می‌شود ولی تصویر داخل آن همچنان تناسب خودش را حفظ می‌کند؛ گاهی بخشی از عکس بریده می‌شود. اگر قصد ندارید تصویر کشیده یا نامتناسب دیده شود، هم قفل نسبت ابعاد را بررسی کنید و هم حالت نمایش Fill/Crop را.
نکته تکمیلی: آماده‌سازی طراحی برای توسعه‌دهنده
در ابتدای ویدیو، دکمه Mark as ready for dev را هم نشان می‌دهم. این گزینه برای مشخص‌کردن فریم‌های آماده توسعه در فرایند تحویل طراحی کاربرد دارد. همچنین درباره ساخت Component از عناصر تکراری و تفاوت آن با Instance صحبت می‌کنم. این بخش‌ها آموزش مستقل خودشان را دارند؛ اینجا مهم است بدانیم هم‌راستایی عناصر و آماده‌بودن فایل برای توسعه، فقط با زدن یک دکمه حاصل نمی‌شود.
تمرین؛ یک ردیف کارت را حرفه‌ای مرتب کنید
سه کارت هم‌اندازه ایجاد کنید و نام آن‌ها را UI، UX و Product Design بگذارید. ابتدا بدون توجه به فاصله، کارت‌ها را در نقاط مختلف Canvas پخش کنید. حالا با Align top روی یک خط بیاورید، با Distribute horizontal spacing فاصله‌ها را برابر کنید و نتیجه را با Alt اندازه بگیرید. بعد همان سه کارت را با Tidy Up مرتب کنید و تفاوت نتیجه را ببینید. در پایان یک تصویر را Flip horizontal کنید و بررسی کنید آیا متن داخلش برعکس شده است یا نه. برای مرور پیش‌نیاز این درس به قسمت چهارم آموزش فیگما برگردید.
Align، Distribute و Tidy Up چه تفاوتی دارند؟
Align لایه‌ها را نسبت به لبه یا مرکز Selection تراز می‌کند. Distribute فاصله بین لایه‌ها را در محدوده فعلی Selection یکسان می‌کند. Tidy Up علاوه بر فاصله‌گذاری، لایه‌ها را به ساختاری منظم تبدیل می‌کند تا شرایط Smart Selection ایجاد شود؛ در Smart Selection هم می‌توانید فاصله، ترتیب و Grid را سریع‌تر ویرایش کنید.
ادامه مسیر
- قسمت قبل: Frame، Section و Group — قسمت ۴
- قسمت بعد: Opacity و Blend Mode — قسمت ۶
- همه آموزش‌های Figma
