被低估的功能！Figma 图片与蒙版入门指南

大家好，欢迎来到IT知识分享网。

一、图片工具Image Tool

Figma 提供的图片工具在本质上属于矢量图形工具，与形状工具相似。与位图设计软件不同，Figma 通常不会生成图片，而是仅支持从外部导入图片。

01添加图片

添加图片有以下五种方法：

1. 复制粘贴法：首先从外部来源截取或复制图片，然后在Figma的画布中按下Command+V键（Mac）Ctrl+V键（Windows），即可将图片直接粘贴至画布上。
2. 图片导入法：在工具栏中选择图片工具，或者使用快捷键Shift+Command+K（Mac）或Shift+Ctrl+K（Windows），然后选择本地的图片文件，接着用鼠标单击画布上的空白区域以插入图片。
3. 拖拽法：将本地计算机中的图片直接拖放至Figma的画布区域，即可实现图片的添加。
4. 矢量填充法：在画布中创建形状工具，例如矩形或圆形，然后在属性面板中选择“填充”（Fill）属性，并设置填充类型为“图片”（Image），随后导入本地图片以完成填充，如下图1所示。

图1 填充图片

5. 矢量粘贴法：从外部来源截取或复制图片后，选中画布中的矢量图形，例如矩形或圆形，然后按下Command+V（Mac）或Ctrl+V（Windows），即可将图片粘贴进矢量图形中。

由于Figma中的图片本质上为矢量图形，因此也可以为其设置填充、描边、圆角、不透明度等样式属性，还可以为其添加阴影、模糊、噪点、纹理等效果。

02图片填充

图片填充模式分为以下四种：

填满Fill

图片将自动调整以适配矢量图形的尺寸。当矢量图形的尺寸被拉伸或压缩时，其内部填充的图片会相应地按比例缩放，以维持视觉一致性。

固定尺寸Fit

在将图片填充到矢量图形中后，图片将保持其原始的宽高比。这可能会导致矢量图形的边缘留有空白区域，如下图2所示。

图2 固定填充

裁剪Crop

在裁剪模式下，位于裁剪框内部的内容将被保留，而位于裁剪框外部的图片部分将被裁切移除。有以下两种方法可以裁剪图片。

• 拖拽移动图片，将要保留的区域移至裁剪框内，此种方法不会改变图形尺寸。
• 拖动裁剪框周围的蓝色手柄，调整图形尺寸，使得图形内部能够显示更多的图片区域。

图3详细展示了这一裁剪操作的过程。

图3 裁剪填充

瓷片Tile

瓷片模式下，瓷片的上方存在一个矩形遮罩层，拖动遮罩层边框上的蓝色手柄可以调整瓷片尺寸，单个瓷片的默认大小不是固定数值，而是为图片原尺寸的50%比例大小。拖拽图形的边框，可以调整图形的尺寸。属性设置面板显示了瓷片尺寸与图片原尺寸的比例关系，即原图的缩放比例，在调整瓷片尺寸的过程中，该缩放比例实时变化。矢量图层尺寸除以单个瓷片尺寸可以计算出瓷片的数量。例如，图层的尺寸为900×900，单个瓷片的尺寸为100×100，则图层内部共有9个瓷片。对于不足一个完整瓷片的区域，图片内容将按比例显示。具体的操作方法详见下图4的说明。

图4 瓷片填充

Tips：上述四种填充模式下，在属性设置面板中，每点击一次旋转则图片向右旋转90度。不仅填充属性可导入图片，描边属性也可导入图片，描边属性中的图片导入方法与填充属性相同。

二、蒙版工具

在特定应用场景中，导入图片时若仅需展示其特定部分，采用蒙版技术是一种效率更高的处理方法。通过将图片与任意形状图形结合，均可实现蒙版效果，以达到仅展示图片特定区域的目的。例如，若需展示图片中的人物头像，可以通过以下步骤实现：

1. 准备素材，导入图片，并创建一个圆。
2. 将圆放置于人物头像上方，并调整大小以完全覆盖头像区域。
3. 调整图层顺序，将圆置于图片下方。
4. 选择图片和圆，鼠标右键单击选择操作菜单 “使用为蒙版（Use as mask）”，以创建蒙版效果。
5. 使用蒙版后，画布将仅呈现圆形区域内的人物头像，同时将原图片的其他区域予以隐藏。

图5详细说明了使用蒙版的操作过程及使用方法。在使用蒙版功能后，可以在图层面板中清晰地观察到Figma已经将圆形蒙版与图片进行了编组处理。

图5 蒙版的使用方法

如下图6所示。蒙版工具本质上是一种视觉遮蔽技术，它使我们能够灵活地控制图片的可视范围，并对图片的其余部分实施视觉上的遮蔽处理。

图6 蒙版的图层结构

从「不会画界面」到「只会画界面」再到「懂用户心理」，这条路我走了 10年 —— 如果你也在进阶，关注我，咱们结伴走得更快。