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

چرا باید از Figma استفاده کنیم؟

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

پروتوتایپ: بهترین خصوصیت ویژگی پروتوتایپ فیگما قابل کلیک بودن آن است که مشابه آن را قبلا در Craft + InVision مشاهده‌ کردیم البته امکانات بیشتری نسبت به سرویس‌های قبلی دریافت خواهید کرد.

کامنت گذاری در طرح (Built-in Commenting): هر عضوی از تیم که در پروژه لینک شده باشد می‌تواند نظرات خود را در هر جایی از طراحی اضافه کند، تقریبا مشابه نحوه عملکرد کامنت‌گذاری در InVision. می‌توانید افراد را در کامنت‌ها فراخوانی کنید (tag)، نظرات پاسخ داده شده را نشانه‌گذاری کنید و حتی با برنامه Slack ادغام کنید. چه چیزی از این بهتر؟!

Developer Handoff: فیگما نه تنها برای طراحان جذاب است، بلکه امکانات بی‌نظیری به توسعه‌دهندگان ارائه می‌دهد. توسعه‌دهندگان می‌توانند ابعاد و استایل‌ها را دریافت کنند و آیکون‌ها و عکس‌ها را از URL پروژه دانلود کنند. این شبیه Zeplin است با این تفاوت که بعد از به‌روزرسانی لازم نیست دوباره آرت‌بوردهای خود را همگام‌سازی (sync) کنید.

Version Control: فیگما شامل نسخه تاریخچه برای همه همکارانتان است. شما می‌توانید در هر نسخه از وب‌سایت یا اپلیکیشن خود به حالت قبلی برگردید. این ویژگی مانند دستگاه زمان (Time machine) در مک کار می‌کند.

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

Live Share: اگر روی تصویر پروفایل هر شخص کلیک کنید، می توانید آنچه را که در صفحه خود مشاهده می‌کنند را ببینید و نشانگر موس آن‌ها را دنبال کنید.

اجزا (Components): این قابلیت مانند سمبل‌ها در Sketch است با این تفاوت که برای طراحان بسیار ساده‌تر و منعطف‌تر است. شما می‌توانید کامپوننت‌های مختلف را بسازید و با هم ترکیب کنید و در زمان نیاز در پروژه خود به کار ببرید.

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

کتابخانه‌های تیم: شما می‌توانید مجموعه‌ اجزای پروژه‌های خود را با دیگران اشتراک بگذارید و به‌روز کنید.

آیا استفاده از Figma رایگان است؟

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

شما می‌توانید هر فایلی را در فضای شخصی خود با هر تعداد دلخواه از افراد به اشتراک بگذارید. همچنین اگر می خواهید “بخش تیم” را امتحان کنید‌، می‌توانید تیم مدنظر خود را با دو ویرایشگر (editors) به صورت رایگان ایجاد کنید.

آیا Figma از Sketch بهتر است؟

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

آیا Figma بر روی پلتفرم‌های مختلف کار می‌کند؟

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

چگونه فیگما آرت‌بوردها را بر روی موبایل نمایش می‌دهد؟

برای دیدن پیش‌نمایش طرح‌های شما روی موبایل، ۲ راه وجود دارد:

1. باز کردن Figma URL بر روی مرورگر گوشی
2. استفاده از اپلیکیشن Figma Mirror برای پیش‌نمایش طرح‌ها (توصیه دیزایناسور)

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

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

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

پیش‌نمایش در Figma Mirror

اپلیکیشن Figma Mirror این امکان را برای شما فراهم می‌کند که پیش‌نمایش طرح‌های خود در مقیاس اپلیکیشن مشاهده کنید. شما می توانید برنامه Figma Mirror را برای Android و iOS از صفحه دانلود وب‌سایت Figma دریافت کنید یا از App Store یا Google Play Store دانلود کنید.
نکته مهم: اپلیکیشن Figma Mirror متناسب با عرض و طول موبایل شما، محتوای طراحی را تنظیم می‌کند.

برای اینکه بتوانید از برنامه Figma Mirror استفاده کنید، باید یک حساب کاربری فیگما داشته باشید.

طراحی با کامپوننت‌ها

