品牌型号：联想GeekPro 2020

系统：Windows 10 64位专业版

软件版本：Figma入门版

Figma拥有优秀的矢量图形设计功能，能帮助设计师轻松在线设计产品。同时，Figma也提供了丰富的现成UI组件资源，一键就能应用在设计面板中，可大大提升设计师的工作效率。接下来，一起来学习下Figma怎么使用现成的UI组件，Figma怎么使用剪贴蒙版的相关内容。

一、Figma怎么使用现成的UI组件

Figma在设计面板中内置了丰富的资源，其中包括各种现成的UI组件，可快速添加各种常用的图形、图标等。接下来，本文会简单演示Figma怎么使用现成的UI组件。

首先，如图1所示，点击左侧面板的草稿添加按钮，选择添加“设计文件”。

创建设计文件后，如图2所示，左侧工具栏会默认显示文件面板。如果要使用现成的UI组件资源，需要在左侧工具栏中切换“资源”面板。

在资源面板中，如图3所示，包含了搜索栏以及各种组件库列表。将所需的组件关键字输入搜索栏，即可快速检索所需的UI组件。当然，我们也可以打开列表中的组件库，选择合适的组件使用。

比如打开简单的系统设计元素组件库，如图4所示，可添加各种简单的按钮图标组件。将组件从库拖入设计面板，即可快速添加图标。

添加了图标组件后，选中组件，如图5所示，可在右侧工具栏对组件的属性进行调整，比如调整图标的填充颜色、填充透明度、描边效果、边距等。

二、Figma怎么使用剪贴蒙版

Figma的剪贴蒙版能隐藏部分的图层内容，起到控制图层显示范围的作用。Figma的剪贴蒙版也常作为遮罩使用，图层内被遮挡的区域会隐藏，而未被遮挡的区域则会显示出来。下面一起来看看Figma怎么使用剪贴蒙版。

首先，使用底部的插入图形工具绘制图形以及插入图片。

如图7所示，在设计面板中绘制一个椭圆形，并插入一张图片，以制作椭圆形的剪贴蒙版。在椭圆形蒙版的作用下，图片仅会显示局部的图像。

完成对象的插入后，如图8所示，在Figma左侧的图层面板中，会自动新增两个图层，分别是椭圆形图层与图片图层。

接下来，我们需要将椭圆形设置为剪贴蒙版，右击椭圆形图层，在弹出的右键快捷菜单中选择“设为蒙版”即可。

完成蒙版的设置后，如图9所示，椭圆形图层的上一级会出现一个蒙版组，此时，将图片所在的图层拖到椭圆形图层上方，注意图片图层需添加在蒙版组内。

图层调整效果如图10所示，可以看到，在左侧图层面板中，图片与椭圆形所在的图层均包含在蒙版组内。按照以上图层设置，设计面板中会呈现出椭圆形的遮盖效果，在椭圆形区域的图像会显示出来，反之则会隐藏。

三、小结

以上就是关于Figma怎么使用现成的UI组件，Figma怎么使用剪贴蒙版的相关内容。Figma提供了丰富的组件库资源，可以直接使用到产品设计中，以减少图形绘制的时间，提高工作效率。另外，Figma可利用剪贴蒙版制作局部遮盖的效果，让产品的设计更具变化与多样性。

作者：泽洋