سال جدید😍 دوره‌های جدید😍 ۳۵٪ تخفیف به همراه ۵ میلیون تومان هدیه 👈 (کلیک کنید)
۰ ثانیه
۰ دقیقه
۰ ساعت
۴۰ دیدگاه نظر نازنین کریمی مقدم
آموزش فیگما : آموزش نصب نرم افزار Figma + معرفی پلاگین‌های کاربردی
آموزش فیگما : آموزش نصب نرم افزار Figma + معرفی پلاگین‌های کاربردی

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

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

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

فیگما چیست؟

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

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

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

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

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

[caption id="attachment_76422" align="alignnone" width="1000"]فیگما یا XD؟ مقایسه فیگما با 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: نصب فیگما در لینوکس

نصب فیگما در لینوکس سخت‌تر از سایر سیستم عامل‌هاست، زیرا قبل از نصب باید پیش‌نیازها (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

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

آموزش نرم افزار 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
Ctrl+Shift+E Export
Ctrl+Alt+S Save to Version History
Ctrl+Shift+K Place Image
  1. Edit
Ctrl+C Copy
Ctrl+X Cut
Ctrl+V Paste
Ctrl+Shift+V Paste Over Selection
Alt+drag Resize from Center
Alt+drag Duplicate Selection
Ctrl+Alt+C Copy Properties
Ctrl+Alt+V Paste Properties
  1. Select
Ctrl+right-click Select Layer Menu
Ctrl+click Deep Select
  1. View
⎵+drag Pan
+ Zoom In
- Zoom Out
Shift+1 Zoom to Fit
Shift+0 Zoom to 100%
Shift+R Rulers
Ctrl+Shift+3 Show Outlines
Ctrl+Alt+Y Pixel Preview
  1. Arrange
Ctrl+] Bring Forward
Ctrl+[ Send Backward
Ctrl+Shift+] Bring to Front
Ctrl+Shift+[ Send to Back
  1. Tools
V Move
C Add/Show Comments
P Pen
Shift+P Pencil
R Rectangle
O Ellipse
L Line
F Frame
S Slice
I Pick Color
  1. Text
T Text
Ctrl+Shift+V Paste and Match Style
Ctrl+B Bold
Ctrl+I Italic
Ctrl+U Underline
  1. Object
Ctrl+G Group Selection
Ctrl+Shift+G Ungroup Selection
Ctrl+Shift+H Show/Hide Selection
Ctrl+Shift+L Lock/Unlock Selection
Ctrl+E Flatten Selection
Ctrl+Shift+O Outline Stroke
Alt+double+click Crop Image
  1. Components
Ctrl+Alt+K Create Component
Ctrl+Alt+B Detach Instance
  1. Misc
Ctrl+Shift+/ Keyboard Shortcuts

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

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

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

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

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

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

پلاگین Arabic & RTL Support برای راست چین کردن متن

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

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

پلاگین Unsplash برای کار با تصاویر رایگان

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

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

آموزش نرم افزار Figma 0 - پلاگین Palette برای کار با رنگها

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

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

پلاگین Color Contrast Checker

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

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

پلاگین Iconify

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

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

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

آموزش نرم افزار Figma - پلاگین Blobs

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

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

پلاگین Content Reel

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

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

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

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

۴۰ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم
zohre ۲۸ آذر ۱۴۰۲، ۱۳:۴۲

سلام،من دنباله داکیومنت اصلی برای یادگیری فیگماهستم خودسایت فیگما اموزش داره؟چون دورهای اموزشی ابدیت نیستن

نازنین کریمی مقدم ۰۶ دی ۱۴۰۲، ۱۲:۲۸

درود حقیقتا به دلیل ماهیت فیگما، محتوای بصری مثل ویدیوهای یوتیوب برای شما سریعتر خواهند بود. خود سایت فیگما هم یسری آموزش مقدماتی گذاشته که میتونید از لینک زیر مشاهده کنید: https://help.figma.com/hc/en-us/sections/4405269443991-Figma-for-Beginners-tutorial-4-parts-

Amirossein ۱۹ آذر ۱۴۰۲، ۱۶:۳۹

سلام با این برنامه میتونیم برای اپلیکیشن اندرویدی هم طراحی کنیم؟ خروجی به ما میده؟

نازنین کریمی مقدم ۲۰ آذر ۱۴۰۲، ۰۴:۵۴

درود فیگما برای طراحی مناسب هست و میتونید جای دقیق المانها رو براساس مختصات در قالب html , css ببینید. اما از اونجایی که در اندروید (جاوا یا کاتلین) کدهای بخش فرانت به این دو زبان نیستند نمیتونید مستقیم از خروجی فیگما استفاده کنید.

۰۷ مرداد ۱۴۰۲، ۱۱:۲۰

سلام خسته نباشید ببخشید برای اینکه بتونیم یک طراح UI/UX بشیم چه سیستم کامپیوتری پیشنهاد میدید؟ تو بقیه سایت‌ها نتونستم جوابمو پیدا کنم و اینکه آیا برای طراح UI/UX باید کد نویسی هم یاد بگیریم؟ ببخشید سایتتون کمی کند شده دیر بالا میاد فک کنم نظرم ثبت نشد معذرت

نازنین کریمی مقدم ۱۹ شهریور ۱۴۰۲، ۰۸:۵۱

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

۳۱ خرداد ۱۴۰۲، ۱۲:۴۶

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

نازنین کریمی مقدم ۰۴ تیر ۱۴۰۲، ۲۰:۳۰

درود یک افزونه با نام copydoc text kit وجود داره که موارد رو از گوگل داک و گوگل شیت به فیگما میاره، اما باز هم به سادگی با ابزار نوشتن متن میتونید نوشته رو از ورد به فیگما کپی کنید.

۰۵ بهمن ۱۴۰۱، ۰۹:۰۵

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

نازنین کریمی مقدم ۰۵ بهمن ۱۴۰۱، ۱۸:۲۱

درود در اغلب جاها با adobe xd هم کار میکنند. خوبی یوآی اینه که شما مفهوم رو متوجه بشید اغلب نرم افزارها و ابزارهاشون شبیه هم هست. پیشنهاد میکنم مهارتها و ابزارهای لازم رو از موقعیت شغلیهای مشابه در وبسایت‌های کاریابی مثل جاب ویژن و جابینجا بدست بیارید.

۲۵ دی ۱۴۰۱، ۲۲:۱۴

سلام وقت شما هم بخیر فیگما جستجو در key/gamepad+click key فارسی اش کار نمیکنه؟ لطفا راهنمایی کنید

نازنین کریمی مقدم ۲۶ دی ۱۴۰۱، ۱۰:۲۱

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

۲۸ آبان ۱۴۰۱، ۱۴:۲۱

سلام ممنون از سایت عالیتون? یه سوال داشتم ازتون. من تازه قصد ورود به شاخه برنامه نویسی رو دارم و تغریبا یسری اطلاعات جمع کردم ولی کامل نیست! علاقه ام بیشتر توی کارای طراحی و اینجور چیزاس. دوست دارم هم کد نویسی کنم هم طراحی.. فرانت و کار با فیگما رو میخوام یاد بگیرم.. فقط سوالی که دارم اینه که نمیدونم اول باید توی فیگما سایت رو طراحی کنیم و بعدش براش کد بنویسیم یا برعکسه؟؟؟ اصلا این که فرانت و فیگما رو باهم انتخاب کردم کار درستی هست؟ اخه هم استعدادم خوبه هم خلاقیتم. برای همین دوست دارم ازش استغاده کنم توی کارام ممنون میشم راهنماییم کنین از سردرگمی در بیام

نازنین کریمی مقدم ۲۸ آبان ۱۴۰۱، ۱۴:۳۴

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

۰۹ مهر ۱۴۰۱، ۰۹:۳۸

عالی بود به خصوص کامنتها تمام سوالات منو جواب داد

۰۲ شهریور ۱۴۰۱، ۱۷:۲۴

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

نازنین کریمی مقدم ۰۵ شهریور ۱۴۰۱، ۰۴:۰۹

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

۱۳ مرداد ۱۴۰۱، ۰۸:۲۷

درود بر شما. اگه بخوام با وب فلو و فیگما کار کنم یه همچین سیستمی بهم جواب میده؟ ممنون میشم برای حداقل‌های سخت افزاری و نرم افزاری راهنمایی کنین. I7 10750H/16G/1T+256SSD/4G GTX1650/

نازنین کریمی مقدم ۱۳ مرداد ۱۴۰۱، ۲۳:۱۵

درود بله جوابگو هست.

۳۰ خرداد ۱۴۰۱، ۱۲:۰۱

سلام میگم فیگما بازار کار دارد ؟

نازنین کریمی مقدم ۳۱ خرداد ۱۴۰۱، ۱۰:۱۱

درود به تنهایی خیر اما جزو مهارتهایی هست که برای طراحی UI و UX باید بلد باشید.

۱۱ خرداد ۱۴۰۱، ۰۵:۲۶

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

نازنین کریمی مقدم ۱۱ خرداد ۱۴۰۱، ۰۷:۳۵

درود تا جایی که اطلاع دارم رو پی دی اف ممکنه این امکان اضافه نشده باشه. اما شما <a href="https://forum.figma.com/t/links-between-pages-in-pdf-export/1582/2" target="_blank" rel="noopener nofollow ugc">این بحث</a> رو دنبال کنید شاید به نتیجه رسیدید.

۲۷ اردیبهشت ۱۴۰۱، ۰۴:۵۸

چگونه محیطی که طراحی میکنیم به کد‌ها متصل میشه مثلا من برنامه نویس اندرویدم چگونه طرحی که روی فیگما پیاده سازی میکنیم به کد‌ها متصل کنیم برای اجرا شدن؟؟

نازنین کریمی مقدم ۲۷ اردیبهشت ۱۴۰۱، ۱۳:۵۰

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

۱۰ اسفند ۱۴۰۰، ۱۰:۵۹

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

نازنین کریمی مقدم ۱۱ اسفند ۱۴۰۰، ۱۰:۲۱

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

۱۶ بهمن ۱۴۰۰، ۰۵:۳۹

عالی بود ممنون فقط ی سوال چطوری میتونم خارجی برای سایت بگیرم؟ یعنی فایل‌های html و css رو بده

نازنین کریمی مقدم ۱۶ بهمن ۱۴۰۰، ۰۹:۴۱

درود باید رو المان مربوطه کلیک کنید، از پنلی که سمت راست هست و در Inspect، بخش کد رو کپی کرده و در فایل css پیست کنید.

۱۲ بهمن ۱۴۰۰، ۲۱:۳۶

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

نازنین کریمی مقدم ۱۳ بهمن ۱۴۰۰، ۱۱:۲۴

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

۳۰ دی ۱۴۰۰، ۰۳:۰۸

ممنون مقاله مفیدی بود در صورتی که ورژن پولی نرم افزار فیگما رو خربداری کنیم آیا استفاده از آن برای کاربران ایرانی ممکن است یا بلاک میشیم؟

نازنین کریمی مقدم ۰۲ بهمن ۱۴۰۰، ۰۸:۲۶

درود با وضعیت فعلی هیچوقت نمیشه از فردامون مطمئن باشیم :))) بنابراین توصیه میکنم که اگر این کار رو کردید، همیشه با یه قندشکن بهش وصل شید تا موقعیت دقیق رو شناسایی نکنند و بلاک نشیم.