کامپوننت‌ها بخشی اساسی در طراحی هستند و این امکان را برای ما فراهم می‌کنند فیچرهای بزرگ را به قسمت‌های کوچک‌تر تقسیم کنیم و همچنین باعث می‌شود تا از طراحی مجدد قسمت‌های موجود صرفه‌نظر کنیم و به‌جای کارهای تکراری و خسته‌کننده دیگر وقت خود را ذخیره کنیم. افزودن مفهوم کامپوننت‌ها به ابزار طراحی (Design tool) باعث می‌شود که کامپوزیشن طرح‌های پیچیده سازگارتر و کارآمدتر شوند.

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

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

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

کامپوننت‌ها چگونه کار می‌کنند؟

در فیگما، کامپوننت‌ها دقیقا مانند فریم‌ها کار می‌کنند،کافی است نمونه طرح جدید‌ خود را از طریق تکثیر/تکرار یک کامپوننت بسازید بجای اینکه آن‌ها را بارها و بارها کپی کنید. ابتدا با انتخاب المانی که میخواهید آن ‌را در قالب کامپوننت طراحی کنید، شروع می‌کنید و سپس بر روی دکمه “ایجاد کامپوننت” از نوار ابزار (Toolbar) کلیک می‌کنید.

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

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

محدوده‌ها

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

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

وقتی بخش پلاگین‌های فیگما راه‌اندازی شد، از خوشحالی بین همسایه‌های دفتر دیزایناسور شیرینی پخش کردیم! پس از این ماجرا، شروع به بررسی و کار با آپدیت جدید فیگما (پلاگین‌ها) کردیم. ما یک لیست شامل ۱۰ پلاگین‌ پرکاربرد و محبوب را برای شما آماده کردیم. این پلاگین‌ها باعث می‌شوند روند کار طراحی شما سریع‌تر و بهتر شود. فیگما به‌عنوان یک پلتفرم طراحی و همکاری مشترک شگفت‌انگیز برای طراحان، در حال رشدی فوق‌العاده‌ است. ما عاشق فیگما شدیم و می‌خواهیم این حس خوبمرا با شما به اشتراک بگذاریم تا بتوانید روند کاری خود را سریع‌تر انجام داده و رابط کاربرب و تجربه کاربری بهتری را خلق کنید.

RTLPLZ – RTL Support

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

ویژگی‌ها:

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

Auto Flow

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

1. دو شی را انتخاب کنید.
2. کلیک راست کنید و در منو پلاگین Autoflow را پیدا کنید.
3. گزینه ⌥⌘ را انتخاب کنید، تمام صفحه‌های خود را به‌هم وصل کنید تا کار پلاگین شروع شود.

Figmotion

Figmotion یک ابزار انیمیشن است که دقیقا برای فیگما ساخته شده است. این پلاگین کار با انیمیشن‌ها را برای شما ساده‌تر می‌کند، زیرا دیگر نیازی به یک ابزار انیمیشن‌سازی مجزا مثل Principle ، Haiku یا After Effects نیست. Figmotion به توسعه‌دهندگان کمک می‌کند که کنترل بیشتری روی انیمیشن‌ها داشته باشند.

Content Reel

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

Datavizer

با داده‌های خود یک نمودار نواری (Bar chart)، نقشه پراکندگی (scatter plot) یا نمودار خطی (line chart) ایجاد کنید! یا از یک مجموعه تصادفی از داده‌ها استفاده کنید تا به سرعت شکل‌ها یا داده‌های ساختگی ایجاد کنید. این پلاگین برای طراحی اپلیکیشن‌هایی که گزارش نموداری ارائه می‌دهند گزینه بسیار مناسبی است.

Coloe palettes

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

Unsplash

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

Image Palette

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

نکته: فیگما از الگوریتم Median Cut استفاده می‌کند که تقریباً برجسته‌ترین رنگ‌های تصویر را استخراج می‌کند. این الگوریتم سریع است اما بعضی مواقع به شما نتایج غیرمعمول نمایش می‌دهد. مانند تصاویر کم رنگ، تصاویر گرافیکی برداری و غیره… رنگ‌های استخراج شده ممکن است دقیقا با کدهای hex موجود در تصویر مطابقت نداشته باشند.

Icon Resizer

اندازه آیکون‌ها را به صورت استاندارد در طرح خود تغییر دهید. کار بسیار ساده‌تر است. وقتی همه آیکون‌های شما در یک اندازه باشند و یک bounding box مربعی دارید. کافی است یک یا چند فریم را انتخاب کنید و آیکون‌ و اندازه کادر را تنظیم کنید. این دقیقا خودشه!

Remove BG

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

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