رابط کاربری (User Interface)، یک عضو جداناپذیر از عوامل موثر بر بازاریابی و ارتباط کاربران با کسب و کارهای امروزی به شمار میرود. یک رابط کاربری خوب در اغلب موارد با نیازهای کاربران سنجیده میشود و اگر به درستی طراحی شود، کاربر برای کار با آن نیازی به آموزش ندارد و از کار کردن با آن لذت میبرد. به همین دلیل نرم افزارهای متعددی برای ساخت یک رابط کاربری مناسب به وجود آمدهاند.
یکی از برنامههای طراحی رابط کاربری، فیگما (Figma) است. با استفاده از فیگما، میتوان یک رابط کاربری را به راحتی و در زمانی بسیار کم، به گونهای طراحی کرد که به اصطلاح User Friendly باشد. پس اگر به آشنایی و آموزش نرم افزار Figma و یادگیری نحوه طراحی رابط کاربری با آن علاقه دارید، یا میخواهید ویژگیها و نحوه کار با فیگما را بهتر بشناسید، تا انتهای این مقاله با ما همراه باشید.
همانطور که گفتیم، فیگما یک برنامهی طراحی رابط کاربری است که روند ساخت آن در سال ۲۰۱۲ شروع شد. نهایتاً در سال ۲۰۱۶ اولین نسخه از آن در اختیار عموم قرار گرفت. فیگما در حالت کلی با دیگر ابزارهای ویرایشی متفاوت است، زیرا یک ابزار تحت وب است: به این معنی که به صورت مستقیم در مرورگر اجرا میشود. این به این معنی است که شما میتوانید در هر زمانی به پروژههای خود دسترسی پیدا کنید، بدون نیاز به خرید مجوز و یا نصب نرمافزار از هر کامپیوتری و یا پلتفرمی کار با آن را شروع کنید. همچنین، نیازی نیست نگران حجم مصرفی اینترنت خود باشید
زیرا فیگما مصرف پهنای باند زیادی ندارد. با این حال، کاربران ویندوز و مک میتوانند به راحتی فیگما را روی سیستم عامل خود نصب کرده و از برخی امکانات آن به صورت آفلاین استفاده کنند.
فیگما یک برنامهی رایگان است و در آن شما میتوانید تا حتی سه پروژهی فعال را به صورت همزمان ایجاد و ذخیره کنید. این سیاست به شما فرصت میدهد تا کار با نرمافزار را یاد بگیرید، آزمایش کنید و روی پروژههای کوچک مشغول به طراحی شوید. همچنین فارسی نوشتن در فیگما (در محیط ویرایشگر) بدون هیچ مشکلی امکان پذیر است که خبر خوشی برای طراحانی است که نیازمند استفاده از زبان فارسی هستند.
معمولا طراحان به دنبال یک ابزار جامع و کامل هستند تا در وقت خود صرفهجویی کنند و بتوانند به سادهترین شکل ممکن صفحات خود را طراحی و مدیریت کنند. طراحانی که از نرم افزار فیگما استفاده میکنند، معتقدند که دارای امکانات بینظیری است. دلیل اینکه چرا طراحان این برنامه را دوست دارند این است که از فیگما میتوان برای انجام انواع کارهای گرافیکی و به خصوص طراحی رابط کاربری، مانند طراحی رابطهای برنامههای کاربردی تلفن همراه، طرحهای نمونه اولیه، ساخت پستهای رسانهای اجتماعی و… استفاده کرد.
یکی از مزایای بزرگ استفاده از فیگما در مقایسه با سایر نرم افزارهای طراحی نظیر 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، به صورت گام به گام با بخشهای مختلف آن آشنا میشویم.
چندین نمونهی طراحی از پیش برای شما آماده شده است تا راحتتر با فیگما و امکانات آن آشنا شوید. اما اگر میخواهید تا در یک پروژهی خالی طراحی کنید، با زدن دکمهی new که در سمت راست و بالای صفحه قرار گرفته است، میتوانید کار را در فیگما شروع کنید.
در فیگما یک نوار اصلی در بالای صفحه قرار گرفته است که اغلب تنظیمات و امکانات مورد نیاز شما از این بخش در دسترس قرار گرفته است. در ادامه هر کدام از بخشهای این منو را بررسی میکنیم.
از گزینههای سمت راست نوار بالای صفحه شروع میکنیم. در این بخش سه گزینه در اختیار شما قرار گرفته است که عبارتند از:
در وسط نوار بالای صفحه، عنوان پروژه را میبینید. با کلیک بر این عنوان، میتوانید نام آن را تغییر دهید.
در فیگما، از طریق نوار بالای صفحه و کلیک بر روی گزینهی Main Menu.
با انتخاب گزینهی File، تمامی امکانات شامل ساخت یک پروژهی جدید، ذخیرهی فایل کنونی در حساب فیگما، ذخیرهی فایل در یک پروژهی جدید در حساب فیگما و گرفتن خروجی از پروژه و… در دسترس است.
طراحی بسته به نوع دستگاه خروجی کاربر، میتواند دارای چینشهای مختلفی باشد. بسیاری از برنامههای محبوب حتی بسته به اینکه کاربر دارای چه سیستم عاملی روی تلفن همراه خود است (اندروید یا آیفون)، طراحی برنامهی خود را تغییر میدهند. بنابراین قبل از شروع طراحی، حتما یک فریم برای کار خود در نظر گرفته و المانهای مورد نیاز را روی آن قرار دهید. انتخاب فریم آن قدر مهم است که فیگما بدون وجود فریم، به شما پیش نمایش طرح را نشان نمیدهد.
هنگامی که روی یک المان در فیگما کلیک میکنید، در پنل سمت راست و در تب Design، ویژگیهای ظاهری آن مانند رنگ، فواصل و اندازههای مورد نیاز در طراحی پدیدار میشوند. با تغییر این خصوصیات میتوانید یک المان را به دلخواه خود شخصی سازی کنید.
در تب دوم یا Prototype، میتوانید مشخص کنید که چگونه بین صفحات مختلف طرح خود جابجا شوید. در تب سوم یا Inspect، میتوانید کدهای تحت وب طراحی خود را ببینید، درصورت نیاز آنها را کپی کنید تا به روند توسعهی برنامهی خود سرعت ببخشید.
قبلا گفتیم که گزینهی Present برای مشاهدهی همزمان طرح در مرورگر است. اگر فایل خود را از طریق دسترسی به لینک عمومی به اشتراک بگذارید، هر کسی که لینک صفحهی طراحی شده را داشته باشد میتواند طرحهای شما را ببیند. هنگام پیش نمایش در فیگما، سرصفحه (Header) و پاورقی (Footer) مرورگر همچنان قابل مشاهده است. این روش مناسب تست طراحی یک برنامه نیست، پس فیگما برای دیدن پیش نمایش طراحی روی موبایل، علاوه بر باز کردن Figma URL بر روی مرورگر گوشی، یک راه دیگر نیز در نظر گرفته است.
برای دیدن پیش نمایش طرح در تلفن همراه میتوانید برنامهی Figma Mirror را از بخش دانلود سایت فیگما دریافت کنید. برنامهی Figma Mirror به شما این امکان را میدهد تا طرحهای خود در مقیاس گوشی مشاهده کنید. در حقیقت این برنامه متناسب با عرض و طول تلفن همراه شما، محتوای طراحی را تنظیم میکند. این گونه میتوانید مشکلات طراحی خود را سریعتر شناسایی کنید.
محیط کار در فیگما بسیار شبیه به محیط فتوشاپ، ایلاستریتور و باقی نرم افزارهای طراحی و گرافیک است. در این محیط میتوانید چندین المان را در یک لایه قرار دهید، آنها را با هم ترکیب (merge) کنید و در صورت لزوم، آنها را غیرقابل مشاهده کنید. برای مشاهدهی این قابلیتها کافی است که چند المان را در بوم وسط صفحه بیندازید و از منوی سمت چپ صفحه، آنها را با گرفتن کلید کنترل و کلیک انتخاب کنید. سپس با راست کلیک روی موارد انتخاب شده، خواص لایهها را میبینید.
در شکل بخش قبل پس از انتخاب المانها، میبینید که در وسط منوی بالای صفحه به جای نام پروژه، سه گزینه اضافه میشود. اولین گزینه از سمت چپ، امکان ساخت کامپوننت از المانهای مورد نظر است. شما میتوانید به راحتی یک بخش از طرح خود را که زیاد استفاده میشود به یک کامپوننت تبدیل کنید تا در بخشهای دیگر طراحیهای خود در فیگما از آن استفاده کنید.
گزینههای دیگری که در وسط نوار بالایی صفحه فعال شده اند، ساخت ماسک (mask) و چگونگی ترکیب المانها در یک گروه است.
اگر به صورت تیمی کار میکنید، میتوانید از منوی سمت چپ صفحه، گزینهی Create new team را انتخاب کنید. با زدن این دکمه یک صفحهی جدید مانند شکل زیر باز میشود و میتوانید یک نام را برای گروه انتخاب کنید.
بعد از ساخت گروه، یک لینک در اختیار شما قرار میگیرد که با استفاده از آن میتوانید اعضای مختلف تیم را دعوت کرده و به راحتی عضو گروه کنید.
اگر به سئو سایت وردپرسی خود اهمیت می دهید، مطمئناً معیارهای مهمی مثل سرعت و…
در عصر حاضر، فناوری اطلاعات و هوش مصنوعی (AI) به سرعت در حال دگرگونسازی جنبههای…
دنیای تکنولوژی همیشه در حال تغییر است و هر روز یک فناوری تازه جایگزین روشهای…
آموزش جامع نصب Django روی اوبونتو مقدمه اگر به دنبال ساخت یک وبسایت یا اپلیکیشن…
آموزش گامبهگام حذف محدودیت Grace Period در Remote Desktop Services یکی از مشکلات رایج در…
پروتکل Remote Desktop Protocol (RDP) یکی از متداولترین روشها برای مدیریت سرورهای ویندوزی از راه…