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

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

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

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

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

همچنین بخوانید: نحوه سرچ عکس در پینترست

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

• استفاده از ماسک برای تصاویر: ساخت آواتارهای دایره‌ای و قاب‌های گالری
• ماسک با متن در فیگما (Masking With Texts): ایجاد جلوه‌های جذاب با قرار دادن تصویر داخل متن
• ماسک گروهی در فیگما (Masking with Multiple Shapes): ترکیب چند شکل برای ایجاد جلوه‌های پیچیده
• ماسک سفارشی (Customizing Masks): تغییر شکل، اندازه و موقعیت ماسک‌ها برای طراحی‌های حرفه‌ای

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

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

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

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

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

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

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

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

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

همچنین بخوانید: سئو تصاویر

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

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

آموزش ماسک کردن در فیگما (مرحله به مرحله)

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

1. ایجاد شکل برای ماسک

ابتدا یک فرم (مستطیل، Ellipse، یا شکل دلخواه) را روی صفحه بکشید.

2. قرار دادن تصویر یا المان

تصویر مورد نظر را روی شکل قرار دهید تا بتوانید از آن به عنوان ماسک استفاده کنید.

3. مرتب‌سازی لایه‌ها

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

4. فعال سازی ماسک

روی هر دو لایه کلیک کرده و گزینه Use as Mask را انتخاب کنید. حالا تصویر درون شکل ماسک قرار می‌گیرد.

5. تغییر اندازه و انتقال ماسک

می‌توانید تصویر یا شکل ماسک را جابه‌جا کنید یا اندازه آن را تغییر دهید تا نتیجه دلخواه حاصل شود.

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

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

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

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

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

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

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

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

• فعال‌سازی/غیرفعال‌سازی Masks: در هر زمان می‌توانید ماسک را غیرفعال یا حذف کنید.
• استفاده از انواع ماسک در فیگما: Alpha Mask (نوع آلفا)، Vector Mask (نوع برداری) و حتی نوع درخشندگی
• تفاوت بین Alpha Mask و Vector Mask: Alpha Mask برای تصاویر با شفافیت بالا کاربرد دارد و Vector Mask برای شکل‌ها و خطوط برداری مناسب است.
• مشکلات رایج ماسک در فیگما معمولا به دلیل ترتیب نادرست لایه‌ها یا قرار گرفتن تصویر خارج از محدوده ماسک رخ می‌دهد.
• ماسک روی متن و تصویر به شما امکان می‌دهد از تصاویر به عنوان پروتوتایپ یا افکت‌های خلاقانه استفاده کنید.
• کلید میانبر ماسک در فیگما:
  • Ctrl + Alt + M در ویندوز
  • Cmd + Option + M در مک

کلام آخر

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

سوالات متداول