蒙版

使用蒙版来显示对象的特定区域,同时遮盖其余部分。

这就像将一张照片放在一个带小孔的相框里。您会看到照片的一部分从小孔中露出来,而其余部分则被遮盖,无需裁剪到合适大小。

由于在这个过程中蒙版层的任何部分都不会被修改或删除,因此蒙版是一种非破坏性操作。这允许你保留被遮盖的区域,而无需将其裁剪以适应。

如何使用蒙版

任何图层都可以用作蒙版,包括矢量形状、文本图层、带有透明通道的图像、组等。
mask visualization

当你将图层用作蒙版时,会创建一个蒙版对象,该对象包含蒙版本身以及它所遮罩的任何图层。在左侧导航面板的图层部分可以识别蒙版对象。蒙版图标会标示出蒙版,并在遮罩的图层上显示一个向上的箭头。
identify mask group and objects on layers panel
蒙版在 Z 轴上位于被蒙版图层下方。蒙版适用于它上方的所有同级图层,直到它遇到:
另一个蒙版或蒙版对象
蒙版的父框架或组
带有裁剪内容的框架或组件
了解更多关于父级、同级和子级关系→

在下方示例中,紫色椭圆充当蒙版。如果蒙版在 Z 轴上位于人物图像下方,它将成功蒙住该图像。如果蒙版位于图像上方,则不会蒙住。

mask_z-axis

蒙版类型

Alpha

Figma 中的所有蒙版都支持 alpha 通道。Alpha 通道表示颜色、图像或对象中的透明度或不透明度。

在使用 alpha 蒙版时,蒙版会根据蒙版的不透明度应用。不透明度越高,显示的内容就越多。零不透明度则显示 nothing。

这意味着我们可以在蒙版中使用模糊和透明度:

导入具有透明度(alpha 通道)的现有 PNG、GIF 和 WebP 文件

使用图层模糊效果来复制羽化效果

应用阴影和内阴影来创建深度

添加具有不同不透明度的填充、描边和渐变

在下面的示例中,我们使用了一个带外描边的椭圆作为遮罩。椭圆填充的透明度是 100%,描边的透明度是 30%。图像中心显示得更多,因为遮罩的透明度更高(100%)。

A mask that has an outside stroke with 30 percent opacity

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 遮罩,所以我们能看到心形的轮廓。右下方的对象使用的是矢量遮罩,并使用整个图像的轮廓作为遮罩。

heart png used in an alpha mask and a vector mask

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 ,这将不会显示任何内容,并且被蒙版的图层将以零不透明度渲染。

luminance mask type

创建和编辑蒙版

创建蒙版

  1. 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 轴上放置到所有将要被蒙版遮罩的对象后面。

  1. Select all layers that will be a part of the mask object.

选择所有将要成为蒙版对象一部分的图层。

  1. From the right sidebar, selectMore options > Use as mask, or press:

从右侧边栏,选择更多选项 > 使用为蒙版,或按下:

Mac:⌃ Control ⌘ Command M

Windows:Ctrl Alt M

注意:如果你只选择了一个图层,直接从右侧边栏选择使用为蒙版。

Figma 将使用所有选中的图层创建一个蒙版组。

默认情况下,蒙版类型设置为 Alpha。要更改它,请选择用作蒙版的图层,并打开右侧边栏蒙版部分的下拉菜单。将鼠标悬停在任何选项上,即可在画布上预览。

alt

要向现有的蒙版对象添加图层,请使用图层面板点击并拖动它们到蒙版对象中。

了解更多关于重新排序图层 →

Resize and move 调整大小和移动

蒙版和被蒙版图层可以独立移动和调整大小。这意味着当你移动或调整蒙版大小时,任何被蒙版的图层将不受影响,反之亦然。

reposition and resize layers in a mask object

这是因为它们互为兄弟关系,所以蒙版没有框架、组或组件可能具有的父子关系。

了解更多关于父子、兄弟和子层级关系 →

Remove a mask 删除遮罩

要停止将对象用作遮罩,可以使用以下任何一种方法将其关闭:

选中遮罩并在右侧边栏中点击

右键点击蒙版并选择移除蒙版(Remove mask)

选中蒙版并使用键盘快捷键:

Mac:⌃ Control ⌘ Command M

Windows:Ctrl Alt M

被遮罩隐藏的部分将会重新显示。

Reveal mask outlines 显示遮罩轮廓

默认情况下,Figma 不会显示遮罩的边界。在处理复杂遮罩或检查无意中产生的空白区域时,请使用遮罩轮廓。

切换遮罩轮廓:
打开 Figma 菜单


前往视图 > 遮罩轮廓。

开启该设置后,文件中的遮罩将以绿色轮廓显示。

注意:如果所有被遮罩的图层都被隐藏或透明度为零,则对象的遮罩轮廓将不会显示。