طراحی لوگو با فیگما (Figma)

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

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

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

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

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

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

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

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

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

مرحله اول: فایل فیگما خود را باز کرده و فریم (Frame) جدید در آن ایجاد کنید

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

مرحله دوم: یک مستطیل برای ایجاد بدنه اصلی لوگو ترسیم کنید

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

مرحله سوم: گوشه های مستطیل را به حالت گرد تغییر دهید

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

مرحله چهارم: یک دایره برای طراحی لنز دوربین لوگو ترسیم کنید

در چهارمین مرحله از ساخت لوگو با فیگما باید یک دایره برای طراحی لنز دوربین در لوگوی خود ترسیم کنید. برای ایجاد شکل هندسی دایره تنها کافی است دکمه O در کیبورد را برای دسترسی به ابزار دایره/بیضی فشار دهید. بر روی گزینه (circle/oval) کلیک کرده و آن را بکشید تا دایره‌ای به ابعاد 32 پیکسل در 32 پیکسل ایجاد شود. در حین انجام این کار می‌توانید Shift ⇧ را نگه دارید تا شکل خود را محدود کنید؛ یعنی ارتفاع و عرض دایره شما در زمان ترسیم یکسان و ثابت باقی می‌مانند. با انجام این کار یک دایره توپر سفید خواهید داشت و می‌توانید آن را در قسمت بالایی مستطیل قرار دهید.

مرحله پنجم: دو شکل خود را به صورت افقی و عمودی تراز کنید

در این مرحله از طراحی لوگو با فیگما باید بر روی دو شکلی که ایجاد کرده‌اید یک کادر قرار داده و آن را بکشید. سپس گزینه‌های «Align Horizontal Centers» و «Align Vertical Centers» در بالای بخش Inspector را انتخاب کنید تا اشکال شما در حالت افقی و عمودی (مطابق با لوگو اینستاگرام) قرار گیرند.

مرحله ششم: دایره دیگری برای طراحی نورسنج دوربین طراحی کنید

در این مرحله نیز باید دایره دیگری برای طراحی بخش نورسنج دوربین (Light meter) ترسیم کنید. ابعاد این دایره باید 8 پیکسل در 8 پیکسل باشد و طوری تنظیم شود تا به صورت سفید توپر در بدنه اصلی لوگو قرار گیرد. این دایره را طوری قرار در شکل قرار دهید که در سمت راست بالای مستطیل باشد (4 پیکسل از بالا و 4 پیکسل از سمت راست).

نکته: شما می‌توانید موقعیت هر شکل نسبت به شکل دیگر در لوگوی خود را با انتخاب شکل موردنظر، نگه داشتن گزینه (Mac) یا Alt (PC) و همچنین نگه داشتن ماوس بر روی شکل دوم، مورد بررسی قرار دهید و در صورت عدم هماهنگی نیز ابعاد و یا فاصله آنها از یکدیگر را تغییر دهید.

مرحله هفتم: استفاده از گزینه « Boolean operations» جهت تبدیل دوربین به یک شکل مستقل

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

در این مرحله از طراحی لوگو با فیگما باید شکل کلی دوربین عکاسی را بسازیم؛ از این رو می‌بایست هر سه شکلی که تا به اینجای کار طراحی کرده‌اید (مستطیل با گوشه‌های گرد و دو دایره) را انتخاب کرده و سپس بر روی فلش کوچک در کنار نماد Boolean Groups در بالای رابط کلیک کنید و پس از آن نیز گزینه Subtract Selection را انتخاب نمایید. در آخر باید از دستور Flatten برای تبدیل دوربین به یک شی وکتور استفاده کنید. پس از انتخاب لوگو، ⌘E (Mac) یا CtrlE (PC) را فشار دهید؛ انجام این کار به این معنای آن است که اندازه شکل به درستی تغییر پیدا خواهد کرد.

مرحله هشتم: با استفاده از ابزار Pen یک باکس سه بعدی طراحی کنید

تا این مرحله از تمرین طراحی لوگو با فیگما تنها لوگوی خود را با استفاده از اشکال و ابزار Boolean Groups طراحی کرده‌ایم. اما برای ساخت لوگو با فیگما همچنین می‌توانیم از ابزار قلم (Pen) نیز برای ترسیم برخی اشکال و نمادها استفاده کنیم. ابزار Pen در فیگما دارای قابلیت‌های کاربردی مختلفی است که به آن vector networks هم گفته می‌شود.

بسیاری از برنامه‌های طراحی گرافیک همچون فوتوشاپ (Photoshop)، ایلاستریتور (Illustrator) و یا اسکچ (Sketch) نیز دارای ابزار Pen هستند که در برخی برنامه‌ها تحت عنوان ابزار Vector هم آورده می‌شوند. بسیاری از کاربران از قابلیت‌های این ابزار مطلع نیستند و معمولا برای طراحی لوگو با فیگما از آن استفاده نمی‌کنند؛ زیرا تصور می‌کنند که با ابزار قلم تنها می‌توان نقاط یک شکل را به یکدیگر متصل کرد. اما نرم افزار فیگما تحولی بزرگ در کارایی این ابزار به وجود آورد و با افزودن قابلیت vector networksاین ابزار را مجددا طراحی نمود. این بدان معناست که با استفاده از قلم می‌توان یک نقطه را به هر تعداد نقطه دیگر متصل کرد. با ابزار قلم همچنین می‌توانید در زمان تنظیم رنگ کامل (شکل توپر) برای یک شکل، خودتان انتخاب کنید که قسمت پر شده روی کدام یک از مناطق محصور در شکل اعمال شود.

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

مرحله نهم: تمرین ترسیم آیکون های مختلف

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

مرحله دهم: تمرین ویرایش و تراز کردن نقاط درون اشکال

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

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

منبع:

designlab.com/figma-101-course/create-a-logo-and-icon-set