آموزش فیگما رایگان از صفر تا صد؛ راهنمای قدم‌به‌قدم برای مبتدی‌ها

آموزش فیگما رایگان کاملاً شدنی است: پلن رایگان فیگما (Starter) برای یادگیری همه‌ی ابزارهای اصلی کافی است و منابع رسمی خود فیگما هم هزینه‌ای ندارند. چیزی که بیشتر مبتدی‌ها کم دارند منبع نیست، بلکه ترتیب درست یادگیری و تمرین هدفمند است؛ این راهنما همین ترتیب را از نصب تا تحویل یک صفحه‌ی کامل به شما می‌دهد.

اگر هیچ پیش‌زمینه‌ای در طراحی ندارید نگران نباشید. فیگما ابزاری است که با تمرین روزانه‌ی کوتاه، در چند هفته دستتان می‌آید؛ به شرط این‌که به‌جای تماشای پشت‌سرهم ویدیو، هر مفهوم را همان روز روی یک تمرین کوچک پیاده کنید.

آیا فیگما واقعاً رایگان است؟

فیگما چند پلن دارد و ساده‌ترین آن، Starter، رایگان است. در این پلن پیش‌نویس‌های شخصی (Drafts) نامحدودند و به ابزارهای طراحی، کامپوننت، اتولی‌اوت و پروتوتایپ دسترسی دارید. محدودیت اصلی در فضای تیمی است: تعداد فایل‌ها و صفحه‌های مشترک تیم محدود است و بعضی قابلیت‌های حرفه‌ای مثل Dev Mode و کتابخانه‌های تیمی منتشرشده فقط در پلن‌های پولی کامل در دسترس‌اند.

برای یادگیری، این محدودیت‌ها تقریباً مانعی نیستند؛ همه‌ی تمرین‌های این راهنما را می‌توانید در Drafts انجام دهید. فیگما برای دانشجویان و مدرسان تأییدشده هم پلن آموزشی رایگان دارد، اما فرایند تأیید آن از طریق ایمیل دانشگاهی و سرویس‌های خارجی انجام می‌شود و برای کاربران ایران معمولاً عملی نیست. پس روی Starter حساب کنید و جزئیات به‌روز پلن‌ها را از صفحه‌ی قیمت‌گذاری خود فیگما ببینید.

قبل از شروع آموزش فیگما: نصب و آشنایی با محیط

نسخه‌ی مرورگر یا اپ دسکتاپ؟

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

چهار بخش اصلی رابط فیگما

• بوم (Canvas): فضای بی‌انتهای وسط صفحه که طرح‌ها را رویش می‌چینید.
• نوار ابزار پایین صفحه: ابزار انتخاب، فریم، شکل‌ها، قلم، متن و کامنت.
• پنل چپ: فهرست لایه‌ها و صفحه‌ها و زبانه‌ی Assets برای کامپوننت‌ها و کتابخانه‌ها.
• پنل راست: تنظیمات طراحی (اندازه، چیدمان، رنگ، متن، افکت) و زبانه‌ی Prototype برای تعامل‌ها.

روز اول فقط همین چهار بخش را بشناسید و چند میانبر پایه را حفظ کنید: F برای فریم، R برای مستطیل، T برای متن، P برای قلم، Shift + 1 برای دیدن همه‌ی محتوا و Ctrl + D (در مک Cmd + D) برای تکثیر. با همین چند کلید سرعتتان چند برابر می‌شود.

مسیر هشت‌مرحله‌ای یادگیری فیگما از صفر

ترتیب زیر طوری چیده شده که هر مرحله روی مرحله‌ی قبل بنا شود. برای هر مرحله یک تا سه روز تمرین کافی است؛ عجله نکنید، ولی هیچ مرحله‌ای را هم بدون تمرین رد نکنید.

۱. فریم، شکل و لایه

