آموزش کامل ماسک کردن در فیگما Masks in Figma

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

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

 

ماسک‌ها چطور کار می‌کنن (How masks work)

 

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

پیدا کردن این ماسک‌ها توی پنل لایه‌ها آسونه چون با یه آیکون خورشید گرفتگی مشخص شدن. لایه‌هایی که توسط ماسک شکل داده میشن یه فلش رو به بالا دارن.

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

 

ایجاد یه ماسک (Creating a mask)

 

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

برای ساخت ماسک، روی آیکون خورشید گرفتگی توی نوار ابزار بالا کلیک کنین (یا اگر فیگمای شما از آخرین آپدیت استفاده میکنه، در بالای منوی سمت راست یا همون پنل طراحی، سه نقطه، و آیکون خورشید گرفتگی) یا از کلید میانبر زیر استفاده کنین:

• مک: Control + Command + M
• ویندوز: Ctrl + Alt + M

به طور پیش‌فرض، ماسک شما روی Alpha تنظیم شده، اما می‌تونین اون رو تغییر بدین. روی لایه ماسک کلیک کنین و یه نوع جدید رو از منوی کشویی Mask توی پنل Design انتخاب کنین. موس رو روی گزینه‌ها نگه دارین تا پیش‌نمایش اونا رو مستقیماً روی بومتون ببینین.

نکته حرفه‌ای! برای اضافه کردن لایه‌های بیشتر به ماسک خودتون، اونا رو توی گروه ماسک توی پنل لایه‌ها بکشین.

 

نوع آلفا (Alpha type)

 

ماسک‌ها با کانال‌های آلفا به شما اجازه میدن سطوح شفافیت رنگ‌ها، تصاویر یا اشیاء رو کنترل کنین و چندین کاربرد عملی رو ارائه میدن:

• وارد کردن شفافیت: تصاویری مثل فایل‌های PNG، GIF یا WebP رو با کانال‌های آلفا وارد کنین تا شفافیت پیچیده رو بدون زحمت وارد کنین، مثل لوگوها با لبه‌های محو شونده.
• محو کردن با آسانی: محو کردن لبه‌های تصاویر یا متن رو با کمی تار کردن اونا نرم می‌کنه و انتقال‌ها رو صاف‌تر و طبیعی‌تر می‌کنه. ماسک‌های آلفا اعمال این افکت رو ساده می‌کنن.
• عمق و سایه‌ها: از ماسک‌های آلفا برای اضافه کردن سایه‌های واقعی و عمق استفاده کنین و ظاهر سه بعدی طرح‌های خودتون رو افزایش بدین.
• کدری (Opacity): با ماسک‌های آلفا، می‌تونین طرح‌هایی رو با پر کردن‌ها، خطوط و گرادیان‌ها با کدری متغیر ایجاد کنین و افکت‌های پیچیده‌ای مثل دکمه‌ها با حاشیه‌های شفاف که به طور یکپارچه با رابط ترکیب میشن رو ممکن می‌کنه.

 

نوع برداری (Vector type)

 

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

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

 

نوع درخشندگی (Luminance type)

 

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

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

 

تغییر اندازه و جابجایی ماسک‌ها (Resizing and moving masks)

 

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

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