۱۶ آذر ۱۴۰۰، ۰۶:۵۶

بسیار عالی و مفید بود برای من

Nazanin KarimiMoghaddam ۱۶ آذر ۱۴۰۰، ۰۷:۱۷

ممنون که با ما همراه هستید :)

افشین ۱۴ مهر ۱۴۰۰، ۲۰:۲۹

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

نازنین کریمی مقدم ۱۸ مهر ۱۴۰۰، ۱۹:۲۸

خوشحالیم مقاله براتون مفید بوده دوست عزیز :)

رجب محمدی ۰۱ اردیبهشت ۱۴۰۰، ۰۴:۱۷

عالی بود تشکر بابت مقاله خوب تان

حسین ملهم ۰۸ فروردین ۱۴۰۰، ۱۵:۰۱

خیلی عالی بود دست شما درد نکنه

نازنین کریمی مقدم ۰۹ فروردین ۱۴۰۰، ۰۸:۴۰

ممنون که با ما همراه هستید :)

  • فیگما چیست؟
  • فیگما یا XD؟ کدام یک برای شروع طراحی UI/UX مناسب‌تر است؟
  • بیشتر بخوانید: آموزش adobe xd : آموزش طراحی رابط کاربری با ادوبی XD آموزش نرم افزار Figma: نصب نرم افزار فیگما
  • آموزش Figma رایگان
  • بهترین پلاگین‌های فیگما
  • آموزش نرم افزار Figma: افزودن فونت فارسی به فیگما
  • پس از یادگیری نرم افزار Figma چه مسیری را طی کنیم؟
اشتراک گذاری مقاله در :