ساخت منو کشویی در فیگما

مقدمه

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

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

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

مرحله اول: انتخاب Frame

در ابتدای طراحی منو کشویی در فیگما لازم است از منوی ابزار، گزینه Frame را انتخاب کنید. سپس ابعاد فریم را بر اساس نیاز خود تنظیم کنید. می‌توانید برای شروع به طور مثال از ابعاد 400×400 استفاده کنید. فریم در واقع بستر اصلی برای قرارگیری تمام لایه‌ها و اجزای دیگر است و باید با نظم و ساختار مناسب ساخته شود. هرچه ساختار اولیه تمیزتر باشد، مدیریت لایه‌ها در مراحل بعدی راحت‌تر خواهد بود، مخصوصاً زمانی که می‌خواهید افکت‌های حرکتی یا Button ریلی شیشه را اضافه کنید.

مرحله دوم: ترسیم مستطیل و ظریف‌کاری

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

مرحله سوم: اضافه کردن آیکن‌ها

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

مرحله چهارم: ساخت مستطیل دوم

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

مرحله پنجم: افزودن متن

ابزار Text را انتخاب کنید و متن دلخواه خود را بنویسید؛ مانند "Menu" یا "Options" یا "Share Now". سپس متن را روی مستطیل تیره‌تر قرار دهید. Align بسیار مهم است؛ زیرا کوچک‌ترین عدم تراز، ظاهر منو کشویی در فیگما را غیرحرفه‌ای می‌کند. پیشنهاد می‌شود برای هماهنگی با Button ریلی شیشه از فونت‌های ساده و وزن‌های مینیمال استفاده شود.

مرحله ششم: کپی گرفتن از فریم

در این مرحله از کل فریم یک کپی بگیرید و آن را به سمت راست درگ کنید. فریم دوم نسخه‌ای است که منوی بازشده در آن نمایش داده می‌شود. در واقع شما دو وضعیت دارید:
۱. منوی بسته
۲. منوی باز
این ساختار پایه اصلی یک منو کشویی در فیگما است و هنگام Prototype کاملاً لازم خواهد شد.

مرحله هفتم: ایجاد ماسک

از لایه مستطیل زیرین یک کپی تهیه کنید. سپس لایه مستطیل تیره و متن را با این لایه جدید ماسک کنید. ماسک یا مسک کمک می‌کند تا بتوانید انیمیشن باز و بسته شدن منو را شبیه‌سازی کنید و ظاهر حرفه‌ای‌تری داشته باشید. ماسک‌کردن دقیقاً همان تکنیکی است که در Button ریلی برای ایجاد افکت حرکت استفاده می‌شود.

مرحله هشتم: مخفی کردن لایه‌های ماسک‌شده

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

مرحله نهم: تغییر رنگ مستطیل زیرین

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

مرحله دهم: ورود به بخش Prototype

از بالای صفحه به تب Prototype وارد شوید. این بخش کنترل‌کننده اصلی انیمیشن‌ها و رفتارهاست. Prototype باعث می‌شود منو حالت تعاملی پیدا کند و دقیقاً مثل یک منوی واقعی عمل کند. این مرحله یکی از مهم‌ترین بخش‌های ساخت منو کشویی در فیگما است.

مرحله یازدهم: تنظیم While Hovering برای باز شدن

در این مرحله، لایه زیرین را انتخاب کنید و آن را به فریم دوم لینک دهید. سپس Trigger را روی While Hovering بگذارید و مدت زمان را روی 800 ms تنظیم کنید. این کار باعث می‌شود که هنگام رفتن ماوس روی دکمه، منو باز شود. این نوع تعامل در طراحی Button ریلی نیز بسیار کاربرد دارد.

مرحله دوازدهم: تنظیم Mouse Leave برای بسته شدن

به فریم دوم بروید و مستطیل زیرین را به فریم اول لینک دهید. Trigger را Mouse Leave قرار دهید و مدت زمان را 800 ms انتخاب کنید. با این تنظیمات، هنگام خروج ماوس از منو، به‌طور خودکار به حالت اولیه بازمی‌گردد. این حرکت نرم و حرفه‌ای باعث می‌شود منو کشویی در فیگما طبیعی و استاندارد عمل کند.

مرحله سیزدهم: نتیجه نهایی

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

نتیجه‌گیری

ساخت منو کشویی در فیگما یکی از مهم‌ترین مهارت‌هایی است که هر طراح UI/UX باید به آن مسلط باشد. این نوع منو در طراحی‌های مدرن، مینی‌مال و حتی طراحی‌های شیشه‌ای مثل Button ریلی شیشه بسیار کاربرد دارد. در این مقاله یاد گرفتید که چگونه تنها با چند مستطیل، کمی ظریف‌کاری و تنظیمات دقیق Prototype، یک منوی حرفه‌ای طراحی کنید.

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

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