آموزش فیگما از صفر؛ هر چیزی که برای شروع طراحی لازم دارید

فیگما چیست و چرا همه از آن حرف می‌زنند

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

• برای چه کسانی: طراحان رابط کاربری، سازندگان محتوا، بازاریاب‌ها و هر کسی که خروجی بصریِ مرتب می‌خواهد.
• هزینه: نسخهٔ رایگان برای یادگیری و پروژه‌های کوچک کافی است؛ پرداختی فقط وقتی لازم می‌شود که تیمِ بزرگ و تاریخچهٔ پروژه بخواهید.
• اگر تازه‌واردِ دنیای طراحی هستید، اول اصول طراحی برای غیرطراحان را بخوانید؛ ابزار بدون چشمِ تربیت‌شده، فقط قلم رو ترس است.

راه‌اندازی و اولین فایل

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

• رابط کاربری چیست را یک بار بخوانید تا بدانید دقیقاً چه چیزی می‌سازید؛ تفاوتِ کسی که «ابزار بلد است» با کسی که «طراحی بلد است» از همین‌جا شروع می‌شود.

• تمرین اولِ شب: یک فریم به اندازهٔ یک گوشی بسازید، سه مستطیل و یک متن بگذارید و حرکت بدهید؛ همین. روز اول، همین کافی است.

مفاهیم پایه: فریم، لایه و کامپوننت

• فریم (Frame): قابِ خروجی شماست؛ اندازه‌های استاندارد را از ابعاد و فرمت‌های استاندارد شبکه‌های اجتماعی بردارید و هر بار از صفر حدس نزنید.

• لایه: هر شکل و متن، یک لایه است؛ نام‌گذاریِ مرتب از همین هفتهٔ اول، عادتی است که بعداً فایل‌های شما را قابل‌تحمل می‌کند.

• کامپوننت: عنصری که یک بار می‌سازید و همه‌جا استفاده می‌کنید؛ دکمه، کارت و سرصفحه. تغییرِ کامپوننت، همهٔ نمونه‌ها را هم‌زمان عوض می‌کند.

• قاعدهٔ ساده: هر چیزی که سه بار تکرار شد، کامپوننت شود؛ زودتر از آن، پیچیدگی می‌سازد و دیرتر از آن، آشوب.

کار با متن و رنگ

• متن: حداکثر دو سه فونت در هر فایل؛ برای شروع، یک فونت فارسیِ خوانا برای متن و یک فونت تیترِ متمایز کافی است.

• رنگ: یک پالتِ کوچک تعریف کنید (دو سه رنگ اصلی و خنثی‌ها) و به‌جای رنگِ خام، از استایل‌ها استفاده کنید.

• فاصله‌ها: از مقیاس ثابت استفاده کنید؛ فاصله‌های تصادفی، شایع‌ترین نشانهٔ دستِ تازه‌کار است.

• قاعدهٔ چشم: اگر چیزی زور می‌زند که دیده شود، چیزی در چیدمان اشتباه است؛ درست‌کردنش با اندازه و فاصله است، نه با افکت.

همکاری و اشتراک‌گذاری

• لینک مشاهده را برای نظرخواهی بفرستید؛ همه لازم نیست فایل را ببینند و همه لازم نیست حقِ ویرایش داشته باشند.

• کامنت‌گذاری روی بوم، برای بازخورد از همکار و مشتری ساخته شده است؛ بازخوردِ روی نقطهٔ موردنظر، دقیق‌تر از بازخوردِ در جلسهٔ شفاهی است.

• برای نسخه‌های مهم، از تاریخچهٔ فایل استفاده کنید؛ برگشتن به نسخهٔ دیروز، باید دو کلیک بیشتر نشود.

بعد از مبانی، چه مسیری؟

• قدم بعدی در ابزار: وایرفریم‌ها، استایل‌های مشترک و حالت‌های کامپوننت؛ مسیر آن در از وایرفریم تا طرح نهایی توضیح داده شده است.

• قدم بعدی در حرفه: تمرینِ بازسازی صفحات واقعی و ساختن اولین نمونه‌کار؛ هفته‌ای دو تمرین، از هر آموزشِ دیده‌شده بهتر است.

• فیگما را با آثار دیگران بشناسید: فایل‌های عمومیِ نمونه را باز کنید و ببینید چطور لایه‌بندی و استایل واقعی انجام می‌شود.

آموزشِ فیگما، مثل دوچرخه است: با خواندن یاد گرفته نمی‌شود. این مقاله نقشه را داد؛ بومِ خالیِ شما، بقیهٔ معلمی است که لازم دارید.

مطالب مرتبط

این مقالات مرتبط، تصویر کامل‌تری به شما می‌دهند:

• سیستم طراحی (Design System) چیست و چه زمانی لازم می‌شود؟
• منابع رایگان طراحی؛ چک‌لیست انتخاب درست و دورماندن از تله‌ها
• طراحی در دسترس؛ کنتراست و خوانایی برای همهٔ مخاطبان
• ترکیب‌بندی تصویر برای شبکه‌های اجتماعی؛ قاب‌هایی که می‌ایستند
• اصول طراحی حالت تاریک (Dark Mode)؛ از رنگ تا خوانایی
• نقد طراحی خودتان؛ چک‌لیست بازبینی پیش از تحویل به مشتری
• انتخاب و یکدست‌سازی آیکون‌ها؛ راهنمای عملی برای طراحان
• سیستم فاصله‌گذاری در طراحی؛ شبکهٔ ۴ و ۸ واحدی به زبان ساده