مقدمه:

تکنیک Glassmorphism یا همان افکت Glass، در طراحی UI و UX یکی از سبک‌های مدرن و جذاب است که با بهره‌گیری از مات-سازی (blur)، شفافیت و انعکاس نور، حس شیشه‌ای یا نیمه‌شفافی را به المان‌ها می‌بخشد. این سبک به واسطه ترکیب بک‌گراند رنگی یا تصویری و لایه‌ای شفاف و مات که جلوه‌ای شیشه‌ای به طراحی می‌دهد، توانایی خوب در ایجاد تمرکز بصری روی محتوای اصلی، قوّت بصری بالا و جلوه‌ای لوکس دارد. پیشنهاد میکنم آموزش طراحی آیکن در فیگما را هم ببینید.

مشاهده آنلاین فیلم آموزش ساخت Liquid Glass در فیگما

در این آموزش، قصد داریم نحوه ساخت افکت «Liquid Glass» در Figma را گام‌به‌گام مرور کنیم و با به‌کارگیری ابزارهای فریم، پس زمینه، افکت Glass و تنظیمات آن، یک قطعه طراحی با جلوه شیشه‌ایِ مایع (Liquid) ایجاد کنیم. این کار باعث می‌شود طراحی شما ظاهری حرفه‌ای‌تر، مدرن‌تر و چشم‌گیرتر پیدا کند.

مرحله اول

ابتدا از منوی ابزارها گزینه Frame را انتخاب می‌کنیم و ابعاد موردنظر خود را تعیین می‌کنیم، مثلاً یک فریم با سایز Desktop. در اینجا ما دسکتاپ را انتخاب کرده‌ایم زیرا فضای بیشتری برای مشاهده و تنظیم افکت داریم و راحت‌تر می‌توانیم نتیجه «افکت Glass» را تحت تأثیر بک‌گراند ببینیم. تعیین ابعاد درست در ابتدای کار اهمیت دارد چون نسبت‌ها و میزان Blur یا شفافیت بعدی تحت تأثیر آن خواهند بود.

مرحله دوم

از منوی ابزارها گزینه Actions را انتخاب می‌کنیم. این گزینه به ما اجازه می‌دهد تا عملیات خاصی را روی فریم یا لایه انتخاب‌شده انجام دهیم. مثلاً دسترسی به پلاگین‌ها، تغییر حالت لایه، افزودن افکت یا اجرای اسکریپت‌های از پیش تعریف‌شده. با استفاده از Actions، برای افزودن محتوا یا پس‌زمینه و سپس اعمال افکت Glass فریم ما آماده می‌شود.

مرحله سوم

اگر از قبل پلاگینی به Figma اضافه کرده باشید، اینجا قابل نمایش است؛ مثلاً ما از پلاگین Unsplash for Figma استفاده کرده‌ایم. بخش Abstract را انتخاب و یک تصویر برای پس‌زمینه در نظر می‌گیریم. دقت کنید تصویری را انتخاب کنید که زمانی افکت Liquid Glass روی آن قرار بگیرد، جلوه‌ای زیبا و واضح داشته باشد. مثلاً بک‌گراندی با نورهای نرم، جزئیات ملایم و رنگها که از طریق Blur پس‌زمینه به خوبی مشاهده شوند. اگر پلاگینی ندارید، می‌توانید جداگانه تصویر پس‌زمینه دلخواه را دانلود و اضافه کنید. انتخاب درست تصویر پس‌زمینه بخش مهمی از موفقیت افکت Glass است.

مرحله چهارم

ابزار Frame را دوباره انتخاب می‌کنیم و یک مستطیل به ابعاد دلخواه ترسیم می‌کنیم؛ سپس گوشه‌های آن را گرد می‌کنیم. این مستطیل در واقع همان سطح شیشه‌ای ما خواهد بود که افکت Glass روی آن اعمال می‌شود. گرد کردن گوشه‌ها باعث می‌شود طراحی‌مان مدرن‌تر و نرم‌تر به نظر برسد و به سبک مایع (Liquid) نزدیک‌تر شود. انتخاب ابعاد مناسب، نسبت‌ها و شعاع گوشه‌ها (corner radius) اهمیت دارد تا ضخامت و نوع افکت به خوبی دیده شود.

مرحله پنجم

از منوی کناره صفحه (در پانل سمت راست) بخش افکت‌ها را انتخاب می‌کنیم، فریم (مستطیل) را سلکت کرده و روی ایکون مثبت (+) یعنی «افزودن افکت» می‌زنیم. سپس از منوی افکت‌ها گزینه Glass را انتخاب و اضافه می‌کنیم. با این کار، مستطیل ما به لایه‌ای با ویژگی‌های شیشه‌ای تبدیل می‌شود که زمینه پشت آن تا حدی مات شده، نور را بازتاب می‌دهد و با پس‌زمینه ترکیب می‌شود. برای فعال شدن افکت Glass این مرحله کلیدی است.

مرحله ششم

روی گزینه تنظیمات افکت (Effect Settings) کلیک می‌کنیم و مقادیر دلخواه را برای Blur (مات‌سازی پس‌زمینه)، Depth (عمق)، Intensity (شدت)، Light (نور)، و دیگر پارامترها جهت جذاب‌تر شدن تنظیم می‌دهیم. در این بخش می‌توانید میزان Blur را بالا ببرید تا پس‌زمینه را بیشتر «محو» کنید، شدت نور را تنظیم کنید تا انعکاس یا هایلایت شیشه‌ای دیده شود، و عمق را تغییر دهید تا حس لایه‌ای بودن سطح شیشه‌ای ایجاد شود. این تنظیمات به شما کنترل کامل بر جلوه Liquid Glass می‌دهد.

مرحله هفتم

می‌توانید با ابزار متن، نوشته‌ای روی مستطیل اضافه کنید و همچنین یک دایره همراه با ایکن فلش طراحی کنید که نمایانگر «دکمه شروع» باشد. اکنون کار ما به اتمام رسیده و Liquid Glass ما آماده است. اگر این افکت جذاب Glass در منوی افکت‌ها ندارید، لطفاً در بخش کامنت‌ها بنویسید تا راه‌حل آن (مثلاً به‌روزرسانی Figma یا نصب افزونه) را در آموزش بعدی قرار دهیم. این مرحله بیشتر برای تکمیل طراحی و آماده‌سازی جهت ارائه یا اشتراک‌گذاری پروژه است.

نتیجه‌گیری

در این آموزش یاد گرفتیم چطور تنها با چند ابزار ساده در فیگما، یک افکت Glass حرفه‌ای و مدرن بسازیم که جلوه‌ای شفاف، لطیف و واقعی مثل شیشه روی المان‌های طراحی ایجاد می‌کند. با ترکیب درست نور، عمق و میزان Blur، توانستیم سطحی مایع‌گونه و منعکس‌کننده بسازیم که به آن «Liquid Glass» می‌گویند. این سبک طراحی نه‌تنها در رابط‌های کاربری اپلیکیشن‌ها و وب‌سایت‌ها محبوب است، بلکه به پروژه‌های شما ظاهری مینیمال، لوکس و آینده‌نگر می‌دهد.

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

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

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