در قسمت اول آموزش جامع فیگما، با محیط جدید Figma (UI3)، داشبورد مدیریت فایل‌ها و Community آشنا می‌شویم. از تغییر تم و جابه‌جایی بین حساب‌ها گرفته تا ساخت فایل در Drafts، بازیابی فایل حذف‌شده، پیدا کردن UI Kit و شناخت بخش‌های اصلی ادیتور را با مثال عملی توضیح می‌دهم.
در ادامه، ابتدا موضوعات همین ویدیو را می‌بینید و بعد، به‌جای یک فهرست ساده، هر بخش را گام‌به‌گام بررسی می‌کنیم. نکته‌هایی که به نسخه زمان ضبط مربوط بوده‌اند، از وضعیت فعلی ابزار جدا شده‌اند تا با رابط امروز فیگما اشتباه گرفته نشوند.
- آیا با یادگیری فیگما شما متخصص UI/UX هستید؟
- آشنایی با رابط فعلی Figma (UI3)
- نکات و مثال های کاربردی زیاد در آموزش های قبلی فیگما
- دوره های آموزش جامع طراحی محصول و UI/UX Design
- معرفی بخش های مختلف داشبورد جدید فیگما
- چطور تم فیگما را به روشن یا تاریک تغییر بدهیم؟
- چطور از چندین اکانت مختلف در فیگما استفاده کنیم؟
- چطور از اکانت های فیگما خارج شویم؟
- کاربرد بخش نوتیفیکیشن در فیگما
- نحوه مدیریت و جستجوی فایل ها در فیگما
- نحوه ایجاد بی نهایت فایل در پلن رایگان فیگما
- نحوه قرار دادن یک فایل در بخش مورد علاقه های فیگما
- به اشتراک گذاری یک پروژه یا فایل دیزاین در فیگما
- نحوه پاک کردن یک پروژه یا فایل دیزاین در فیگما
- نحوه بازگردانی پروژه یا فایل های پاک شده در فیگما
- نحوه پاک کردن دائمی یک پروژه یا فایل دیزاین در فیگما
- نحوه جا به جایی یک پروژه یا فایل دیزاین در تیم های مختلف فیگما
- نحوه ساخت فایل جدید دیزاین یا فیگجم یا اسلاید دک فیگما
- اسلاید دک فیگما برای ساخت پاورپوینت چیست؟
- نحوه وارد کردن فایل دیزاین fig در فیگما
- نحوه فیلترینگ و مرتب سازی فایل ها در فیگما
- معرفی و کار با کامیونیتی فیگما
- نحوه جستجوی تمپلیت، پلاگین و ویجت ها در کامیونیتی فیگما
- نحوه دسترسی به فایل تمرین آموزش های من در کامیونیتی فیگما
- نحوه ایجاد یک فایل دیزاین فیگما در Drafts بی نهایت
- معرفی بخش های مختلف محیط جدید فیگما UI3
ویدیوی کامل محیط و داشبورد Figma
اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.
آموزش محیط Figma؛ از داشبورد تا اولین فایل طراحی
در این آموزش فقط قرار نیست اسم منوهای فیگما را حفظ کنیم. می‌خواهیم دقیقا بدانیم از لحظه ورود به حساب، چطور فایل‌هایمان را مدیریت کنیم، ابزارهای لازم را پیدا کنیم و برای اولین پروژه آماده شویم. من همه این بخش‌ها را در ویدیو با مثال نشان داده‌ام؛ در ادامه هم مسیر انجام کار را مرحله‌به‌مرحله می‌خوانید.
اول یک نکته مهم: یادگیری فیگما با یادگیری UI/UX فرق دارد
من در ابتدای ویدیو روی این موضوع تاکید می‌کنم: کسی که کار با Figma را بلد است، لزوما طراح رابط کاربری (UI)، طراح تجربه کاربری (UX) یا طراح محصول نیست. فیگما ابزار اجرای طراحی است؛ اما اینکه چرا یک دکمه را در جای مشخصی می‌گذاریم، فاصله‌ها را چطور انتخاب می‌کنیم و چطور یک مسئله واقعی کاربر را حل می‌کنیم، به اصول طراحی برمی‌گردد. پس در کنار یادگیری ابزار، باید منطق تصمیم‌های طراحی را هم یاد بگیریم.
اگر تازه شروع کرده‌اید، اول قسمت صفر آموزش فیگما را ببینید. آنجا درباره شروع کار، ساخت حساب و مشکلات رایج اولیه توضیح داده‌ام. آموزش‌های نسخه قدیمی‌تر من هم هنوز مثال‌های ارزشمندی دارند؛ فقط ممکن است محل بعضی دکمه‌ها با UI3 فرق کرده باشد.
داشبورد یا File Browser در فیگما چه کاربردی دارد؟
وقتی فیگما را باز می‌کنید، پیش از رسیدن به فضای طراحی وارد بخش مدیریت فایل‌ها می‌شوید. اینجا می‌توانید فایل‌های اخیر (Recents) را ببینید، بین فایل‌ها جستجو کنید، به Drafts و پروژه‌های تیمی بروید و به Community دسترسی داشته باشید. بهتر است همین ابتدای کار بدانید هر فایل را کجا ایجاد می‌کنید؛ چون محل ذخیره‌سازی آن روی نحوه همکاری و محدودیت‌های حساب اثر می‌گذارد.
تغییر تم، تنظیمات حساب و جابه‌جایی بین چند اکانت
از منوی حساب کاربری می‌توانید اطلاعات پروفایل، تنظیمات و تم ظاهری Figma را پیدا کنید. برای تغییر ظاهر برنامه، گزینه Theme را روی Light، Dark یا حالت هماهنگ با سیستم قرار دهید. اگر مثل من یک اکانت شخصی و یک اکانت کاری دارید، با Add account حساب دوم را اضافه کنید و از همان منو بین حساب‌ها جابه‌جا شوید؛ برای خروج از هر حساب هم گزینه خروج همان اکانت را انتخاب کنید.
اعلان‌ها و پیدا کردن سریع فایل‌ها
کنار حساب کاربری بخش اعلان‌ها را می‌بینید. مثلا وقتی همکارتان روی یک فایل نظر می‌گذارد یا در Community فعالیتی مرتبط با شما انجام می‌شود، اعلان آن می‌تواند اینجا نمایش داده شود. اگر تعداد فایل‌هایتان زیاد شده، به‌جای گشتن بین پوشه‌ها، نام فایل را در جستجوی File Browser وارد کنید. بخش Recent هم فایل‌هایی را نشان می‌دهد که اخیرا با آن‌ها کار کرده‌اید.
ساخت فایل در Drafts و محدودیت پلن رایگان Figma
یکی از نکات کاربردی این قسمت، تفاوت Drafts با فایل‌های داخل پوشه تیمی است. در پلن رایگان Starter، طبق مستندات فعلی فیگما می‌توانید تعداد نامحدودی Draft داشته باشید؛ اما تعداد فایل‌های قرارگرفته در پوشه تیم محدود است. پس اگر فقط دارید تمرین می‌کنید یا پروژه شخصی می‌سازید، موقع ساخت فایل جدید، محل ذخیره را روی Drafts بگذارید. «Draft نامحدود» به معنی رایگان بودن همه قابلیت‌های تیمی یا حرفه‌ای نیست.
برای شروع، از Create new یا دکمه ساخت فایل استفاده کنید، نوع فایل را انتخاب کنید و قبل از ایجاد، محل آن را بررسی کنید. اگر اشتباهی فایل را داخل تیم یا پوشه محدود ساختید، می‌توانید با مجوز مناسب آن را به محل دیگری منتقل کنید. محدودیت‌های به‌روز پلن Starter را هم در راهنمای رسمی بررسی کنید؛ جزئیات پلن‌ها ممکن است تغییر کنند.
مدیریت فایل‌ها: علاقه‌مندی، کپی، تغییر نام و انتقال
در ویدیو روی یکی از فایل‌ها راست‌کلیک می‌کنم تا گزینه‌های کاربردی آن را ببینید. با افزودن فایل به Favorites راحت‌تر به آن برمی‌گردید. از Duplicate برای ساخت کپی مستقل استفاده کنید، با Rename اسم واضحی برای فایل بگذارید، با Copy link آدرسش را بردارید و از Share برای دعوت دیگران استفاده کنید. برای انتقال بین تیم‌ها یا پوشه‌ها هم Move را انتخاب کنید؛ البته این گزینه به سطح دسترسی شما وابسته است.
پیشنهاد من این است که اسم فایل‌ها را فقط «Untitled» یا «Design 1» نگذارید. مثلا نام پروژه، نوع صفحه و مرحله کار را مشخص کنید تا چند ماه بعد خودتان یا اعضای تیم بتوانید آن را به‌سادگی پیدا کنند.
حذف فایل و بازیابی آن از Trash
اگر فایلی را از منوی راست‌کلیک به Trash منتقل کردید، لزوما برای همیشه از دست نرفته است. وارد Trash در File Browser شوید، فایل را پیدا کنید و با Restore آن را برگردانید. گزینه Permanently delete حذف دائمی است و باید با احتیاط از آن استفاده کنید؛ در فایل‌های مشترک، حذف ممکن است روی دسترسی دیگر اعضا هم اثر بگذارد. برای جزئیات مجوزها و شرایط بازیابی، راهنمای رسمی حذف و بازیابی فایل‌ها را ببینید.
فیلتر و مرتب‌سازی فایل‌ها
در داشبورد می‌توانید فایل‌ها را بر اساس نوعشان فیلتر کنید؛ مثلا فقط فایل‌های Design یا FigJam را ببینید. مرتب‌سازی بر اساس نام یا زمان آخرین تغییر هم زمانی مفید است که ده‌ها فایل دارید. اگر با تصویر پیش‌نمایش بهتر کار می‌کنید، نمایش Thumbnail مناسب‌تر است؛ برای مرور نام‌ها و جزئیات بیشتر، نمای فهرستی را امتحان کنید.
فرق Figma Design، FigJam و Figma Slides چیست؟
در زمان ضبط ویدیو، سه نوع اصلی فایل را نشان می‌دهم: Figma Design برای طراحی رابط کاربری و ساخت صفحات و کامپوننت‌ها؛ FigJam برای ایده‌پردازی، وایت‌بورد و همکاری تیمی؛ و Figma Slides برای ساخت اسلاید و ارائه. این‌ها کاربردهای متفاوتی دارند و لازم نیست هر کاری را در فایل Design انجام دهید. از زمان ضبط، محصولات و گزینه‌های دیگری هم به مجموعه فیگما اضافه شده‌اند؛ بنابراین ممکن است فهرست فعلی شما گسترده‌تر باشد.
وارد کردن فایل FIG و فایل‌های تمرینی
اگر از همکار یا مدرس فایلی با پسوند .fig دریافت کرده‌اید، آن را از بخش Import در محیط فیگما وارد کنید تا یک فایل قابل باز شدن در حساب خودتان داشته باشید. در ویدیو همین مسیر را برای فایل‌های تمرینی هم توضیح می‌دهم. لازم نیست برای باز کردن هر فایل محلی روی آن دوبار کلیک کنید و انتظار داشته باشید مثل یک سند معمولی ویندوز باز شود؛ روش مطمئن، استفاده از امکان Import داخل Figma است.
Figma Community؛ پیدا کردن UI Kit، پلاگین، ویجت و فایل تمرینی
حالا سراغ Community می‌رویم؛ جایی که طراحان و تیم‌ها فایل‌های آماده، UI Kit، قالب وب‌سایت، Wireframe، پلاگین و ویجت منتشر می‌کنند. مثلا اگر می‌خواهید طراحی iOS را شروع کنید، جستجوی UI Kit مرتبط می‌تواند به شما کمک کند الگوها و اجزای رایج را بررسی کنید. البته هر چیزی که در Community پیدا می‌کنید لزوما استاندارد، رایگان یا مناسب پروژه شما نیست؛ منبع، کیفیت و شرایط استفاده را هم بررسی کنید.
جستجو در Community و نمونه پلاگین Content Reel
وارد Community شوید، عبارت مورد نظر را جستجو کنید و نتایج را بر اساس Files، Plugins، Widgets یا Creators فیلتر کنید. من در ویدیو با جستجوی Microsoft نمونه‌های دیزاین سیستم و فایل‌های منتشرشده را نشان می‌دهم. پلاگین Content Reel را هم مثال می‌زنم: به‌جای وارد کردن دستی نام‌ها یا تصویرهای تکراری در ماکاپ‌ها، می‌توانید از داده‌های نمونه استفاده کنید تا صفحاتتان واقعی‌تر به نظر برسند.
فایل‌های تمرینی و نمونه‌کارهای منتشرشده من
برای پیدا کردن فایل‌های تمرینی و بعضی نمونه‌کارهایی که در آموزش‌ها معرفی کرده‌ام، نام Hossein Mahmoodi یا شناسه iHMahmoodi را در بخش Creators جستجو کنید. آنجا ممکن است فایل تمرین، موکاپ ارائه کار یا پروژه‌های نمونه را پیدا کنید. در خود ویدیو هم نشان می‌دهم چطور یکی از فایل‌های منتشرشده را باز کنید و در فیگما از آن استفاده کنید. راهنمای رسمی Figma Community هم انواع منابع و فیلترها را توضیح می‌دهد.
آشنایی با محیط طراحی Figma UI3
بعد از انتخاب Design file وارد ادیتور می‌شوید. اینجا چند بخش اصلی داریم: Canvas یا بوم وسط صفحه که طراحی را روی آن انجام می‌دهیم؛ Pages و Layers برای سازماندهی صفحات و لایه‌ها؛ Properties در سمت راست برای تنظیمات شیء انتخاب‌شده؛ و Toolbar برای ابزارهایی مانند Move، Frame، Shape، Pen و Text. جای برخی از این بخش‌ها در نسخه‌های جدید تغییر کرده، اما کاربرد اصلی‌شان ثابت است.
Pages، Layers و پنل Properties
می‌توانید یک Page برای طراحی دسکتاپ و Page دیگری برای موبایل بسازید، یا صفحات پروژه را بر اساس مرحله کار جدا کنید. هر Frame، متن یا شکلی که در بوم ایجاد می‌کنید در Layers هم قابل پیدا کردن است. با انتخاب یک مستطیل، تنظیمات همان مستطیل را در Properties می‌بینید؛ با انتخاب Frame، گزینه‌های مرتبط با فریم ظاهر می‌شود. بخش Prototype هم برای تعریف جریان‌ها و تعاملات نمونه اولیه استفاده می‌شود.
Dev Mode و تحویل طراحی به برنامه‌نویس
در انتهای ویدیو به Dev Mode اشاره می‌کنم؛ محیطی که به تیم توسعه کمک می‌کند اطلاعات طراحی را برای پیاده‌سازی بررسی کند. دسترسی به آن با نوع پلن، Seat و شرایط فعلی فیگما مرتبط است؛ بنابراین توضیحات آزمایشی یا قیمت‌گذاری زمان ضبط را به‌عنوان قانون همیشگی در نظر نگیرید. نکته مهم‌تر این است که برای تحویل حرفه‌ای فایل، فقط باز کردن Dev Mode کافی نیست؛ نام‌گذاری، ساختار لایه‌ها، کامپوننت‌ها و هماهنگی با توسعه‌دهنده هم اهمیت دارند.
تمرین عملی این قسمت: یک پروژه تمیز بسازید
برای اینکه مطالب در ذهنتان بماند، همین حالا این تمرین را انجام دهید: در Drafts یک فایل Design بسازید و نام آن را مشخص کنید؛ یک Page به نام Desktop و یکی به نام Mobile اضافه کنید؛ یک Frame و یک Rectangle داخلش بگذارید؛ سپس فایل را در Favorites ذخیره کنید، از آن یک Duplicate بگیرید، کپی را به Trash بفرستید و دوباره Restore کنید. در مرحله آخر یک UI Kit در Community جستجو کنید و تفاوت فایل Design با FigJam را بررسی کنید.
اگر همین تمرین ساده را انجام دهید، بخش بزرگی از سردرگمی روزهای اول کار با فیگما از بین می‌رود. در قسمت دوم آموزش فیگما سراغ Frame می‌رویم و اولین قدم واقعی طراحی روی Canvas را شروع می‌کنیم.
یک یادآوری از من: اگر هدفتان ورود جدی به طراحی رابط کاربری و تجربه کاربری است، یادگیری ابزار را در کنار اصول، تمرین و پروژه واقعی ادامه دهید. مسیرهای آموزش طراحی UI، UX و طراحی محصول LearnUIX برای یادگیری همین مهارت‌ها در کنار هم تدوین شده‌اند.
UI3 امروز چه وضعیتی دارد؟
در زمان ضبط این ویدیو، UI3 رابط جدید Figma بود. امروز مستندات Figma رابط UI3 را مبنای آموزش‌های فعلی قرار می‌دهند؛ بنابراین اگر جای Toolbar، پنل‌ها یا بعضی منوها با ویدیو فرق دارد، از رابط فعلی Figma پیروی کنید.
ادامه مسیر
- قسمت قبل: شروع کار — قسمت ۰
- قسمت بعد: Frame — قسمت ۲
- همه آموزش‌های Figma
