فیگما (figma) چیست؟

فیگما یا Figma یک پلتفرم فوق العاده مفید و حرفه ای برای طراحی رابط کاربری یا همان User Interface میباشد. یکی از موضوعات اساسی در زمینه تجربه کاربری همین طراحی UI میباشد که اگر وبسایت یا اپلیکیشن ما دارای طرح و ظاهری جذاب نباشد، قطعا کاربر پسند نبوده و تجربه بدی هم به کاربر ما القا میشود. پس در پاسخ به سوال “فیگما چیست؟” میتوان گفت که Figma یک ابزار برای طراحی UI بر اساس قوانین و اصول UX میباشد. تمام آن چیزی که طرح وبسایت یا اپلیکیشن ما بدان نیاز دارد.

مزایای فیگما چیست؟

•  قابل اجرا بر روی انواع سیستم عامل‌ها:

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

•  مجهز به ابزارهای گوناگون:

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

•  آنلاین بودن فیگما:

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

•  استفاده و نصب سریع و آسان:

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

•  امکان انجام کارهای تیمی:

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

• مجهز به سیستم طراحی مقیاس‌پذیر:

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

•  امکان آپلود و اشتراک‌گذاری آسان:

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

•  آپدیت مداوم:

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

• معرفی مهم‌ترین بخش‌ها و ابزارهای فیگما:

ابتدایی‌ترین صفحه‌ای که پس از باز شدن فیگما مشاهده می‌کنید، چند بخش را شامل می‌شود. در قسمت بالای صفحه، نوار ابزاری وجود دارد که که گزینه‌هایی مانند Frame، Pen، Tools و… را در آن می‌بینید. گوشه بالا سمت راست، می‌توانید پروفایل خود و همکارانتان را مشاهده کنید. در نزدیکی پروفایل، گزینه share قرار دارد که در صورت تمایل به اشتراک‌گذاری فایل، می‌توانید از آن استفاده کنید. کنار آیکون Share، قسمتی است که در آن امکان بازدید از پروژه‌هایی که تاکنون بر روی آن‌ها کار کرده‌اید، وجود دارد.

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

•  Tools:

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

کاربرد لایه‌ ها در برنامه فیگما چیست؟

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

• خروجی گرفتن از اجزای طراحی در فیگما:

در پلتفرم فیگما امکان خروجی گرفتن با پسوند های مختلف وجود دارد. شما میتوانید از پسوند های مرسوم نظیر svg و png و البته jpg استفاده کنید. در بخش سمت راست Figma یک بخش برای Export یا همان خروجی گرفتن در نظر گرفته شده است. کافیست یک یا چند لایه مدنظر خود را از بخش لایه ها انتخاب کرده و سپس گزینه Export را انتخاب کنید. بعداز انتخاب کردن گزینه Export میتوانید پسوند و سایز خروجی را تایید و سپس فایل های مدنظرتان در سیستم کامپیوتری ذخیره سازی خواهند شد.

• اجرای صفحات طراحی شده در فیگما:

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

• ارتباط اعضای تیم با اسلک (Slack) در فیگما:

اسلک یه محیط ارتباطی متمرکز برای شرکت های بزرگ میباشد که فیگما به خوبی با این محیط سازگار و منطبق شده است. یعنی فیگما به عنوان بستر ارتباطی بین اعضا از اسلک استفاده میکند. هر تغییری که در طرح مورد نظر ایجاد شود برای سایر اعضا Slacked خواهد شد تا طراحان دیگر متوجه ایجاد تغییر شوند. این ویژگی از این نر مهم است که برخی مواقع تغییر بر روی یک بخش میتواند سایر بخش ها را نیز مورد تغییر قرار داده و عوض کند. پس سایر طراحان باید از تغییراتی که اعمال میشود باخبر باشند.

• API‌ های فیگما:

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

• ورژن بندی در فیگما:

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

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

• کتابخانه های فیگما:

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

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

معرفی بهترین کتابخانه ها و UI Kit های فیگما:

• Pegasus Design system UI kit
• UI prep
• Frames x UI kit مبتنی برBootstrap4
• کیت کابانا برای Figma UI
• Disy Design system
• Ant Design system For Figma

بهترین افزونه ها و پلاگین های فیگما:

• Unsplash که برای دانلود عکس های متنوع میباشد
• Charts که ابزاری برای رسم نمودار های مختلف است
• افزونه Vectary 3D که برای سه بعدی کردن طرح است
• Avatars که برای شما آواتار تصادفی ایجاد میکند
• پلاگین User Profile که دنیایی از عکس های پروفایل است
• پلاگین Figmotio برای افزودن انیمیشن به طرح فیگما

حرف آخر:

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