نحوه استفاده از mask در Figma

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

فیگما به‌عنوان یک ابزار طراحی رابط کاربری (UI) و طراحی UX در سال ۲۰۱۶ عرضه شد و از همان ابتدا، قابلیت‌های گسترده‌ای را برای طراحی پدیدار کرد که ویژگی ماسک (Mask) نیز یکی از آن‌ها بود. اگر به دنبال نحوه استفاده از mask در Figma هستید یا اصلاً می‌خواهید بدانید که کاربرد ماسک کردن اشیا در فیگما چیست؟ این مقاله آموزش Figma از گروه نجوانت برای شماست.

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

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

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

چه نوع ماسک‌هایی در فیگما وجود دارد؟

 پیش از اینکه به نحوه استفاده از mask در Figma بپردازیم، بیایید به این سؤال پاسخ دهیم که چه نوع ماسک‌هایی در فیگما وجود دارد. استفاده از ماسک‌ها در طراحی‌های گرافیکی و رابط کاربری بسیار متداول است. انواع مختلفی از Mask کردن وجود دارد که هر کدام کاربردهای خاص خود را دارند:

ماسک‌ برداری (Vector Mask)

 این نوع ماسک‌ها از اشکال برداری برای محدودکردن محتوای لایه‌ها استفاده می‌کنند. شما می‌توانید هر شکلی را به‌عنوان ماسک استفاده کنید.

• اشکال ساده: مستطیل، دایره، چندضلعی و… می‌توانند به‌عنوان ماسک استفاده شوند.
• اشکال پیچیده: اشکال ترکیبی و پیچیده که با ابزار Pen یا سایر ابزارهای ترسیمی فیگما ساخته شده‌اند.

ماسک‌ گروهی (Group Mask)

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

ماسک‌ تصویر (Image Mask)

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

 ماسک‌ کلیپینگ (Clipping Mask)

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

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

 برای اعمال ماسک در فیگما، راه‌های متنوعی وجود دارد. می‌توانید مراحل زیر را دنبال کنید:

ایجاد شکل ماسک: در ابتدا، شما نیاز به دو شی دارید. شکل یا تصویری که می‌خواهید به‌عنوان ماسک استفاده کنید را ایجاد کنید. مثلاً یک تصویر و یک دایره در برد خود add کنید.

انتخاب لایه‌ها: لایه‌ای که می‌خواهید ماسک بر روی آن اعمال شود و شکل ماسک را انتخاب کنید. اگر می‌خواهید ماسک به‌درستی کار کند، شی ماسک باید بالاتر باشد. از قسمت لایه‌ها، این تنظیمات را اعمال کنید.

اعمال ماسک: ماسک کردن در فیگما با سه روش، انجام می‌پذیرد.

•  با کلیک راست و انتخاب گزینه Use as Mask
•  با استفاده از کلید میان‌بر Ctrl+Alt+M (در ویندوز) یا Cmd+Option+M (در مک)
•  اگر روی فریمی که قرار است ماسک شود کلیک کنید در قسمت بالای ورک‌اسپیس فیگما برای شما نمایان می‌شود. با کلیک بر روی این آیکون، شی موردنظر ماسک می‌شود.

 پس از اعمال ماسک، مشاهده خواهید کرد که تصویر، تنها در داخل ناحیه ماسک نمایش داده می‌شود. این به شما اجازه می‌دهد تا بخش‌های خاصی از تصویر را برجسته کنید و نمایش دهید. می‌خواهید لایه را از ماسک خارج کنید؟ نگران نباشید، بسیار آسان است. اگر دوباره از کلیدهای میان‌بر Ctrl+Alt+M استفاده کنید، ماسک غیرفعال می‌شود. راه دیگر برای غیرفعال‌کردن mask، این است که بر روی فریم موردنظر راست کلیک کرده و گزینه remove mask را انتخاب کنید. حال برای اینکه بیشتر با نحوه استفاده از mask در Figma آشنا شوید ما در ادامه برای شما یک آموزش مرحله ای جهت درک بهتر اینکه چطور در فیگما لایه را ماسک کنیم در نظر گرفته‌ایم.

آموزش ماسک کردن اشیا در فیگما

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

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

گام دوم: همان‌طور که از آموزش نحوه استفاده ماسک در فیگما یادگرفتنید، روی نوشته موردنظر کلیک کرده و از کلیدهای میان‌بر Ctrl+Alt+M استفاده می‌کنیم. حالا ما نوشته موردنظر ماسک کرده‌ایم.

گام سوم: عکسی که قرار است در زیر لایه ماسک قرار گیرد را به برد فیگما اضافه می‌کنیم. سپس عکس را به زیر لایه Mask group اضافه می‌کنیم. سپس، مانند ویدئوی زیر باید تصویر موردنظر را به زیر نوشته‌ای که mask کرده‌ایم حرکت دهیم تا جای درست پیدا کنیم.

به همین راحتی شما توانستید در سریعترین زمان ممکن یک نوشته جذاب بسازید. با همین روش می‌توان عکس‌های منحصربه‌فرد گوناگون ساخت و در طراحی استفاده کرد. البته نحوه استفاده از mask در figma به روش بالا خلاصه نمی‌شود. به مثالی که در ویدئو زیر آورده شده توجه کنید.

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

سخن پایانی

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