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

آموزش Frame در Figma؛ ساخت فریم و تنظیمات اصلی — قسمت ۲

فریم (Frame) یکی از اساسی‌ترین و مهم‌ترین ابزارهای طراحی در فیگما است که پایه و اساس هر پروژه طراحی را تشکیل می‌دهد. در واقع، فریم را می‌توان به عنوان بوم طراحی در نظر گرفت که تمامی عناصر طراحی، از وب‌سایت و اپلیکیشن گرفته تا پست‌های شبکه‌های اجتماعی و رزومه، در آن قرار می‌گیرند.

اهمیت فریم در فیگما تنها به ایجاد فضای طراحی محدود نمی‌شود؛ این ابزار پایه‌ای برای قابلیت‌های پیشرفته‌تر مانند Auto Layout نیز هست که در دروس آینده با آن‌ها آشنا خواهید شد.

فریم ها در Figma چی هستند؟
معرفی ابزار Move و کلید میانبر آن در فیگما
چطور همه کلیدهای میانبر Figma را پیدا کنیم و یاد بگیریم؟
معادل فریم در ابزارهای دیگر مشابه فیگما چیست؟
چطور ابزار فریم در Figma را انتخاب کنیم؟
نحوه ساخت یک فریم در فیگما
معرفی فریم های پر استفاده موبایل در Figma
معرفی فریم های پر استفاده تبلت و دسکتاپ در فیگما
آیا یادگیری ابزار Figma برابر است با یادگیری تخصص UI/UX Design؟
معرفی فریم های پر استفاده ساخت پاورپوینت در Figma
معرفی فریم های پر استفاده ساعت هوشمند در فیگما
معرفی فریم های پر استفاده کاغذ در Figma
معرفی فریم های پر استفاده برای شبکه های اجتماعی در فیگما
معرفی فریم های مناسب کامیونیتی Figma
سایز فریم های قدیمی Figma کجا هستند؟
تغییر نام فریم و لایه ها در فیگما
تغییر سایز و اندازه فریم ها در Figma
کلیدهای میانبر برای تغییر نام لایه ها در فیگما

ویدیوی کامل Frame در Figma

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

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

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

Frame در فیگما چیست و چه کاربردی دارد؟

در این قسمت از آموزش جامع Figma، می‌خواهیم با یکی از مهم‌ترین ابزارهای این نرم‌افزار آشنا شویم: Frame. فرض کنید قرار است یک صفحه وب‌سایت، اپلیکیشن موبایل، رزومه یا حتی یک پست اینستاگرام طراحی کنید. اول باید فضایی داشته باشید که عناصر طراحی را داخلش قرار بدهید. Frame همین نقش را دارد، اما برخلاف یک بوم ساده، ویژگی‌های پیشرفته‌ای مانند Auto Layout، Constraints و Layout Guides هم روی آن قابل استفاده‌اند.

در نرم‌افزارهایی مانند Adobe XD یا Sketch، برای محیط مشابه ممکن است اصطلاح Artboard را شنیده باشید. در Figma به این ظرف طراحی Frame می‌گوییم و به‌خاطر قابلیت‌هایش، پایه بسیاری از کارهایی است که در درس‌های بعدی انجام می‌دهیم. اگر هنوز با داشبورد و محیط برنامه آشنا نیستید، ابتدا قسمت اول آموزش فیگما را ببینید.

چطور در Figma یک Frame بسازیم؟

اول فایل Design خودتان را باز کنید. در محیط UI3 ابزارها در Toolbar قرار دارند؛ با انتخاب ابزار Frame یا زدن کلید F آن را فعال کنید. حالا دو راه برای ساخت فریم دارید: در Canvas کلیک کنید و با Drag اندازه دلخواهتان را بکشید، یا یکی از اندازه‌های آماده پنل سمت راست را انتخاب کنید. فریم ساخته‌شده بلافاصله در پنل Layers هم به‌عنوان یک لایه مستقل دیده می‌شود.

ساخت فریم با اندازه دلخواه

مثلا اگر می‌خواهید یک صفحه دسکتاپ با ابعاد ۱۹۲۰ در ۱۰۸۰ طراحی کنید، لازم نیست حتما از اندازه‌های پیش‌فرض استفاده کنید. یک فریم بسازید، انتخابش کنید و در پنل Properties مقدار Width را روی 1920 و Height را روی 1080 بگذارید. این اعداد فقط مثالی برای یادگیری ساخت فریم هستند؛ انتخاب عرض مناسب برای طراحی واقعی، به مسئله، مخاطب و سیستم Grid پروژه بستگی دارد.

استفاده از Frame Presets برای موبایل و دسکتاپ

