فیگما چیست؟ نرم افزار Figma و شهرت آن در طراحی سایت

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

فیگما چیست

همانطور که در مقدمه گفته شد برنامه فیگما یک نرم ­افزار برای طراحی UI و UX است. به­‌طور عمومی این برنامه یک نرم ­افزار رایگان و مبتنی بر فضای ابری است که قابلیت نصب بر روی سیستم ­عامل­های ویندوز و مک را دارد و همچنین قابل اجرا بر روی مرورگر نیز می­باشد. تشکیل تیم‌­های چندمنظوره طراحی یکی از قابلیت­هایی است که وجود فضای ابری در این برنامه ایجاد کرده است.

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

قابلیت Version Control یکی دیگر از مزایای استفاده از برنامه فیگما است که به‌­وسیله آن می­توان در هر مرحله­‌ای از طراحی به مرحله قبل برگشت و مورد مربوطه را تغییر یا اصلاح کرد.

ساخت اجزا و یا Componentsها یکی دیگر از مزایای برنامه فیگما محسوب می­گردد. به­‌وسیله این قابلیت می‌­توان با ساخت اجزا و ترکیب کردن آنها اشکالی را به­‌وجود آورد و ذخیره کرد و در زمان نیاز از این اجزا استفاده نمود.

متد‌های استفاده از فیگما

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

آموزش نرم افزار فیگما

در حالت کلی با مشاهده اولیه برنامه گزینه­‌های مربوط به Search ، Recent ، Plugins ، Draft را می­بینیم. با استفده از Search می­‌توان فایل‌های موجود و افرادی که در حال فعالیت هستند را جستجو کرد. گزینه Recent مربوط به فایل‌هایی است که اخیرا کار و انجام شده‌­اند و گزینه Plugins مرتبط با افزونه­‌هایی است که نصب کرده‌­ایم. گزینه آخر یعنی Draft پروژه‌­های فعالی که در جریان داریم را نشان می­‌دهد.

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

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

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

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

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

Tools یا ابزارها در منوی بالا

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

از برخی خصوصیاتی که در ستون دیزاین قابل تغییر هستند می­توان به گرد کردن گوشه‌­ها در چهارضلعی با استفاده از corner radius، بریدن قسمتی از دایره توسط Arc ، ایجاد دورخط یا stroke، تغییر دادن میزان شفافیت و تغییرات زاویه­‌ای اشاره کرد.

گفتنی است که در هنگام رسم اشکال در داخل فریم با پایین نگه داشتن کلید Shift می­توان شکل‌هایی با اضلاع یکسان رسم نمود و این مورد در هنگام چرخاندن و تغییرات زاویه نیز صادق است.

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

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

انجام عملیات بولین در داخل فیگما

شکلهایی که در داخل فریم‌ها رسم می­‌گردند و باهم در تماس هستند یا نقطه اشتراک دارند با استفاده از گزینه بولین در بالای فریم قابل تغییر هستند. گزینه‌­های مربوط به منوی بولین به ترتیب شامل ترکیب کردن یا Union Selection ، تفریق کردن یا Subtract ، اشتراک گرفتن یا Intersect و حذف نقطه اشتراک یا Exclude است. با استفاده از اعمال بولین راه ایجاد و ترسیم اشکال خلاقانه برای ما فراهم می­‌گردد.

ابزارهای Pen ، Pencil و Blend در منوی بالا

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

Pencil ابزار دیگری است که در صورت کلیک و درگ کردن قابلیت رسم شکلهایی با گره­‌های زیاد و حالت نرم را فراهم می‌­کند و با استفاده از ابزار Blend نیز کار مربوط تغییر دادن دستگیره­‌های گره‌­ها انجام می­گردد.

کاربرد ابزار متن در برنامه طراحی فیگما

به­‌طور کلی کاربرد ابزار Text یا متن برای همه ما مشخص است و بوسیله آن می­توان کار نوشتن متن را انجام داد. با انتخاب ابزار متن و کلیک کردن در داخل فریم مجموعه خصوصیات و ویژگی‌­ها در ستون سمت راست نمایان می­‌گردد که از میان همه این‌ها می­‌توان به نوع فونت، اندازه فونت، فاصله خطوط و غیره اشاره کرد.

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

نتیجه گیری

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

تیم تولید محتوا

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