فیگما چیست و چگونه می توان با فیگما طراحی سایت کرد؟

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

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

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

فیگما چیست؟

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

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

نصب فیگما و شروع طراحی با آن

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

پلاگین های فیگما چیست؟

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

آشنایی با محیط کار و ابزارهای فیگما

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

منو (Menu)

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

ابزارها (tools)

در قسمت tools می توانید به ابزارهایی که احتمالا بیشتر استفاده می کنید دسترسی داشته باشید. ( قالب ها، اشکال، متن و …)

قابلیت ها (Options)

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

لایه ها (Layers)

بخش لایه ها جایی است که هر المان مورد استفاده در آن لیست می شود.

بوم (Canvas)

بوم جایی است که شما کار طراحی خود را در آن انجام داده و مشاهده می کنید.

مسئول فنی (Inspector)

در این قسمت اطلاعات و تنظیمات برای هر ابزاری که انتخاب شده، نشان داده می شود. فیگما در این بخش تب یا برگه های جداگانه ای را ایجاد می کند مانند Design، Prototype و Code.

آموزش شروع کار طراحی سایت با فیگما

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

1- ایجاد قاب یا بدنه (Frame)

در فیگما، فریم، اساسا دربرگیرنده ی المان های دیگر است. کلید F را فشار دهید تا ابزار فریم انتخاب شود. همچنین می توانید روی نماد Frame Tool در گزینه های بالای پنجره کلیک کنید تا فعال شود. برای ایجاد فریم چند راه دارید هم می توانید در یک قسمت از بوم کلیک کنید و بکشید یا می توانید از قسمت Inspector یک اندازه ی فریم از پیش تعیین شده را انتخاب کنید.

2- افزایش و کاهش بزرگنمایی

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

Shift ⇧2 : بزرگنمایی انتخاب فعلی
Shift ⇧1: بزرگنمایی برای نمایش کل صفحه ی بوم

برای اجرای این دستورات فریم موردنظر را با کلیک روی نام آن انتخاب کنید. همچنین برای حرکت بین فریم ها دو کلید میانبر را یاد بگیرید:

N به فریم بعدی زوم می کند
Shift ⇧N به فریم قبلی زوم می کند

3- حرکت در اطراف بوم

یکی دیگر از ابزارهای مفید، به ویژه هنگامی که بزرگنمایی می کنید یا روی یک فایل بزرگ کار می کنید، ابزار دستی است. کلید spacebar در صفحه کلید را فشار دهید، یک نماد دست روی بوم ظاهر می شود. کلیک کنید و بکشید تا کل بوم به اطراف حرکت کند.

4- ایجاد لایه متنی در فیگما

شاید نیاز به ایجاد یک لایه متنی داشته باشید. پس کلید T را فشار دهید تا ابزار Text انتخاب شود. در هر قسمت از فریم خود کلیک کنید یک لایه Text ایجاد می شود. بعد از اینکه متن خود را تایپ کردید کلید Escape صفحه کلید را بفشارید تا از ابزار Text خارج شوید.

5- ایجاد یک مستطیل و مرتب کردن لایه ها

کلید R را فشار دهید تا ابزار Rectangle را انتخاب کنید. یک مستطیل را در اطراف متنی که ایجاد کرده اید بکشید.

در حال حاضر، متن زیر مستطیل پنهان است. برای رفع این مشکل، باید از دستورات Arrange در فیگما استفاده کنیم. به پنل لایه ها در سمت چپ پنجره بروید. روی لایه ی متن راست کلیک کنید تا لیستی از گزینه ها ظاهر شود. روی “Bring to front” کلیک کنید، اکنون متن روی مستطیل قرار می گیرد.

6- تراز کردن متن و مستطیل

می خواهیم متن و مستطیل نسبت به یکدیگر در مرکز قرار بگیرند. Figma مجموعه‌ای از دستورات “Align” را دارد که به ما این امکان را می‌دهد. با فشردن کلید Escape یا V ابزار Move را انتخاب کنید سپس یک فضای مستطیلی شکل را در اطراف متن و مستطیل بکشید. دستورات Align در سمت راست در دسترس شما هستند. می توانید هر کدام که نیاز دارید را انتخاب کنید.

7- اضافه گردن گوشه ی گرد به مستطیل و تغییر رنگ آن

شکل مستطیلی را که ایجاد کردید انتخاب کنید. در Inspector تنظیماتی به نام “Corner Radius” وجود دارد که به ما امکان می دهد گوشه های هر شکلی را گرد کنیم. در اینجا مقدار پیکسلی که می خواهید هر گوشه گرد شود را تایپ کنید.

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

8- تغییر فونت در فیگما

با انتخاب لایه متن، می توانید به تنظیمات در Inspector برای تغییر فونت و همچنین اندازه و رنگ فونت دسترسی داشته باشید.

ذخیره پروژه

آخرین کاری که باید انجام دهید انتخاب نام برای فایل است. برای این کار با فشار دادن کلید Escape تمامی ابزارها را از حالت انتخاب خارج کنید. در بالای پنجره روی Untitled کلیک کنید، سپس یک نام برای پروژه انتخاب و تایپ کنید. فیگما تمام فایل های شما را در فضای ابری ذخیره می کند.

نوشته شده توسط : نسترن مردانی | در تاریخ ۱۴۰۱/۰۶/۰۵ ساعت ۱۷ :۴۳ : ۴۷