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

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

فیگما چیست؟

همانطور که گفتیم، فیگما یک برنامه‌ی طراحی رابط کاربری است که روند ساخت آن در سال 2012 شروع شد و نهایتا در سال 2016 اولین نسخه از آن در اختیار عموم قرار گرفت. فیگما در حالت کلی با دیگر ابزارهای ویرایشی متفاوت است؛ زیرا یک ابزار تحت وب (web based) است: یعنی به صورت مستقیم در مرورگر اجرا می‌شود. این به این معنی است که شما می‌توانید در هر زمانی به پروژه‌های خود دسترسی پیدا کنید و بدون نیاز به خرید مجوز و یا نصب نرم‌افزار از هر کامپیوتری و یا پلتفرمی کار با آن را شروع کنید. نیازی نیست نگران حجم مصرفی اینترنت خود باشید، چراکه فیگما مصرف پهنای باند زیادی ندارد. با این حال، کاربران ویندوز و مک می‌توانند به راحتی فیگما را روی سیستم عامل خود نصب کرده و از برخی از امکانات آن‌ به صورت آفلاین استفاده کنند.

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

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

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

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

[caption id="attachment_76422" align="alignnone" width="1000"] مقایسه فیگما با adobe xd[/caption]

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

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

• استفاده از کامپوننت (Components): ساخت و ترکیب چند شی با یکدیگر (مشابه با نرم افزار Sketch)

• ساخت نمونه‌ی اولیه یا پروتوتایپ: قابلیت کلیک کردن روی کامپوننت‌های مختلف در آن (مشابه با نرم افزار InVision)

• کامنت گذاری هنگام طراحی: اضافه کردن، نشانه‌گذاری و پاسخ دادن نظرات توسط اعضای تیم در حال کار روی پروژه

• برنامه نویسی بدون کد: قابلیت دریافت ابعاد و ویژگی‌ها در قالب فایل استایل‌، دانلود آیکون‌ها و عکس‌ها را از URL پروژه (مشابه با نرم افزار Zeplin)

• تنظیم فضا‌ها: ساخت کامپوننت‌ با قابلیت تغییر اندازه با استفاده از تنظیمات فضاها (مشابه با نرم افزار Sketch)

• مدیریت پروژه با Version Control: مشاهده‌ی تاریخچه و بازگشت به یک نسخه‌ی خاص توسط اعضای تیم

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

• پلاگین‌ها: استفاده از فونت‌ها، استایل‌های سایر کاربران در قالب پلاگین‌های کاربردی

بیشتر بخوانید: آموزش adobe xd : آموزش طراحی رابط کاربری با ادوبی XD آموزش نرم افزار Figma: نصب نرم افزار فیگما

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

[caption id="attachment_76423" align="alignnone" width="1000"] دریافت فایل نصبی نرم افزار فیگما[/caption]

چیت شیت فیگما (Figma)

دانلود

آموزش نرم افزار 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 رایگان

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

[caption id="attachment_76437" align="alignnone" width="1000"] آموزش راه اندازی نرم افزار figma[/caption]

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

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

در اولین گام از آموزش نرم افزار Figma، بعد از وارد شدن به صفحه‌ی طراحی با محیطی مانند شکل زیر روبه‌رو می‌شوید:

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

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

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

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

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

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

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

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

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

• ابزار انتخاب: این گزینه دارای دو زیر منوی انتخاب المان‌ها و یا تغییر ابعاد آن‌ها می‌باشد.

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

• انتخاب اشیا: این گزینه که Shape Tool نام دارد، به شما اجازه می‌دهد تا اشیای مختلف را درون صفحه استفاده کنید.

• رسم شکل: با ابزار Pen Tool می‌توانید اشیای دلخواه خود را با نقطه-بردار یا با استفاده از مداد رسم کنید.

• نوشتن متن: امکان نوشتن متن که در تمامی نرم افزارهای طراحی و گرافیک وجود دارد.

• جابجایی در صفحه: با گزینه‌ی Hand Tool می‌توانید در بوم وسط صفحه جابجا شوید و حرکت کنید.

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

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

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

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

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

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

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

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

بیشتر بخوانید: راهنمای کاربردی استفاده از رنگ‌ها در طراحی رابط کاربری UI

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

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

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

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

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

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

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

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

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

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

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

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

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

1. File & Properties

1. Edit

1. Select

1. View

1. Arrange

1. Tools

1. Text

1. Object

1. Components

1. Misc

موارد بیشتر در فیگما

در پایان به برخی امکانات بیشتر در زمان طراحی اشاره می‌کنیم:

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

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

• زمانی که شی اطراف بوم را در فیگما حرکت می‌دهید، ارتفاع و عرض آن در صفحه به صورت همزمان نمایش داده خواهد شد.