تفاوت فریم (Frame) و گروه (Group) اولین مفهومی است که باید درست بفهمید: فریم ظرفی است که اندازه، پس‌زمینه و چیدمان خودش را دارد و پایه‌ی هر صفحه و کامپوننت است، اما گروه فقط چند لایه را کنار هم نگه می‌دارد. تمرین: یک فریم موبایل بسازید و با مستطیل و دایره، اسکلت یک صفحه‌ی پروفایل را بچینید و لایه‌ها را نام‌گذاری کنید.

۲. متن و تایپوگرافی

یک فونت فارسی مثل وزیرمتن (Vazirmatn) را که در فهرست فونت‌های فیگما هست انتخاب کنید و یک سلسله‌مراتب ساده بسازید: تیتر، زیرتیتر، متن اصلی و توضیح کوچک. جهت متن را راست‌به‌چپ و چینش را راست بگذارید و فاصله‌ی خطوط را برای متن فارسی کمی بیشتر از پیش‌فرض تنظیم کنید.

۳. رنگ، استایل و متغیر

به‌جای وارد کردن کد رنگ در هر لایه، رنگ‌های اصلی را یک بار به‌صورت استایل یا متغیر (Variable) تعریف کنید. این عادت از همان ابتدا شما را برای کار تیمی و دیزاین سیستم آماده می‌کند؛ وقتی رنگ برند عوض شود، با یک تغییر همه‌ی صفحه‌ها به‌روز می‌شوند.

۴. اتولی‌اوت

اتولی‌اوت (Auto Layout) مهم‌ترین مهارت فنی فیگماست. با Shift + A یک دکمه بسازید که با بلند شدن متنش خودبه‌خود پهن شود، بعد یک کارت و یک فهرست. تا وقتی دکمه، کارت و فهرست را بدون جابه‌جا کردن دستی لایه‌ها نساخته‌اید، سراغ مرحله‌ی بعد نروید.

۵. کامپوننت و اینستنس

دکمه‌ای را که ساختید به کامپوننت تبدیل کنید (Ctrl + Alt + K) و چند نمونه (Instance) از آن در صفحه بگذارید. حالا رنگ کامپوننت اصلی را عوض کنید و ببینید همه‌ی نمونه‌ها تغییر می‌کنند. برای جزئیات بیشتر، ساخت و استفاده از کامپوننت در فیگما را بخوانید.

۶. پروتوتایپ

دو یا سه صفحه را با کلیک به هم وصل کنید، یک انیمیشن ساده‌ی Smart Animate امتحان کنید و پروتوتایپ را روی گوشی ببینید. راهنمای پروتوتایپ در فیگما گزینه‌های این بخش را با جزئیات توضیح داده است.

۷. خروجی و تحویل

یاد بگیرید آیکون را SVG، عکس را PNG یا WebP و صفحه را PDF خروجی بگیرید و فایل را طوری مرتب کنید که برنامه‌نویس بتواند فاصله‌ها و رنگ‌ها را بخواند. روش‌های خروجی گرفتن از فیگما را هم مرور کنید.

۸. همکاری

فایل را با یک دوست به اشتراک بگذارید، از او بخواهید روی طرح کامنت بگذارد و شما پاسخ دهید. کار واقعی در فیگما همیشه تیمی است و آشنایی با کامنت، تاریخچه‌ی نسخه‌ها (Version history) و سطح دسترسی‌ها بخشی از مهارت شماست.

یک پروژه‌ی تمرینی واقعی: صفحه‌ی ورود با کد یک‌بارمصرف

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

• صفحه‌ی اول: لوگو، تیتر کوتاه، فیلد شماره‌ی موبایل با پیش‌شماره و دکمه‌ی «دریافت کد».
• صفحه‌ی دوم: پیام «کد به شماره‌ی … ارسال شد»، پنج یا شش خانه‌ی کد، شمارنده‌ی ارسال دوباره و لینک ویرایش شماره.
• حالت‌های خطا: شماره‌ی نامعتبر و کد اشتباه، با متن خطای روشن زیر فیلد.
• کامپوننت‌ها: دکمه با حالت فعال و غیرفعال، فیلد متنی با حالت عادی، فوکوس و خطا.
• پروتوتایپ: از صفحه‌ی اول به دوم و از دوم به صفحه‌ی خوش‌آمدگویی.

