آموزش نرم افزار Figma: رابط کاربری (User Interface)، یک عضو جداناپذیر از عوامل موثر بر بازاریابی و ارتباط کاربران با کسب و کارهای امروزی به شمار میرود. یک رابط کاربری خوب در اغلب موارد با نیازهای کاربران سنجیده میشود و اگر به درستی طراحی شود، کاربر برای کار با آن نیازی به آموزش ندارد و از کار کردن با آن لذت میبرد. به همین دلیل نرم افزارهای متعددی برای ساخت یک رابط کاربری مناسب به وجود آمدهاند.
یکی از برنامههای طراحی رابط کاربری، فیگما (Figma) است. با استفاده از فیگما، میتوان یک رابط کاربری را به راحتی و در زمانی بسیار کم، به گونهای طراحی کرد که به اصطلاح User Friendly باشد. پس اگر به آشنایی و آموزش نرم افزار Figma و یادگیری نحوه طراحی رابط کاربری با آن علاقه دارید، یا میخواهید ویژگیها و نحوه کار با فیگما را بهتر بشناسید، تا انتهای این مقاله با سون لرن همراه باشید.
اگر به مهارتهای طراحی رابط کاربری علاقهمندید به شما پیشنهاد میکنیم به صفحه دوره طراحی آموزش ui ux سون لرن که توسط آقای محمدرضایی ، طراح تجربه کاربری اسنپ فود تهیه شده است مراجعه کنید و از مشاوره رایگان مشاوان ما بهرهمند شوید.
همانطور که گفتیم، فیگما یک برنامهی طراحی رابط کاربری است که روند ساخت آن در سال 2012 شروع شد و نهایتا در سال 2016 اولین نسخه از آن در اختیار عموم قرار گرفت. فیگما در حالت کلی با دیگر ابزارهای ویرایشی متفاوت است؛ زیرا یک ابزار تحت وب (web based) است: یعنی به صورت مستقیم در مرورگر اجرا میشود. این به این معنی است که شما میتوانید در هر زمانی به پروژههای خود دسترسی پیدا کنید و بدون نیاز به خرید مجوز و یا نصب نرمافزار از هر کامپیوتری و یا پلتفرمی کار با آن را شروع کنید. نیازی نیست نگران حجم مصرفی اینترنت خود باشید، چراکه فیگما مصرف پهنای باند زیادی ندارد. با این حال، کاربران ویندوز و مک میتوانند به راحتی فیگما را روی سیستم عامل خود نصب کرده و از برخی از امکانات آن به صورت آفلاین استفاده کنند.
فیگما یک برنامهی رایگان است و در آن شما میتوانید تا حتی سه پروژهی فعال را به صورت همزمان ایجاد و ذخیره کنید. این سیاست به شما فرصت میدهد تا کار با نرم افزار را یاد بگیرید، آزمایش کنید و روی پروژههای کوچک مشغول به طراحی شوید. همچنین فارسی نوشتن در فیگما (در محیط ویرایشگر) بدون هیچ مشکلی امکان پذیر است که خبر خوشی برای طراحانی است که نیازمند استفاده از زبان فارسی هستند.
معمولا طراحان به دنبال یک ابزار جامع و کامل هستند تا در وقت خود صرفهجویی کنند و بتوانند به سادهترین شکل ممکن صفحات خود را طراحی و مدیریت کنند. طراحانی که از نرم افزار فیگما استفاده میکنند، معتقدند که دارای امکانات بینظیری است. دلیل اینکه چرا طراحان این برنامه را دوست دارند این است که از فیگما میتوان برای انجام انواع کارهای گرافیکی و به خصوص طراحی رابط کاربری، مانند طراحی رابطهای برنامههای کاربردی تلفن همراه، طرحهای نمونه اولیه، ساخت پستهای رسانهای اجتماعی و… استفاده کرد.
البته باید توجه داشت که ابزارهای طراحی کاربردی دیگری مانند Adobe XD و یا Sketch نیز در دسترس هستند، اما دلایل بسیار زیادی وجود دارد که از ابزارهای دیگر مانند Adobe XD و یا Sketch به فیگما مهاجرت کرد.
مقایسه فیگما با adobe xd
یکی از مزایای بزرگ استفاده از فیگما در مقایسه با سایر نرم افزارهای طراحی نظیر XD، این است که به دلیل تحت وب بودن، طراحان میتوانند از راه دور و به طور همزمان با سایر افراد تیم بر روی یک پروژه کار کنند. به خصوص اینکه امروزه به دلایل اقتصادی، محدودیتهای دسترسی و پروتکلهای بهداشتی، بسیاری از شرکتها روند دورکاری را در پیش گرفتهاند. پس برای کسانی که نمیخواهد ابزارهای مختلف طراحی را دانلود و نصب کنند، فیگما یک انتخاب مناسب است. فیگما در تبلیغات خود نیز بر روی همین ویژگی همکاری در یک پروژه تمرکز کرده است و شعارش این است: سعی کردیم بخش زیادی از بدیها و مشکلات کار کردن گروهی را با نرم افزار خود از بین ببریم.
تقریبا تمامی ویژگیهای مثبتی که در سایر نرم افزارهای طراحی رابط کاربری وجود دارد، به صورت یک جا در فیگما در دسترس است. برخی از این امکانات عبارتند از:
در بخش قبل گفتیم که فیگما نیاز به نصب ندارد، با این حال شاید راحتتر باشید تا یک نسخه از آن را روی سیستم عامل خود نصب کنید. برای دانلود نرم افزار figma برای ویندوز و مک میتوانید به بخش دانلود سایت رسمی فیگما مراجعه کرده و نسخهی مورد نظر خود را دانلود کنید. در این بخش علاوه بر فایل نصبی، یک نرم افزار جدا برای نصب فونتهای دلخواه با نام Font installer و همچنین اپلیکیشن قابل نصب در تلفن همراه برای دموی همزمان و اتصال گوشی به کامپیوتر با نام Figma mirror در دسترس است.
دریافت فایل نصبی نرم افزار فیگما
نصب فیگما در لینوکس سختتر از سایر سیستم عاملهاست، زیرا قبل از نصب باید پیشنیازها (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
همانطور که در تصویر مشاهده میکنید، چندین نمونهی طراحی از پیش برای شما آماده شده است تا راحتتر با فیگما و امکانات آن آشنا شوید. اما اگر میخواهید تا در یک پروژهی خالی طراحی کنید، با زدن دکمهی new که در سمت راست و بالای صفحه قرار گرفته است، میتوانید کار را در فیگما شروع کنید.
در اولین گام از آموزش نرم افزار Figma، بعد از وارد شدن به صفحهی طراحی با محیطی مانند شکل زیر روبهرو میشوید:
در فیگما یک نوار اصلی در بالای صفحه قرار گرفته است که اغلب تنظیمات و امکانات مورد نیاز شما از این بخش در دسترس قرار گرفته است. در ادامه هر کدام از بخشهای این منو را بررسی میکنیم.
از گزینههای سمت راست نوار بالای صفحه شروع میکنیم. در این بخش سه گزینه در اختیار شما قرار گرفته است که عبارتند از:
در وسط نوار بالای صفحه، عنوان پروژه را میبینید. با کلیک بر این عنوان، میتوانید نام آن را تغییر دهید.
در بخش سمت چپ نوار بالای صفحه، هشت گزینه قابل دسترسی است که به ترتیب از چپ به راست عبارتند از:
در فیگما، از طریق نوار بالای صفحه و کلیک بر روی گزینهی Main Menu، زیر منویی مانند شکل زیر باز میشود:
با انتخاب گزینهی File، تمامی امکانات شامل ساخت یک پروژهی جدید، ذخیرهی فایل کنونی در حساب فیگما، ذخیرهی فایل در یک پروژهی جدید در حساب فیگما و گرفتن خروجی از پروژه و… در دسترس است.
طراحی بسته به نوع دستگاه خروجی کاربر، میتواند دارای چینشهای مختلفی باشد. بسیاری از برنامههای محبوب حتی بسته به اینکه کاربر دارای چه سیستم عاملی روی تلفن همراه خود است (اندروید یا آیفون)، طراحی برنامهی خود را تغییر میدهند. بنابراین قبل از شروع طراحی، حتما یک فریم برای کار خود در نظر گرفته و المانهای مورد نیاز را روی آن قرار دهید. انتخاب فریم آن قدر مهم است که فیگما بدون وجود فریم، به شما پیش نمایش طرح را نشان نمیدهد.
هنگامی که روی یک المان در فیگما کلیک میکنید، در پنل سمت راست و در تب Design، ویژگیهای ظاهری آن مانند رنگ، فواصل و اندازههای مورد نیاز در طراحی پدیدار میشوند. با تغییر این خصوصیات میتوانید یک المان را به دلخواه خود شخصی سازی کنید.
در تب دوم یا Prototype، میتوانید مشخص کنید که چگونه بین صفحات مختلف طرح خود جابجا شوید. در تب سوم یا Inspect، میتوانید کدهای تحت وب طراحی خود را ببینید، درصورت نیاز آنها را کپی کنید تا به روند توسعهی برنامهی خود سرعت ببخشید.
قبلا گفتیم که گزینهی Present برای مشاهدهی همزمان طرح در مرورگر است. اگر فایل خود را از طریق دسترسی به لینک عمومی به اشتراک بگذارید، هر کسی که لینک صفحهی طراحی شده را داشته باشد میتواند طرحهای شما را ببیند. هنگام پیش نمایش در فیگما، سرصفحه (Header) و پاورقی (Footer) مرورگر همچنان قابل مشاهده است. این روش مناسب تست طراحی یک برنامه نیست، پس فیگما برای دیدن پیش نمایش طراحی روی موبایل، علاوه بر باز کردن Figma URL بر روی مرورگر گوشی، یک راه دیگر نیز در نظر گرفته است.
برای دیدن پیش نمایش طرح در تلفن همراه میتوانید برنامهی Figma Mirror را از بخش دانلود سایت فیگما دریافت کنید. برنامهی Figma Mirror به شما این امکان را میدهد تا طرحهای خود در مقیاس گوشی مشاهده کنید. در حقیقت این برنامه متناسب با عرض و طول تلفن همراه شما، محتوای طراحی را تنظیم میکند. این گونه میتوانید مشکلات طراحی خود را سریعتر شناسایی کنید.
محیط کار در فیگما بسیار شبیه به محیط فتوشاپ، ایلاستریتور و باقی نرم افزارهای طراحی و گرافیک است. در این محیط میتوانید چندین المان را در یک لایه قرار دهید، آنها را با هم ترکیب (merge) کنید و در صورت لزوم، آنها را غیرقابل مشاهده کنید. برای مشاهدهی این قابلیتها کافی است که چند المان را در بوم وسط صفحه بیندازید و از منوی سمت چپ صفحه، آنها را با گرفتن کلید کنترل و کلیک انتخاب کنید. سپس با راست کلیک روی موارد انتخاب شده، خواص لایهها را میبینید:
در شکل بخش قبل پس از انتخاب المانها، میبینید که در وسط منوی بالای صفحه به جای نام پروژه، سه گزینه اضافه میشود. اولین گزینه از سمت چپ، امکان ساخت کامپوننت از المانهای مورد نظر است. شما میتوانید به راحتی یک بخش از طرح خود را که زیاد استفاده میشود به یک کامپوننت تبدیل کنید تا در بخشهای دیگر طراحیهای خود در فیگما از آن استفاده کنید.
گزینههای دیگری که در وسط نوار بالایی صفحه فعال شده اند، ساخت ماسک (mask) و چگونگی ترکیب المانها در یک گروه است.
اگر به صورت تیمی کار میکنید، میتوانید از منوی سمت چپ صفحه، گزینهی Create new team را انتخاب کنید. با زدن این دکمه یک صفحهی جدید مانند شکل زیر باز میشود و میتوانید یک نام را برای گروه انتخاب کنید:
بعد از ساخت گروه، یک لینک در اختیار شما قرار میگیرد که با استفاده از آن میتوانید اعضای مختلف تیم را دعوت کرده و به راحتی عضو گروه کنید.
همانند بسیاری از نرم افزارهای طراحی، فیگما نیز دارای کلیدهای میانبر است تا روند طراحی برای کاربران آسانتر شود. این کلیدها در جلوی هر قابلیت در محیط فیگما قابل مشاهده هستند. علاوه بر آن، در بخش Help فیگما نیز میتوانید گزینههای در دسترس را مشاهده کنید. برخی از کلیدهای میانبر ضروری در فیگما شامل لیست زیر میباشند:
Ctrl+Shift+E | Export |
Ctrl+Alt+S | Save to Version History |
Ctrl+Shift+K | Place Image |
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 |
Ctrl+right-click | Select Layer Menu |
Ctrl+click | Deep Select |
⎵+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 |
Ctrl+] | Bring Forward |
Ctrl+[ | Send Backward |
Ctrl+Shift+] | Bring to Front |
Ctrl+Shift+[ | Send to Back |
V | Move |
C | Add/Show Comments |
P | Pen |
Shift+P | Pencil |
R | Rectangle |
O | Ellipse |
L | Line |
F | Frame |
S | Slice |
I | Pick Color |
T | Text |
Ctrl+Shift+V | Paste and Match Style |
Ctrl+B | Bold |
Ctrl+I | Italic |
Ctrl+U | Underline |
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 |
Ctrl+Alt+K | Create Component |
Ctrl+Alt+B | Detach Instance |
Ctrl+Shift+/ | Keyboard Shortcuts |
در پایان به برخی امکانات بیشتر در زمان طراحی اشاره میکنیم:
تنها شش هفته بعد از فعال شدن امکان استفاده از پلاگین در فیگما، حداقل 40 پلاگین کاربردی در بخش مربوطه قرار گرفت. امروزه این تعداد به چندین هزار پلاگین رسیده است. این پلاگینها به طراحان کمک میکنند تا از دوباره کاری جلوگیری شود و بسیاری از مشکلات طراحی در برخی از زبانهای خاص برطرف شود (مانند مشکلات راستچین شدن زبانهای فارسی و عربی). در این بخش برخی از مهمترین پلاگینهای کاربردی در فیگما که اغلب طراحان آنها را توصیه میکنند، معرفی میکنیم.
تا قبل از ساخته شدن پلاگین Arabic & RTL Support، طراحان باید با استفاده از روش دشوار Sublime Text و پلاگین BIDI مشکلات راستچین شدن متن را برطرف میکردند. اما اکنون با نصب این پلاگین، هنگام نوشتن کافی است بر روی متن خود راست کلیک کرده و به منو Plugins رفته و گزینهی Arabic & RTL Support را انتخاب کنید. دیالوگی باز میشود که با کمک آن میتوانید متن خود را درون آن بنویسید. این پلاگین متن شما را در لحظه راست چین میکند و درون فایل پروژه نمایش میدهد.
سایت Unsplash یکی از وب سایتهای پیشرو در اشتراک تصاویر رایگان است. این وب سایت با پلاگین مخصوص خود با نام Unsplash به کاربران اجازه میدهد تا در مجموعهی گستردهای از تصاویر زیبا جستجو کنند و تصویر مورد نظر خود را برای طراحیشان انتخاب کنند. استفاده از این تصاویر رایگان در پروژههای شخصی و تجاری به جریان کار سریع و کارآمد کمک میکند.
برای استفادهی حرفهای از رنگهای مکمل و برای دوری از دردسر بیشتر، از پلاگین Palette استفاده میشود. با این پلاگین میتوانید با رنگها در قالب یک پالت کامل کار کنید، به راحتی طرحهای رنگی تصادفی ایجاد کنید و تم رنگی دلخواه خود را تنظیم کنید.
پلاگین Color Contrast Checker ابزاری سریع و ساده است که به شما امکان میدهد تا همهی لایهها را یک بار اسکن کنید و به راحتی مواردی را که مطابق با الزامات WCAG (دستورالعملهای دسترسی به محتوای وب) نیستند، شناسایی کنید. در داخل این پلاگین، میتوانید برای مشاهدهی لایه، روی نمونهی رنگ کلیک کنید، سبک متن و پس زمینه را تنظیم کنید تا طراحی شما نمرهی قابل قبولی را به دست آورد.
در گذشته، برنامههای زیادی برای بارگذاری مجموعهی آیکونها و نمادها در فیگما وجود داشتند. اما امروزه به لطف پلاگین Iconify دیگر نیازی به استفاده از آنها ندارید. این پلاگین کاربردی حداقل حدود 40000 آیکون را برای انتخاب در دسترس کاربران قرار داده است.
علاوه بر آن، طراحان این فرصت را دارند که از طریق کتابخانههای مختلف آیکون، به صورت دقیقتر بیش از 50 مورد از آنها را جستجو کنند. FontAwesome ،JamIcons ،EmojiOne از جمله کتابخانههای محبوب آیکون هستند. همچنین این پلاگین امکان بارگذاری آیکونهای برداری (Vector Icon) را نیز فراهم میکند.
در سالهای اخیر، در طراحی برنامهها و یا وبسایتها، حبابها المانهایی عالی و مرسوم هستند که مشاهدهی صفحه را سرگرم کننده و آسانتر میکنند. پلاگین Blobs دقیقا همان کاری را که میگوید انجام میدهد: به ایجاد حباب کمک میکند. این پلاگین یک ابزار کوچک مفید و کمحجم است که با استفاده از آن طراحان به راحتی میتوانند اشکال حباب مانند را ایجاد کنند. علاوه بر آن، پیچیدگی و کنتراست حبابهای تولید شده به راحتی با استفاده از نشانگر موس قابل تنظیم هستند.
پلاگین Content Reel یک پلاگین عالی است که به شما کمک میکند تا محتوای طراحی مانند متن، آواتار، آیکون و… را به راحتی در صفحهی خود قرار دهید. (مانند استفاده از Sketch’s Craft) با استفاده از Content Reel میتوانید دادههای تصادفی را به طرح خود اضافه کرده و تعداد آنها را تنظیم کنید. این به طراحی شما کمک میکند تا واقع بینانهتر به نظر برسد.
یکی از اشکالات مهم فیگما، عدم توانایی در ایجاد انیمیشنهای درون برنامهای است. به لطف پلاگین Figmotion اکنون این مشکل رفع شده است. این پلاگین بدون نیاز به برنامهی دیگری به صورت مستقیم در Figma انیمیشن ایجاد میکند. علاوه بر آن، Figmotion اجازه میدهد تا انیمیشنها به صورت JSON یا CSS خروجی گرفته شوند و یا حتی قابل رندر گرفتن در فرمتهای gif ،mp4 یا WebM باشند. این پلاگین یک ابزار بصری است که هم برای افراد حرفهای و هم برای تازهکارها طراحی شده است و استفاده از امکانات انیمیشنی آن ساده است.
از آنجایی که فیگما تحت وب است، به طور عادی فونتهای خارج از برنامه را نمیشناسد. بنابراین برای استفاده از فونتهایی که به طور پیشفرض در فیگما وجود ندارند، در سیستم عامل ویندوز و مک باید فایل نصبی Font installer را که در بخش نصب فیگما معرفی شد، از سایت فیگما دانلود کرده و روی سیستم خود نصب کنید. توجه داشته باشید که هنگام نصب حتما کارهای زیر را انجام دهید:
استفاده از فونت دلخواه هنگام کار با فیگما در سیستم عامل لینوکس سختتر است. ابتدا فونت را با یکی از نسخههای ttf ،ttc ،otf و pfb دانلود کنید. سپس آن را در مسیر زیر قرار دهید:
$HOME/.local/share/fonts
توجه داشته باشید که دایرکتوری fonts بصورت ReadOnly است و برای اینکه بتوانید فایل را درون آن قرار دهید، باید آن را قابل ویرایش کنید. برای این کار، در همان مسیر راست کلیک کرده و گزینه open terminal here را انتخاب کنید. با این کار ترمینال در همان مسیر باز میشود. کافی است دستور زیر را وارد کرده تا بتوانید فایل فونت را درون دایرکتوری قرار دهید:
sudo chmod 777 /usr/share/fonts
بعد از باز شدن دسترسی، فونت خود را در دایرکتوری قرار دهید. میبینید که در نرم افزار فیگما فونتتان شناخته میشود و در دسترس است.
در این مقاله با فیگما و ویژگیهای آن آشنا شدیم و تلاش کردیم تا آن را از جنبههای مختلف بررسی کنیم. علاوه بر آن، به آموزش نرم افزار Figma نیز پرداختیم. فیگما یک محیط بسیار قدرتمند برای طراحی است و برای افرادی مناسب است که به دنبال یک نرم افزار یکپارچه و پرسرعت هستند.
حال زمان آن است که کار با فیگما را به صورت حرفهای شروع کنید. سعی کنید موارد معرفی شده در این مقاله را امتحان کنید و در قالب یک پروژهی کوچک، از امکانات بیشمار فیگما استفاده کنید. تنها با تمرین است که میتوانید موارد بیشتری دربارهی فیگما یاد بگیرید. همچنین شما میتوانید بهترین مجموعه الگوهای موجود ساخته شده با فیگما را بررسی کنید تا برای طراحی پروژههای خود انگیزه پیدا کنید. اگر سوالی در مورد آموزش نرم افزار فیگما دارید یا تجربهی کار با آن را دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.
پاسخ هاتون به سوال کامنت ها هم تقریبا تا حد زیادی تونست جواب سوالامو بده
الان تنها سوالی که دارم اینه که من اگه بخوام وارد بازار کار تو حوضه uiux بشم
دقیقا چند تا برنامه رو باید یاد بگیرم؟
گفتید فقط با فیگما نمیشه غیر فیگما دیگه باید بلد بود؟
در اغلب جاها با adobe xd هم کار میکنند. خوبی یوآی اینه که شما مفهوم رو متوجه بشید اغلب نرم افزارها و ابزارهاشون شبیه هم هست.
پیشنهاد میکنم مهارتها و ابزارهای لازم رو از موقعیت شغلیهای مشابه در وبسایت های کاریابی مثل جاب ویژن و جابینجا بدست بیارید.