همه چیز درباره طراحی سایت با فیگما

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

طراحی سایت فروشگاهی و طراحی سایت شرکتی با وبکده

فیگما چیست؟

فیگما یک نرم افزار ویرایش گرافیکی تحت وب است که برای طراحی رابط کاربری مورد استفاده قرار می‌گیرد و در حال حاضر به عنوان یکی از ابزارهای محبوب طراحی سایت و اپلیکیشن‌ شناخته می‌شود. فیگما در سال 2016 توسعه داده شد و خیلی سریع توانست نام خود را در میان سایر نرم افزارهای برتر و پیشرو در زمینه طراحی همچون Sketch و Adobe XD مطرح سازد. توسعه فیگما انقلابی بزرگ در زمینه طراحی و ویرایش است که محبوبیت آن در زمان شیوع ویروس کرونا به طرز چشمگیری افزایش پیدا کرد. بر اساس یک تحقیق، 37٪ از طراحان در سال 2019 برای طراحی سایت و یا اپلیکیشن از فیگما استفاده می‌کردند و این آمار در سال 2020 به 66٪ افزایش پیدا کرد.

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

مزایای طراحی سایت با فیگما

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

سازگاری با تمامی پلتفرم ها

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

استفاده سریع و آسان

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

امکان انجام کارهای تیمی

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

ابزارهای متنوع و کاربردی

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

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

نحوه نصب و راه اندازی فیگما

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

برای راه اندازی فیگما بر روی سیستم خود ابتدا وارد وب سایت رسمی آن به آدرس https://www.figma.com/ شده و سپس گزینه Get Started را انتخاب کنید. پس از آن بر روی کادر مشکی رنگ Create account کلیک نمایید و با وارد کردن آدرس ایمیل، رمز دلخواه و پاسخ به سوالاتی همچون نام و انتخاب علت نصب فیگما و سپس تایید آدرس ایمیل، حساب کاربری خود را ایجاد نمایید. پس از تایید اکانت و تکمیل اطلاعات خود می‌توانید به صورت انفرادی و یا تیمی در فیگما فعالیت کرده و رابط کاربری وب سایت خود را طراحی نمایید.

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

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

• Vector networks (شبکه‌های برداری): این بخش شامل ابزارهای کامل نوشتاری و طراحی همچون قلم و مدادهای ساده و پیشرفته برای طراحی صفحات سایت است.

• Comments (نظرات): بخش نظرات به کاربران امکان می‌دهد تا بر روی فایل‌های طراحی خود یادداشت بنویسند و یا بازخورد دریافت نمایند.

• Share icon (اشتراک گذاری آیکون/فایل): این بخش به کاربران امکان می‌دهد تا فایل‌های طراحی خود را با اعضای تیم به اشتراک بگذارند. کاربران همچنین می‌توانند از این بخش جهت مدیریت مجوزهای مربوط به اشتراک گذاری فایل‌های طراحی نیز استفاده کنند.

• Team library (کتابخانه تیم): این بخش نیز مانند یک کتابخانه است که امکان انتشار و اشتراک گذاری سبک‌ها و مولفه‌های طراحی با سایر اعضای تیم را در اختیار شما قرار می‌دهد.

• Menu (منو): بخش منو فیگما نیز شامل یک مرورگر فایل است که می‌توانید از آن برای جستجوی قسمت‌های مختلف نرم افزار و انجام امور مختلف مانند مشاهده و تنظیم فایل‌ها و یا مدیریت پلاگین‌ها استفاده نمایید.

• Canvas (بوم): قسمت بوم نیز مانند بوم نقاشی، فضایی را جهت طراحی صفحات سایت و پروژه‌ها در اختیار شما قرار می‌دهد.

• Layers (لایه‌ها): بخش لایه‌ها نیز عناصر یک فایل را بر اساس گروه‌ها و فریم‌ها فهرست بندی و سازماندهی می‌کند.

• The properties panel (پنل ویژگی‌ها): این قسمت نیز شامل گزینه‌هایی همچون Design (طراحی)، Prototyping (نمونه سازی) و Inspection (بررسی) است. گزینه طراحی ابزارهای مختلفی را جهت طراحی صفحه و پروژه ارائه می‌دهد. گزینه نمونه سازی، فایل اولیه طراحی را به نمونه اصلی و اولیه متصل می‌کند و گزینه بررسی نیز تنظیمات و اطلاعات متنی یک شی انتخاب شده را به شما نشان می‌دهد.

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

نحوه ایجاد فریم در فیگما

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

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

نحوه اضافه کردن گرید و ستون در فیگما

در مرحله بعدی از طراحی سایت با فیگما باید گریدهایی را به صفحات اضافه نمایید تا از طریق آنها بتوانید محتواهای خود را به طور منظم سازماندهی کنید. فریم‌های فیگما قابل ویرایش هستند و می‌توانید آنها را بر اساس سلیقه خود تغییر کنید. در اکثر مواقع برای طراحی سایت در فیگما 12 گرید به صورت پیش فرض برای راه اندازی سایت در نظر گرفته می‌شود. برای افزودن گرید به یک صفحه ابتدا فریمی که می‌خواهید بر روی آن گرید اضافه کنید را انتخاب کرده و سپس از پنل سمت راست صفحه گزینه «Layout Grid» را انتخاب نمایید. در پایین این گزینه نیز گزینه دیگری به نام «Grid» قرار دارد که با کلیک بر روی آن باید گزینه اول را به «Columns» تغییر داده و تعداد آن را نیز به عدد 12 یا عدد دلخواه خود تنظیم کنید.

نحوه استفاده از اشکال در فیگما

برای طراحی سایت در فیگما می‌توانید از اشکال مختلف همچون مربع، دایره و یا خطوط استفاده کنید. این اشکال در واقع اصول اولیه ایجاد یک طرح در یک صفحه محسوب می‌شوند. به عنوان مثال برای ایجاد منوی ناوبری در بالای یک صفحه باید از یک مستطیل استفاده کنیم. برای انجام این کار از منوی بالای صفحه ابزار «Square Shape» را انتخاب کرده و یک مربع ترسیم کنید و سپس اندازه آن را به میزان دلخواه خود تغییر داده و آن را در بالای صفحه قرار دهید.

نحوه اضافه کردن تصویر در فیگما

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

نحوه افزودن متن در فیگما

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

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