蒙版
使用蒙版来显示对象的特定区域,同时遮盖其余部分。
这就像将一张照片放在一个带小孔的相框里。您会看到照片的一部分从小孔中露出来,而其余部分则被遮盖,无需裁剪到合适大小。
由于在这个过程中蒙版层的任何部分都不会被修改或删除,因此蒙版是一种非破坏性操作。这允许你保留被遮盖的区域,而无需将其裁剪以适应。
如何使用蒙版
任何图层都可以用作蒙版,包括矢量形状、文本图层、带有透明通道的图像、组等。
当你将图层用作蒙版时,会创建一个蒙版对象,该对象包含蒙版本身以及它所遮罩的任何图层。在左侧导航面板的图层部分可以识别蒙版对象。蒙版图标会标示出蒙版,并在遮罩的图层上显示一个向上的箭头。
蒙版在 Z 轴上位于被蒙版图层下方。蒙版适用于它上方的所有同级图层,直到它遇到:
另一个蒙版或蒙版对象
蒙版的父框架或组
带有裁剪内容的框架或组件
了解更多关于父级、同级和子级关系→
在下方示例中,紫色椭圆充当蒙版。如果蒙版在 Z 轴上位于人物图像下方,它将成功蒙住该图像。如果蒙版位于图像上方,则不会蒙住。
蒙版类型
Alpha
Figma 中的所有蒙版都支持 alpha 通道。Alpha 通道表示颜色、图像或对象中的透明度或不透明度。
在使用 alpha 蒙版时,蒙版会根据蒙版的不透明度应用。不透明度越高,显示的内容就越多。零不透明度则显示 nothing。
这意味着我们可以在蒙版中使用模糊和透明度:
导入具有透明度(alpha 通道)的现有 PNG、GIF 和 WebP 文件
使用图层模糊效果来复制羽化效果
应用阴影和内阴影来创建深度
添加具有不同不透明度的填充、描边和渐变
在下面的示例中,我们使用了一个带外描边的椭圆作为遮罩。椭圆填充的透明度是 100%,描边的透明度是 30%。图像中心显示得更多,因为遮罩的透明度更高(100%)。
Vector 矢量
Vector masks, or using shape outlines as masks, ignore the translucency—or opacity value of more than zero percent—of a mask's fill or stroke. If a mask contains any area with an opacity of more than zero percent, then its outlines are used as the mask and the entire mask assumes 100% opacity.矢量遮罩,或使用形状轮廓作为遮罩,会忽略遮罩填充或描边的半透明性——即不等于零百分比的透明度值。如果一个遮罩包含任何不等于零百分比的透明度区域,那么其轮廓会被用作遮罩,并且整个遮罩会呈现 100%的透明度。
In the example below, an image of a heart with a completely transparent background is being used as a mask. The object on the bottom-left is using an alpha mask, so we see the outline of the heart. The object on the bottom-right is using a vector mask, and uses the outline of the entire image as the mask.在下面的示例中,一个完全透明的背景的心形图像被用作遮罩。左下方的对象使用的是 alpha 遮罩,所以我们能看到心形的轮廓。右下方的对象使用的是矢量遮罩,并使用整个图像的轮廓作为遮罩。
Luminance 亮度
Luminance allows you to use brightness to determine a mask. The brighter the area of a mask, the more that is revealed, or in other words, the higher the opacity of the layers being masked.亮度允许你使用亮度来确定蒙版。蒙版区域越亮,显示的内容越多,换句话说,就是被蒙版图层的透明度越高。
The darker the area, the less that is revealed. If a mask has a black fill, or #000000
, this will reveal nothing and masked layers render at zero percent opacity.区域越暗,显示的内容越少。如果一个蒙版填充为黑色,或 #000000
,这将不会显示任何内容,并且被蒙版的图层将以零不透明度渲染。
创建和编辑蒙版
创建蒙版
- Choose an object you want to use as your mask, and place it behind all objects that'll be masked on the z-axis.
选择一个你想要用作蒙版的对象,并将其在 z 轴上放置到所有将要被蒙版遮罩的对象后面。
- Select all layers that will be a part of the mask object.
选择所有将要成为蒙版对象一部分的图层。
- From the right sidebar, selectMore options > Use as mask, or press:
从右侧边栏,选择更多选项 > 使用为蒙版,或按下:
Mac:⌃ Control ⌘ Command M
Windows:Ctrl Alt M
注意:如果你只选择了一个图层,直接从右侧边栏选择使用为蒙版。
Figma 将使用所有选中的图层创建一个蒙版组。
默认情况下,蒙版类型设置为 Alpha。要更改它,请选择用作蒙版的图层,并打开右侧边栏蒙版部分的下拉菜单。将鼠标悬停在任何选项上,即可在画布上预览。
要向现有的蒙版对象添加图层,请使用图层面板点击并拖动它们到蒙版对象中。
Resize and move 调整大小和移动
蒙版和被蒙版图层可以独立移动和调整大小。这意味着当你移动或调整蒙版大小时,任何被蒙版的图层将不受影响,反之亦然。
这是因为它们互为兄弟关系,所以蒙版没有框架、组或组件可能具有的父子关系。
Remove a mask 删除遮罩
要停止将对象用作遮罩,可以使用以下任何一种方法将其关闭:
选中遮罩并在右侧边栏中点击
右键点击蒙版并选择移除蒙版(Remove mask)
选中蒙版并使用键盘快捷键:
Mac:⌃ Control ⌘ Command M
Windows:Ctrl Alt M
被遮罩隐藏的部分将会重新显示。
Reveal mask outlines 显示遮罩轮廓
默认情况下,Figma 不会显示遮罩的边界。在处理复杂遮罩或检查无意中产生的空白区域时,请使用遮罩轮廓。
切换遮罩轮廓:
打开 Figma 菜单 。
前往视图 > 遮罩轮廓。
开启该设置后,文件中的遮罩将以绿色轮廓显示。
注意:如果所有被遮罩的图层都被隐藏或透明度为零,则对象的遮罩轮廓将不会显示。