وقتی ابزار Frame را انتخاب می‌کنید، فیگما دسته‌هایی از اندازه‌های آماده را نشان می‌دهد: دستگاه‌های موبایل، تبلت، دسکتاپ، نمایشگرهای دیگر و قالب‌های متداول. در ویدیو مثلا سراغ اندازه‌های iPhone، Android، MacBook و Desktop می‌روم و نشان می‌دهم چطور تنها با یک کلیک یک فریم آماده بسازید. فهرست نام دستگاه‌ها و اندازه‌ها با به‌روزرسانی فیگما تغییر می‌کند؛ بنابراین مدل‌هایی که در ویدیوی زمان ضبط می‌بینید لزوما فهرست کامل امروز نیستند.

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

فریم‌های آماده برای رزومه، اسلاید و شبکه‌های اجتماعی

Frame فقط برای طراحی اپلیکیشن یا وب‌سایت نیست. در منوی اندازه‌های آماده، بسته به نسخه Figma، دسته‌هایی مانند Paper برای A4 یا اندازه‌های چاپی، Social Media برای قالب‌های پست و استوری و Community برای کاور فایل‌ها یا پلاگین‌ها هم وجود دارد. مثلا اگر می‌خواهید رزومه‌ای با اندازه A4 طراحی کنید، از قالب مرتبط شروع کنید و بعد عناصر را داخل همان فریم قرار بدهید.

در ویدیو اندازه‌های آماده ارائه، پست شبکه‌های اجتماعی، کاور LinkedIn، ساعت هوشمند و بعضی اندازه‌های قدیمی را هم مرور می‌کنم. توجه کنید که بعضی ابعاد صرفا یک نقطه شروع هستند و محدودیت‌های پلتفرم مقصد ممکن است عوض شده باشند. برای ساخت ارائه نیز Figma Slides ابزار تخصصی‌تری در مجموعه فیگماست؛ لزوما لازم نیست همه اسلایدها را با Frame معمولی در فایل Design بسازید.

تغییر اندازه و نام Frame بعد از ساخت

فریم را انتخاب کنید تا تنظیماتش در پنل راست نمایش داده شود. برای تغییر اندازه، مقدار W و H را وارد کنید یا لبه‌های فریم را روی Canvas جابه‌جا کنید. برای تغییر نام هم می‌توانید روی نام فریم در Canvas یا پنل Layers دوبار کلیک کنید و یک نام معنادار مانند «Home / Desktop» بنویسید. نام فریم در پنل Layers هم به‌روز می‌شود.

فیگما برای فریم‌های بدون نام اختصاصی به‌صورت خودکار نام‌های شماره‌دار می‌سازد. این کار هنگام تمرین مشکلی ندارد، اما در پروژه واقعی، نام‌گذاری دقیق باعث می‌شود خودتان، سایر طراحان و برنامه‌نویسان راحت‌تر بخش موردنظر را پیدا کنند. آیکون مخصوص Frame در Layers هم کمک می‌کند آن را از Rectangle، Text و Group تشخیص بدهید.

کلیدهای میانبر کاربردی و تفاوت Frame با ابزارهای کناری

من معمولا ابزارها را با میانبر انتخاب می‌کنم، چون مدام بردن ماوس به Toolbar سرعت کار را کم می‌کند. V برای Move و F برای Frame از میانبرهای اصلی هستند. Shift + S ابزار Section را فعال می‌کند؛ Section برای دسته‌بندی بخش‌های Canvas است، نه جایگزین تمام ویژگی‌های Frame. در منوی Help یا Keyboard shortcuts فیگما می‌توانید فهرست کل میانبرها و نسخه متناسب با سیستم‌عاملتان را ببینید.

اگر در ادامه آموزش‌ها واژه‌هایی مثل Nested Frame، Auto Layout، Constraints یا Layout Guide را دیدید، بدانید همگی به ویژگی‌ها و ساختار فریم مربوط‌اند. برای مطالعه جزئیات و بررسی گزینه‌های نسخه فعلی، مستندات رسمی Frames در Figma مرجع دقیقی است.

تمرین این درس: چهار Frame با کاربرد متفاوت

یک فایل جدید در Drafts بسازید. با کلید F، چهار فریم ایجاد کنید: یک فریم موبایل از Presets، یک فریم دسکتاپ با اندازه دلخواه، یک فریم A4 و یک فریم برای کاور شبکه اجتماعی. بعد اسم هر کدام را در Layers عوض کنید، اندازه یکی از آن‌ها را از W و H تغییر دهید و آیکون‌های لایه‌ها را مقایسه کنید. در قسمت بعدی سراغ Layers، Zoom و میانبرهایی می‌رویم که سرعت کارتان را در همین فریم‌ها بیشتر می‌کنند.

Frame در نسخه فعلی Figma

Frame یک Container واقعی با ابعاد و Propertyهای مستقل است. Frame می‌تواند Fill، Stroke، Effect و Corner Radius داشته باشد و قابلیت‌هایی مثل Auto Layout، Constraints، Layout Guides و Prototyping را فعال می‌کند. Frameها می‌توانند داخل Frameهای دیگر Nest شوند.