• می‌توانید از کد SVG به صورت مستقیم از یک شی در داخل فیگما کپی بگیرید و یا کد SVG را از ویرایشگر کد کپی کرده و آن را در بوم فیگما بچسبانید.

بهترین پلاگین‌های فیگما

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

بهترین پلاگین‌های فیگما: پلاگین Arabic & RTL Support

تا قبل از ساخته شدن پلاگین Arabic & RTL Support، طراحان باید با استفاده از روش دشوار Sublime Text و پلاگین BIDI مشکلات راست‌چین شدن متن را برطرف می‌کردند. اما اکنون با نصب این پلاگین، هنگام نوشتن کافی است بر روی متن خود راست کلیک کرده و به منو Plugins رفته و گزینه‌ی Arabic & RTL Support را انتخاب کنید. دیالوگی باز می‌شود که با کمک آن می‌توانید متن خود را درون آن بنویسید. این پلاگین متن شما را در لحظه راست چین می‌کند و درون فایل پروژه نمایش می‌دهد.

بهترین پلاگین‌های فیگما: پلاگین Unsplash

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

بهترین پلاگین‌های فیگما: پلاگین Palette

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

بهترین پلاگین‌های فیگما: پلاگین Color Contrast Checker

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

بهترین پلاگین‌های فیگما: پلاگین Iconify

در گذشته، برنامه‌های زیادی برای بارگذاری مجموعه‌ی آیکون‌ها و نمادها در فیگما وجود داشتند. اما امروزه به لطف پلاگین Iconify دیگر نیازی به استفاده از آن‌ها ندارید. این پلاگین کاربردی حداقل حدود 40000 آیکون را برای انتخاب در دسترس کاربران قرار داده است.

علاوه بر آن، طراحان این فرصت را دارند که از طریق کتابخانه‌های مختلف آیکون، به صورت دقیق‌تر بیش از 50 مورد از آن‌ها را جستجو کنند. FontAwesome ،JamIcons ،EmojiOne از جمله کتابخانه‌های محبوب آیکون هستند. همچنین این پلاگین امکان بارگذاری آیکون‌های برداری (Vector Icon) را نیز فراهم می‌کند.

بهترین پلاگین‌های فیگما: پلاگین Blobs

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

بهترین پلاگین‌های فیگما: پلاگین Content Reel

پلاگین Content Reel یک پلاگین عالی است که به شما کمک می‌کند تا محتوای طراحی مانند متن، آواتار، آیکون و... را به راحتی در صفحه‌ی خود قرار دهید. (مانند استفاده از Sketch's Craft) با استفاده از Content Reel می‌توانید داده‌های تصادفی را به طرح خود اضافه کرده و تعداد آن‌ها را تنظیم کنید. این به طراحی شما کمک می‌کند تا واقع بینانه‌تر به نظر برسد.

بهترین پلاگین‌های فیگما: پلاگین Figmotion

یکی از اشکالات مهم فیگما، عدم توانایی در ایجاد انیمیشن‌های درون برنامه‌ای است. به لطف پلاگین Figmotion اکنون این مشکل رفع شده است. این پلاگین بدون نیاز به برنامه‌ی دیگری به صورت مستقیم در Figma انیمیشن ایجاد می‌کند. علاوه بر آن، Figmotion اجازه می‌دهد تا انیمیشن‌ها به صورت JSON یا CSS خروجی گرفته شوند و یا حتی قابل رندر گرفتن در فرمت‌های gif ،mp4 یا WebM باشند. این پلاگین یک ابزار بصری است که هم برای افراد حرفه‌ای و هم برای تازه‌کارها طراحی شده است و استفاده از امکانات انیمیشنی آن ساده است.

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

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

•  آنتی ویروس خود را غیرفعال کنید.

• بر روی فایل نصبی راست کلیک کنید و run as administrator رو بزنید. با این کار نرم افزار را با دسترسی ادمین نصب می‌کنید و از بسیاری از مشکلات نصب احتمالی جلوگیری می‌شود.

استفاده از فونت دلخواه هنگام کار با فیگما‌ در سیستم عامل لینوکس سخت‌تر است. ابتدا فونت را با یکی از نسخه‌های ttf ،ttc ،otf و pfb دانلود کنید. سپس آن را در مسیر زیر قرار دهید:

$HOME/.local/share/fonts

توجه داشته باشید که دایرکتوری fonts بصورت ReadOnly است و برای اینکه بتوانید فایل را درون آن قرار دهید، باید آن را قابل ویرایش کنید. برای این کار، در همان مسیر راست کلیک کرده و گزینه open terminal here را انتخاب کنید. با این کار ترمینال در همان مسیر باز می‌شود. کافی است دستور زیر را وارد کرده تا بتوانید فایل فونت را درون دایرکتوری قرار دهید:

sudo chmod 777 /usr/share/fonts

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

پس از یادگیری نرم افزار Figma چه مسیری را طی کنیم؟

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

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