品牌型号：联想GeekPro 2020

系统：Windows 10 64位专业版

软件版本：Figma入门版

Figma是一款功能相当优秀的UI界面设计软件，既提供了丰富的矢量图形设计功能，也提供了成熟的交互动作设计功能。通过应用Figma的交互设计功能，我们可以轻松添加轻触、悬停、鼠标点击等交互动作，让UI界面的操作更友好。接下来，本文会教大家Figma怎么做蒙版，以及Figma怎么做动画图标的相关内容。

一、Figma怎么做蒙版

Figma的蒙版功能可以将特定的图形转换为蒙版使用，以控制其他图形的显示范围，让图形的设计效果更独特。接下来，让我们通过一个简单的例子学习Figma怎么做蒙版。

1、Figma的蒙版一般会使用图形作为载体，因此，我们需要先绘制图形。如图1所示，使用Figma底部工具栏绘制两个星形，一个作为蒙版，另一个作为应用蒙版的图形，两个星形需要有互相遮盖的部分。

2、完成两个星形的绘制后，如图2所示，在Figma左侧图层面板中，右击星形1的图层，选择将其设置为蒙版。

将星形1设置为蒙版后，如图3所示，星形1图层会被添加到蒙版组中，同时，在画板中的星形1图形会消失不见。

3、接下来，我们需要将星形2图层也添加到蒙版组中，同时星形2图层要保持在星形1图层上方。如图4所示，可以看到，星形2被蒙版遮盖了部分区域。

4、由于蒙版处于隐藏状态，我们难以看清蒙版的遮挡效果。为了更好地观察蒙版遮挡效果，如图5所示，可以展开Figma左上角的菜单功能，依次点击查看-蒙版轮廓功能，来查看Figma的蒙版轮廓。

二、 Figma怎么做动画图标

我们在进行图标设计时，一般会将其设计成静态图形。如果想让图标设计得更独特一点，可以制作成动画图标吗？当然可以，Figma可以通过交互动作的设计，轻松制作动画图标。接下来，一起来学习下具体操作方法。

1、首先，如图6所示，先绘制一个星形并将其填充为浅红色。

2、由于Figma的交互动作需要在画框之间添加，因此我们要为星形添加一个画框。如图7所示，启用底部的画框工具，将上述绘制的星形框起来。

‌3、为了构造动画效果，我们需要制作多个画框对象，让图形呈现出动态变化的效果。如图8所示，右击星形画框，点击“复制”功能。

复制三个画框，如图9所示，并使用位置功能中的“水平间距均分”，将画框水平排列整齐。

4、为了让图形呈现动态变化效果，我们可以为不同画框的星形填充不同颜色，让星形的颜色动态变化。如图10所示，分别为其余两个星形填充蓝色与黄色。

5、最后，在两两画框之间设置交互动作，让画框在指定的时间内自动跳转。

交互设置1、如图11所示，在画框1与画框2之间设置“延迟触发”，并将延迟时间设置为1秒，交互动作导航至画框2。

交互设置2、如图12所示，在画框2与画框3之间设置“延迟触发”，并将延迟时间设置为1秒，交互动作导航至画框3。

交互设置3、如图13所示，在画框3与画框1之间设置“延迟触发”，并将延迟时间设置为1秒，交互动作导航至画框1。

以上设计动画预览效果如图13所示，可以看到，图标呈现动态的颜色变化。除了颜色变化外，还可以设置图形的旋转角度的变化，同样可以简单实现动画效果。

三、小结

以上就是关于Figma怎么做蒙版，Figma怎么做动画图标的相关内容。通过Figma的设置蒙版功能，我们可以轻松将图形转换为蒙版，用以控制其图形的显示范围。除了制作静态图标外，我们还可以利用Figma的交互设计功能轻松制作动画图标，让UI的界面设计更加独特、有趣。

作者：泽洋