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

دوره معرفی شده در ویدئو

آموزش پیشنهادی

دوره آموزش فیگما (جامع و کاربردی✅) بهمراه 3 پروژه عملی

• تسلط کامل به فیگما
• انجام ۳ پروژه با فیگما
• چطور به عنوان طراح UI/UX کارمونو با فیگما رو شروع
• چطور با فیگما لوگو طراحی کنیم
• چطور با فیگما وایرفریم طراحی کنیم

مشاهده دوره

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

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

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

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

مهمترین ویژگی های برنامه Figma چیست؟

فیگما چیست و چه کاربردی دارد؟

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

مقاله پیشنهادی :فیگما یا Adobe XD یا اسکچ

روش های استفاده از فیگما

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

معرفی بخش‌های مهم نرم افزار فیگما

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

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

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

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

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

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

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

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

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

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

منظور از اشتراک گذاری در فیگما چیست؟

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

API‌ های فیگما

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

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

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

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

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

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

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

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

در تصویر زیر 6مورد از بهترین کتابخانه های فیگما ذکر شده است.

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

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

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

جمع بندی مقاله “فیگما چیست؟”

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

با ثبت نظرات، پیشنهادات، انتقاد ها و همچنین سوال های خود درمورد مقاله فیگما چیست؟ در بخش نظرات سایت، ما را در راستای بهبود کیفیت خدماتمان، یاری نمایید.