فیگما چیست؟

رابط کاربری (User Interface)، یک عضو جداناپذیر از عوامل موثر بر بازاریابی و ارتباط کاربران با کسب و کارهای امروزی به شمار می‌رود. یک رابط کاربری خوب در اغلب موارد با نیازهای کاربران سنجیده می‌شود و اگر به درستی طراحی شود، کاربر برای کار با آن نیازی به آموزش ندارد و از کار کردن با آن لذت می‌برد. به همین دلیل نرم افزارهای متعددی برای ساخت یک رابط کاربری مناسب به وجود آمده‌اند.

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

فیگما چیست؟

همانطور که گفتیم، فیگما یک برنامه‌ی طراحی رابط کاربری است که روند ساخت آن در سال ۲۰۱۲ شروع شد. نهایتاً در سال ۲۰۱۶ اولین نسخه از آن در اختیار عموم قرار گرفت. فیگما در حالت کلی با دیگر ابزارهای ویرایشی متفاوت است، زیرا یک ابزار تحت وب است: به این معنی که به صورت مستقیم در مرورگر اجرا می‌شود. این به این معنی است که شما می‌توانید در هر زمانی به پروژه‌های خود دسترسی پیدا کنید، بدون نیاز به خرید مجوز و یا نصب نرم‌افزار از هر کامپیوتری و یا پلتفرمی کار با آن را شروع کنید. همچنین، نیازی نیست نگران حجم مصرفی اینترنت خود باشید زیرا فیگما مصرف پهنای باند زیادی ندارد. با این حال، کاربران ویندوز و مک می‌توانند به راحتی فیگما را روی سیستم عامل خود نصب کرده و از برخی امکانات آن به صورت آفلاین استفاده کنند.

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

فیگما یا XD؟ کدام یک برای شروع طراحی UI/UX مناسب‌تر است؟

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

البته باید توجه داشت که ابزارهای طراحی کاربردی دیگری مانند Adobe XD و یا Sketch نیز در دسترس هستند، اما دلایل بسیار زیادی وجود دارد که از ابزارهای دیگر مانند Adobe XD و یا Sketch به فیگما مهاجرت کرد.

یکی از مزایای بزرگ استفاده از فیگما در مقایسه با سایر نرم افزارهای طراحی نظیر XD، این است که به دلیل تحت وب بودن، طراحان می‌توانند از راه دور و به طور همزمان با سایر افراد تیم بر روی یک پروژه کار کنند. به خصوص اینکه امروزه به دلایل اقتصادی، محدودیت‌های دسترسی و پروتکل‌های بهداشتی، بسیاری از شرکت‌ها روند دورکاری را در پیش گرفته‌اند. پس برای کسانی که نمی‌خواهد ابزارهای مختلف طراحی را دانلود و نصب کنند، فیگما یک انتخاب مناسب است. فیگما در تبلیغات خود نیز بر روی همین ویژگی همکاری در یک پروژه تمرکز کرده است و شعارش این است: سعی کردیم بخش زیادی از بدی‌ها و مشکلات کار کردن گروهی را با نرم افزار خود از بین ببریم.

تقریبا تمامی ویژگی‌های مثبتی که در سایر نرم افزارهای طراحی رابط کاربری وجود دارد، به صورت یک جا در فیگما در دسترس است. برخی از این امکانات عبارتند از:

• استفاده از کامپوننت (Components): ساخت و ترکیب چند شی با یکدیگر (مشابه با نرم افزار Sketch)
• ساخت نمونه‌ی اولیه یا پروتوتایپ: قابلیت کلیک کردن روی کامپوننت‌های مختلف در آن (مشابه با نرم افزار InVision)
• کامنت گذاری هنگام طراحی: اضافه کردن، نشانه‌گذاری و پاسخ دادن نظرات توسط اعضای تیم در حال کار روی پروژه
• برنامه نویسی بدون کد: قابلیت دریافت ابعاد و ویژگی‌ها در قالب فایل استایل‌، دانلود آیکون‌ها و عکس‌ها را از URL پروژه (مشابه با نرم افزار Zeplin)
• تنظیم فضا‌ها: ساخت کامپوننت‌ با قابلیت تغییر اندازه با استفاده از تنظیمات فضاها (مشابه با نرم افزار Sketch)
• مدیریت پروژه با Version Control: مشاهده‌ی تاریخچه و بازگشت به یک نسخه‌ی خاص توسط اعضای تیم
• کار همزمان توسط چند نفر: مشاهده‌ی نشانگر موس سایر اعضای تیم هنگام کار بر صفحه (هرچند به طور کلی این کار توصیه نمی‌شود.)
• پلاگین‌ها: استفاده از فونت‌ها، استایل‌های سایر کاربران در قالب پلاگین‌های کاربردی

آموزش نرم افزار Figma: نصب نرم افزار فیگما

در بخش قبل گفتیم که فیگما نیاز به نصب ندارد، با این حال شاید راحت‌تر باشید تا یک نسخه از آن را روی سیستم عامل خود نصب کنید. برای دانلود نرم افزار figma برای ویندوز و مک می‌توانید به بخش دانلود سایت رسمی فیگما مراجعه کرده و نسخه‌ی مورد نظر خود را دانلود کنید. در این بخش علاوه بر فایل نصبی، یک نرم افزار جدا برای نصب فونت‌های دلخواه با نام Font installer و همچنین اپلیکیشن قابل نصب در تلفن همراه برای دموی همزمان و اتصال گوشی به کامپیوتر با نام Figma mirror در دسترس است.

آموزش نرم افزار Figma: نصب فیگما در لینوکس

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

sudo apt -y install libgconf2-4

سپس پکیج دیگری که پیش نیاز فیگما Figma است را با دستور زیر نصب می‌کنیم. (حین نصب در یک قسمت به شما می‌گوید که دکمه Enter را بزنید و شما باید دکمه Enter را بزنید تا ادامه نصب انجام شود.)

sudo add-apt-repository ppa:chrdevs/figma

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

در نهایت پس از نصب، با استفاده از دستورات زیر می‌توانید فیگما را اجرا کنید:

figma-linux

./figma-linux-0.5.6-x86_64.AppImage

بعد از اجرای فیگما، در ادامه‌ی آموزش نرم افزار Figma، به صورت گام به گام با بخش‌های مختلف آن آشنا می‌شویم.

آموزش Figma رایگان

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

آموزش نرم افزار Figma: محیط کار فیگما

در فیگما یک نوار اصلی در بالای صفحه قرار گرفته است که اغلب تنظیمات و امکانات مورد نیاز شما از این بخش در دسترس قرار گرفته است. در ادامه هر کدام از بخش‌های این منو را بررسی می‌کنیم.

آموزش نرم افزار Figma: نوار بالای صفحه در فیگما

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

• ابعاد بوم وسط: با زدن روی این دکمه، می‌توانید ابعاد بخش میانی صفحه را که اشیا در آن قرار می‌گیرند، تعیین کنید. همچنین امکاناتی از قبیل امکان مشاهده‌ی خط کش، نشانگرهای موس فعال در پروژه و… در این قسمت وجود دارد.
• نمایش طرح: این گزینه که در فیگما با عنوان Present در دسترس است، به شما اجازه می‌دهد تا طرح خود را در یک صفحه‌ی جدید در مرورگر ببینید.
• اشتراک طرح: با انتخاب این گزینه می‌توانید طرح خود را با آدرس‌های ایمیل سایر اعضای تیم به اشتراک بگذارید. همچنین شما این امکان را دارید تا برای اعضای مختلف، سطح دسترسی را مشخص کنید. (اینکه قادر به ویرایش فایل هستند یا صرفا می‌توانند آن را مشاهده کنند.)

در وسط نوار بالای صفحه، عنوان پروژه را می‌بینید. با کلیک بر این عنوان، می‌توانید نام آن را تغییر دهید.

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

