در این بخش از آموزش، به بررسی نکات کلیدی و مهمی می‌پردازیم که برای تسلط بر فیگما ضروری هستند. این مفاهیم پایه‌ای شامل مدیریت لایه‌ها، تکنیک‌های مختلف زوم، و روش‌های اندازه‌گیری فاصله بین المان‌ها می‌شود که پیش‌نیاز درس‌های پیشرفته‌تر هستند.
اهمیت یادگیری این نکات در Figma از آن جهت است که می‌تواند سرعت و دقت کار شما را به طور چشمگیری افزایش دهد و پایه‌ای محکم برای یادگیری مفاهیم پیچیده‌تر فراهم کند.
- معرفی و کاربرد Pages در Figma
- مدیریت و سازمندهی صفحات در فیگما
- پیدا کردن سریع یک لایه یا فریم از طریق پنل لایه ها در Figma
- سیستم لایه ها در فیگما چطور کار می کند؟
- جا به جایی سریع لایه ها در Figma با کلید های میانبر
- راه های سریع برای انتخاب یک لایه در بین لایه های تو در توی دیگر در فیگما
- چطور سریع نام لایه ها را در Figma تغییر دهیم؟
- چطور لایه های دیگر را به ترتیب و سریع در فیگما انتخاب کنیم؟
- جا به جایی سریع و بدون دردسر چندین فریم یا لایه با هم در Figma
- انواع مختلف بزرگنمایی یا زوم در فیگما
- چطور فاصله بین اشیا مختلف در Figma را ببینیم؟
- چطور پنل های مختلف فیگما را مخفی یا نمایان کنیم؟
- چطور از خط کش و خطوط راهنما در Figma استفاده کنیم؟
- چرا باید بین کار با ابزار فیگما و تخصص UI/UX دیزاین تفاوت قائل باشید؟
ویدیوی کامل نکات ضروری Figma
اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.
آموزش پنل Layers، زوم و خطوط راهنما در Figma
در این قسمت از آموزش جامع فیگما، سراغ نکات به‌ظاهر ساده‌ای می‌رویم که در پروژه‌های واقعی دائم با آن‌ها سروکار دارید. وقتی چند صفحه و ده‌ها لایه داخل یک فایل داشته باشید، اگر انتخاب لایه‌های تو‌در‌تو، جابه‌جایی ترتیب لایه‌ها، Zoom و اندازه‌گیری فاصله را بلد نباشید، بخش زیادی از وقتتان تلف می‌شود. من در ویدیو این موارد را روی یک پروژه نمونه و چند آبجکت ساده نشان داده‌ام؛ اینجا مسیر انجام هر کدام را مرور می‌کنیم.
تفاوت Pages و Layers و روش سازماندهی فایل
در پنل سمت چپ فایل Design معمولا دو بخش مهم می‌بینید: Pages برای جداکردن بخش‌های پروژه و Layers برای نمایش عناصر داخل صفحه فعال. مثلا می‌توانید یک Page برای صفحات اپلیکیشن کاربر و Page دیگری برای داشبورد مدیر بسازید، یا صفحات موبایل و دسکتاپ را جدا نگه دارید. با دکمه افزودن Page، صفحه جدید بسازید، با دوبار کلیک نامش را عوض کنید و برای تغییر ترتیب آن را Drag کنید.
در ویدیو، نمونه پروژه XFriend را مثال می‌زنم؛ فایل اصلی، داشبورد کاربر و بخش مدیریت را در صفحات مجزا می‌گذارم. از منوی راست‌کلیک روی Page می‌توانید کارهایی مانند Duplicate، حذف یا کپی لینک مستقیم همان Page را انجام بدهید. جداکننده‌های صفحات و نام‌گذاری مناسب هم مخصوصا در فایل‌های طولانی پیدا کردن مسیر را ساده‌تر می‌کنند. این جزئیات ممکن است در نسخه‌های جدید فیگما کمی جابه‌جا شده باشند.
پنل Layers چطور کار می‌کند؟
برای هر Rectangle، متن، تصویر یا Frame که می‌سازید، یک لایه در پنل Layers اضافه می‌شود. حالا اگر یک Rectangle را داخل Frame ایجاد کنید، لایه آن زیرمجموعه همان Frame قرار می‌گیرد. در ویدیو یک Frame می‌کشم، دایره و مستطیل و متن و تصویر را وارد می‌کنم و نشان می‌دهم چطور با Drag کردن نام لایه در پنل، آن را داخل یا خارج Frame قرار بدهید.
ترتیب لایه‌ها یا Stacking Order
لایه‌ها مثل چند کاغذ روی هم‌اند: آنچه بالاتر قرار گرفته می‌تواند بخش‌های لایه زیرین را بپوشاند. فرض کنید یک تصویر روی عنوان صفحه را گرفته است؛ لازم نیست تصویر را حذف کنید. می‌توانید از پنل Layers عنوان را بالاتر ببرید، یا از دستورات Bring forward / Send backward برای تغییر ترتیب استفاده کنید. در ویندوز معمولا Ctrl + ] و Ctrl + [ برای جابه‌جایی مرحله‌ای و همراه Shift برای انتقال به ابتدا یا انتهای پشته به کار می‌روند؛ نام دستور در منو را هم بررسی کنید.
پیدا کردن یک لایه داخل گروه‌های تو‌در‌تو
وقتی داخل Frame، Group یا Auto Layout چندین سطح تو‌در‌تو داشته باشید، با کلیک معمولی ممکن است فقط کانتینر اصلی انتخاب شود. برای انتخاب دقیق‌تر، روی عنصر دوبار کلیک کنید یا در ویندوز کلید Ctrl را نگه دارید و روی همان عنصر کلیک کنید (Deep select). راه دیگر این است که نام لایه را در پنل Layers انتخاب کنید. با دوبار کلیک روی آیکون لایه در پنل نیز می‌توانید سریع به محل آن در Canvas بروید.
برای حرکت بین سطح‌های لایه از کلیدهای Enter و Shift + Enter و برای جابه‌جایی بین لایه‌های هم‌سطح از Tab و Shift + Tab استفاده می‌شود. برای جمع‌کردن شاخه‌های باز هم می‌توانید از Collapse all layers یا میانبر مرتبط در منوی فیگما استفاده کنید. چون میانبرهای بعضی قابلیت‌ها بین ویندوز و مک یا نسخه‌های مختلف متفاوت‌اند، همیشه مرجع نهایی را در بخش Keyboard shortcuts برنامه ببینید.
زوم کردن و جابه‌جایی سریع در Canvas
یکی از سریع‌ترین روش‌هایی که خودم استفاده می‌کنم، نگه‌داشتن Ctrl و چرخاندن اسکرول ماوس برای Zoom است. با میانبرهای Zoom in / out هم می‌توانید مقیاس نمایش را تغییر بدهید. در بسیاری از تنظیمات فعلی Figma، کلید 1 برای Zoom to fit و 2 برای Zoom to selection کاربرد دارد؛ یعنی یک بار تمام آبجکت‌های صفحه دیده می‌شوند و بار دیگر دقیقا روی لایه انتخاب‌شده تمرکز می‌کنید.
اگر زوم کرده‌اید و می‌خواهید به بخش دیگری از صفحه بروید، لازم نیست اول Zoom out کنید. با نگه‌داشتن Space ابزار Hand موقتا فعال می‌شود و می‌توانید Canvas را با Drag جابه‌جا کنید. در ویدیو همین کار را روی صفحات مختلف پروژه نشان می‌دهم. برای تمرکز بیشتر نیز می‌توانید پنل‌های کناری را با دستورهای Hide UI یا Collapse در منو موقتا پنهان و دوباره ظاهر کنید.
اندازه‌گیری فاصله بین دو آبجکت در فیگما
فرض کنید می‌خواهید بدانید فاصله عنوان تا دکمه چند پیکسل است. اول عنوان را انتخاب کنید، سپس در ویندوز کلید Alt را نگه دارید و نشانگر را روی دکمه ببرید. فیگما فاصله بین عنصر انتخاب‌شده و عنصر دوم را نشان می‌دهد. اگر نشانگر را روی Frame ببرید، فاصله آن آبجکت تا لبه‌های فریم هم نمایش داده می‌شود. این ویژگی در بررسی فاصله‌گذاری کارت‌ها، فرم‌ها و کامپوننت‌ها خیلی کاربردی است.
فقط یادتان باشد یکسان‌کردن عدد فاصله‌ها به‌تنهایی به معنی طراحی درست نیست. اینکه فاصله بین عناصر چقدر باشد، به سلسله‌مراتب بصری، خوانایی، رابطه معنایی محتوا و نیاز کاربر بستگی دارد. یادگیری Figma ابزار اجرای این تصمیم‌هاست، نه جایگزین اصول طراحی رابط کاربری.
Rulers و Guides؛ ساخت خطوط راهنما
برای داشتن راهنمای تراز، Ruler یا خط‌کش را در Canvas فعال کنید و از خط‌کش افقی یا عمودی به داخل صفحه Drag کنید تا یک Guide بسازید. مثلا برای یک صفحه وب، می‌توانید محل شروع محتوای اصلی و حاشیه‌ها را با چند خط راهنما مشخص کنید. برای حذف Guide، آن را به سمت خط‌کش برگردانید یا از منوی مرتبط دستور حذف را بزنید.
در ویدیو نشان می‌دهم گایدی که داخل یک Frame قرار می‌گیرد می‌تواند به همان Frame وابسته باشد؛ در مقابل، اگر Guide را در فضای Canvas خارج از محدوده Frameها قرار دهید، برای هماهنگ‌کردن چند فریم کنار هم کاربرد دارد. برای طراحی ستون‌ها و ردیف‌های منظم هم بعدا از Layout Guides استفاده خواهیم کرد که با Guide دستی فرق دارند.
تمرین عملی؛ مدیریت لایه‌ها در یک فایل شلوغ
یک Frame بسازید و داخل آن یک عکس، دو مستطیل و یک متن قرار دهید. نام هر لایه را مشخص کنید، ترتیب نمایش متن و عکس را تغییر بدهید، یک لایه را داخل Group قرار دهید و با Ctrl+Click همان لایه داخلی را انتخاب کنید. سپس با کلیدهای 1 و 2 نمای کلی و نمای نزدیک را مقایسه کنید، فاصله متن تا یک مستطیل را با Alt اندازه بگیرید و دو Guide عمودی بسازید. این تمرین را انجام بدهید تا هنگام ورود به قسمت‌های بعدی، کنترل کامل‌تری روی Canvas داشته باشید. برای آشنایی با Frame هم درس قبل را ببینید.
نکته برای رابط فعلی Figma
اصول این درس—مدیریت Page و Layer، انتخاب لایه‌های Nest شده، Zoom، اندازه‌گیری و Guide—همچنان معتبرند؛ فقط محل بعضی کنترل‌ها در UI3 نسبت به زمان ضبط جابه‌جا شده است.
ادامه مسیر
- قسمت قبل: Frame — قسمت ۲
- قسمت بعد: Frame، Section و Group — قسمت ۴
- همه آموزش‌های Figma
