آموزش جامع فیگما - تفاوت فریم، سکشن و گروه در Figma

تفاوت Frame، Section و Group در Figma — قسمت ۴

در این آموزش قصد دارم به بررسی دو ابزار مشابه دیگر فریم در Figma بپردازم که نام آن‌ها سکشن (Section) و گروه (Group) است. این ابزارها در کنار فریم به طراحان کمک می‌کنند تا ساختار و سازماندهی دقیقی برای پروژه‌های خود ایجاد کنند. تفاوت‌ها و کاربردهای این ابزارها را در ادامه توضیح خواهیم داد تا بتوانید به بهترین شکل از آن‌ها در پروژه‌های فیگما خود استفاده کنید.

سکشن در Figma چیست و چه کاربردی دارد؟
آیا می‌توان فریم‌هایی را در یک فریم دیگر در فیگما قرار داد؟
تبدیل فریم به سکشن و گروه در Figma
تفاوت بین فریم، سکشن و گروه در فیگما
گروه در فیگما چیست و چه تفاوتی با فریم دارد؟
چطور می‌توان فریم، سکشن و گروه را در Figma باز و به لایه‌های اولیه تبدیل کرد؟
نحوه ساخت فریم از اشیا و عناصر انتخابی در فیگما

ویدیوی کامل Frame، Section و Group

اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.

پخش ویدیو در آپارات

تماشای کیفیت اصلی در یوتیوب

تفاوت Frame، Section و Group در Figma چیست؟

یکی از سؤال‌های مهم در شروع کار با فیگما این است که برای جمع کردن چند شیء یا چند صفحه کنار هم از Frame، Group یا Section استفاده کنیم؟ در این درس، با همان مثالی که داخل ویدیو طراحی کرده‌ام، هر سه را امتحان می‌کنیم. این سه ابزار از دور شبیه هم‌اند، اما کاربردشان یکسان نیست؛ انتخاب اشتباه مخصوصا زمانی که فایل بزرگ شود یا سراغ Auto Layout بروید، دردسر درست می‌کند.

Frame؛ ظرف طراحی با تنظیمات مستقل

Frame برای ساخت صفحه یا یک بخش ساختاری از رابط به کار می‌رود. می‌توانید چند Frame را داخل Frame دیگری قرار دهید؛ به این ساختار Nested Frame می‌گوییم. مثلا یک صفحه Dashboard می‌تواند Frame اصلی باشد و داخل آن چند Frame برای Header، Sidebar و محتوا داشته باشید. اندازه Frame را مستقلا تنظیم می‌کنید و ویژگی‌هایی مانند Auto Layout، Clip Content، Constraints و Layout Guides روی آن قابل استفاده‌اند.

برای ساخت Frame کلید F را بزنید و محدوده موردنظر را روی Canvas بکشید. اگر چند لایه موجود را انتخاب کرده‌اید و می‌خواهید آن‌ها را داخل یک Frame قرار دهید، در ویندوز از Ctrl + Alt + G یا گزینه Frame selection استفاده کنید. تفاوت این کار با کشیدن یک Frame جدید را می‌توانید در پنل Layers ببینید: لایه‌های منتخب، فرزندان Frame می‌شوند.

Section؛ دسته‌بندی و ارائه منظم چند صفحه

فرض کنید سه صفحه برای Dashboard طراحی کرده‌اید و چند صفحه دیگر مربوط به ثبت‌نام کاربران است. می‌خواهید کسی که فایل را باز می‌کند، خیلی سریع بفهمد هر مجموعه به کدام بخش محصول تعلق دارد. اینجا Section کمک می‌کند. با Shift + S ابزار Section را انتخاب کنید، دور صفحه‌های مرتبط کادر بکشید و نام آن را مثلا «Dashboard» بگذارید.

در خود ویدیو ابتدا چند Frame را داخل یک Frame بزرگ‌تر قرار می‌دهم و بعد همان مجموعه را به Section تبدیل می‌کنم تا تفاوت ظاهر و دسته‌بندی مشخص شود. Section برای نام‌گذاری، سازماندهی و نشان دادن جریان‌های طراحی است و حتی در برخی سناریوهای Prototype و تحویل طراحی هم کاربرد دارد. اما یک Section را نباید جایگزین Frame واقعی صفحه یا کانتینر دارای Auto Layout بدانید. راهنمای رسمی Section در Figma جزئیات نسخه فعلی را توضیح می‌دهد.

Group؛ چند لایه را موقتا مثل یک مجموعه جابه‌جا کنید

Group از اسمش مشخص است: چند آبجکت را گروه می‌کند تا جابه‌جایی و مدیریتشان ساده‌تر شود. مثلا یک مربع، دایره و متن را با هم انتخاب کنید و Ctrl + G بزنید. حالا انتخاب و جابه‌جایی کل مجموعه آسان‌تر می‌شود؛ ولی Group مثل Frame یک کانتینر با اندازه و قابلیت‌های Layout مستقل نیست و مرز آن با محتوای گروه تغییر می‌کند.

فرق Group با Frame در مثال واقعی

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

تبدیل بین حالت‌ها و خارج کردن لایه‌ها از گروه

با انتخاب مجموعه و باز کردن منوی نوع لایه در پنل Properties می‌توانید بعضی حالت‌های قابل تبدیل را ببینید. در ویدیو تبدیل Frame به Section یا Group را با همان نمونه صفحات نشان می‌دهم. برای ساخت Group در ویندوز Ctrl + G و برای خارج کردن لایه‌ها از حالت گروه/فریم، بسته به نوع انتخاب، Ctrl + Shift + G یا دستور Ungroup به کار می‌رود. قبل از این تبدیل‌ها، پنل Layers را بررسی کنید تا لایه‌ها ناخواسته از ساختار موردنظر خارج نشوند.

نکته: Section در نسخه‌های فعلی فیگما محدودیت‌های سلسله‌مراتبی خاصی دارد؛ مثلا به‌صورت پیش‌فرض عنصر سطح بالای Canvas است و نمی‌توانید آن را مثل یک Frame معمولی داخل Group قرار بدهید. برای جزئیات تفاوت ساختاری Frame و Group هم مستندات رسمی فیگما را ببینید.

تمرین عملی Frame، Section و Group

سه Frame با نام‌های Dashboard، Orders و Profile بسازید. اول آن‌ها را Group کنید و تغییر موقعیت یکی از فریم‌ها را ببینید؛ بعد گروه را باز کنید و دور هر سه یک Section با نام «User Dashboard» ایجاد کنید. در مرحله بعد، دو Rectangle و یک Text بسازید و آن‌ها را در یک Frame جداگانه قرار دهید. با مقایسه رفتار Group و Frame دقیقا متوجه می‌شوید چرا در پروژه واقعی نمی‌توان یکی را همیشه جای دیگری به کار برد. در قسمت پنجم نحوه تراز و تنظیم دقیق همین آبجکت‌ها را یاد می‌گیریم.

تفاوت دقیق Frame، Section و Group

Group: مجموعه‌ای از Layerهاست و Bounds آن با محتوای داخلش تغییر می‌کند.
Frame: یک Container با ابعاد و Propertyهای مستقل است و Auto Layout، Constraints، Layout Guides و Prototype را پشتیبانی می‌کند.
Section: ناحیه‌ای برچسب‌دار برای سازماندهی Canvas، Review و Handoff است.

در نسخه فعلی Figma، Section می‌تواند برای علامت‌گذاری محتوای Ready for development استفاده شود و به‌صورت پیش‌فرض یک عنصر top-level روی Canvas است.