• منوی اصلی: با انتخاب آیکون سه خط، زیرمنویی پر از امکانات مختلف باز می‌شود. این امکانات شامل ساخت و ذخیره‌ی فایل پروژه، امکانات موردنیاز برای ویرایش پروژه، کار با پلاگین‌ها و سایت‌های مرتبط مانند dribble، تنظیمات ترجیحی در فیگما و استفاده از کتابخانه‌های درون برنامه‌ای است.
• ابزار انتخاب: این گزینه دارای دو زیر منوی انتخاب المان‌ها و یا تغییر ابعاد آن‌ها می‌باشد.
• ابزار ناحیه: دارای دو گزینه‌ی انتخاب یک فریم به عنوان ناحیه یا بخشی از آن است.
• انتخاب اشیا: این گزینه که Shape Tool نام دارد، به شما اجازه می‌دهد تا اشیای مختلف را درون صفحه استفاده کنید.
• رسم شکل: با ابزار Pen Tool می‌توانید اشیای دلخواه خود را با نقطه-بردار یا با استفاده از مداد رسم کنید.
• نوشتن متن: امکان نوشتن متن که در تمامی نرم افزارهای طراحی و گرافیک وجود دارد.
• جابجایی در صفحه: با گزینه‌ی Hand Tool می‌توانید در بوم وسط صفحه جابجا شوید و حرکت کنید.
• ایجاد کامنت: با انتخاب گزینه‌ی آخر که آیکون آن به شکل یک دیالوگ ابری است، امکان گذاشتن کامنت بر المان‌های صفحه فعال می‌شود. حال برای نوشتن کامنت کافی است که بر المان مورد نظر کلیک کنید تا یک کامنت بر روی آن پین شود.

آموزش نرم افزار Figma: ساخت پروژه در فیگما و گرفتن خروجی

در فیگما، از طریق نوار بالای صفحه و کلیک بر روی گزینه‌ی Main Menu.

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

آموزش نرم افزار Figma: طراحی رابط کاربری با Figma

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

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

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

آموزش نرم افزار Figma: پیش نمایش طرح در فیگما

قبلا گفتیم که گزینه‌ی Present برای مشاهده‌ی همزمان طرح در مرورگر است. اگر فایل خود را از طریق دسترسی به لینک عمومی به اشتراک بگذارید، هر کسی که لینک صفحه‌ی طراحی شده را داشته باشد می‌تواند طرح‌های شما را ببیند. هنگام پیش نمایش در فیگما، سرصفحه (Header) و پاورقی (Footer) مرورگر همچنان قابل مشاهده است. این روش مناسب تست طراحی یک برنامه نیست، پس فیگما برای دیدن پیش ‌نمایش طراحی روی موبایل، علاوه بر باز کردن Figma URL بر روی مرورگر گوشی، یک راه دیگر نیز در نظر گرفته است.

برای دیدن پیش نمایش طرح در تلفن همراه می‌توانید برنامه‌ی Figma Mirror را از بخش دانلود سایت فیگما دریافت کنید. برنامه‌ی Figma Mirror به شما این امکان را می‌دهد تا طرح‌های خود در مقیاس گوشی مشاهده کنید. در حقیقت این برنامه متناسب با عرض و طول تلفن همراه شما، محتوای طراحی را تنظیم می‌کند. این گونه می‌توانید مشکلات طراحی خود را سریع‌تر شناسایی کنید.

آموزش نرم افزار Figma: کار با لایه‌ها در فیگما

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

آموزش نرم افزار Figma: ساخت کامپوننت در فیگما

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

گزینه‌های دیگری که در وسط نوار بالایی صفحه فعال شده اند، ساخت ماسک (mask) و چگونگی ترکیب المان‌ها در یک گروه است.

آموزش نرم افزار Figma: ساخت گروه در فیگما

اگر به صورت تیمی کار می‌کنید، می‌توانید از منوی سمت چپ صفحه، گزینه‌ی Create new team را انتخاب کنید. با زدن این دکمه یک صفحه‌ی جدید مانند شکل زیر باز می‌شود و می‌توانید یک نام را برای گروه انتخاب کنید.

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