وقتی تمام شد، از خودتان بپرسید: اگر متن دکمه دو برابر شود، طرح به هم می‌ریزد؟ اگر شماره‌ی موبایل با رقم انگلیسی وارد شود چه نمایش می‌دهید؟ همین سؤال‌ها فاصله‌ی تمرین مبتدی و کار حرفه‌ای را نشان می‌دهند.

منابع رایگان و معتبر برای ادامه‌ی مسیر

• مرکز راهنمای فیگما (Help Center): دقیق‌ترین توضیح هر قابلیت، همیشه به‌روزتر از ویدیوهای قدیمی.
• کانال رسمی فیگما در یوتیوب: آموزش‌های کوتاه از قابلیت‌های پایه تا ترفندهای پیشرفته.
• فایل‌های Figma Community: فایل‌های طراحان دیگر را کپی کنید و لایه‌هایشان را باز کنید تا ببینید چطور ساخته شده‌اند.
• کیت‌های رسمی Apple و Material: برای یاد گرفتن الگوهای استاندارد رابط موبایل.
• مقاله‌های فارسی، مثل راهنمای کار با فیگما، برای مرور مفاهیم به زبان خودتان.

ویدیوهای فارسی رایگان زیادی هم منتشر شده، ولی پیش از دنبال کردن هر دوره تاریخ ضبطش را ببینید. رابط فیگما در چند سال اخیر بارها تغییر کرده و آموزشی که با رابط قدیمی ضبط شده ممکن است شما را دنبال منوهایی بفرستد که دیگر وجود ندارند.

اشتباه‌های رایج در یادگیری رایگان فیگما

• تماشای ده‌ها ساعت ویدیو بدون ساختن حتی یک صفحه؛ یادگیری فیگما مثل رانندگی است و فقط با دست گرفتن فرمان اتفاق می‌افتد.
• استفاده از Group به‌جای Frame و جابه‌جا کردن دستی همه‌چیز؛ نتیجه طرحی است که با کوچک‌ترین تغییر از هم می‌پاشد.
• کپی کردن دقیق یک شات زیبا از Dribbble بدون فهم این‌که چرا این‌طور طراحی شده است.
• نام‌گذاری نکردن لایه‌ها؛ فایلی پر از لایه‌های «Frame» شماره‌دار و بی‌نام برای هیچ هم‌تیمی قابل استفاده نیست.
• نصب پلاگین‌های زیاد پیش از یاد گرفتن ابزارهای خود فیگما.

کی آموزش رایگان کافی نیست؟

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

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

سوالات متداول

یادگیری فیگما از صفر چقدر طول می‌کشد؟

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

برای یادگیری فیگما به لپ‌تاپ قوی نیاز دارم؟

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

آیا فیگما فارسی را پشتیبانی می‌کند؟

بله، فیگما از متن راست‌به‌چپ پشتیبانی می‌کند و فونت‌های فارسی مثل وزیرمتن در آن در دسترس‌اند. رابط خود برنامه انگلیسی است، پس آشنایی پایه با اصطلاحات انگلیسی کمک می‌کند.

اول فیگما یاد بگیرم یا اصول طراحی رابط کاربری؟

بهتر است هم‌زمان پیش بروند. ابزار را با تمرین‌های کوچک یاد بگیرید و هم‌زمان اصول پایه‌ای مثل سلسله‌مراتب بصری، فاصله‌گذاری و کنتراست را روی همان تمرین‌ها پیاده کنید.

از تمرین رایگان تا اولین پروژه‌ی جدی

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