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

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

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

[note]

اگر به مهارت های طراحی رابط کاربری علاقه مندید به شما پیشنهاد می کنیم به صفحه دوره طراحی آموزش ui ux سون لرن که توسط آقای محمدرضایی ، طراح تجربه کاربری اسنپ فود تهیه شده است مراجعه کنید و از مشاوره رایگان مشاوان ما بهره مند شوید.

[/note]

فیگما چیست؟

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

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

[note]

بیشتر بخوانید: فیگما چیست؟

[/note]

فیگما یا 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 نیز پرداختیم. فیگما یک محیط بسیار قدرتمند برای طراحی است و برای افرادی مناسب است که به دنبال یک نرم افزار یکپارچه و پرسرعت هستند.

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