figma下载_使用SVGator，Figma和Envato元素对图标进行动画处理

figma下载

在本教程中，我们将从Envato Elements中获取基于SVG的图标，在Figma中进行一些准备修改，然后使用SVGator对其进行动画处理 。 让我们开始吧！

您需要什么

在开始之前，请继续从Envato Elements下载此图标包 。 下载后，解压缩该zip文件并找到编号15的图标，该图标看起来像一个小的键盘和屏幕。

您还需要一个付费SVGator帐户，因为免费试用版没有我们将要使用的功能之一。

1.在Figma中准备文件

我们将要使用的图标与动画所需的图标并不完全相同，因此我们将使用Figma进行一些小的更改。 当然，您可以使用任何喜欢的矢量编辑工具-在本教程中，我们将使用Figma，因为一切都可以使用免费层来完成。

登录到Figma ，创建并打开一个新文件，然后将15图标拖放到界面中以将其导入。

我们将从放大图标开始，以便更轻松地使用它。 为此，请在“ 图层”面板中选择顶层框架，然后在右侧边栏中将高度和宽度从当前的64增加到128：

为什么我们要更改SVG图标？

我们将对图标计算机屏幕上的小线条进行动画处理，但是默认情况下，这些线条实际上没有任何动画效果。 如果我们查看任何行的路径节点，我们将看到：

这是仅具有填充的形状，因此我们将无法以所需的方式对其进行动画处理。 相反，我们需要对其进行转换，使其看起来相同，但实际上是一条应用了笔触的路径，如下所示：

从填充形状转换为带有笔触的路径

没有自动的方法可以将我们的小型计算机屏幕上的七行线从填充的形状转换为带有笔触的路径，因此，我们将重新创建每一行。

首先选择钢笔工具，请注意，钢笔工具实际上比直线工具更易于使用，因为它使您可以更轻松地在网格上居中放置节点。

我们将从在屏幕顶部重新创建第一条蓝线开始。 确保将其放大到足以看到Figma画布上的像素网格。 在网格的左端单击两个单元以创建一个节点：

然后从右端再次单击两个网格单元以创建第二个节点：

然后按Enter键完成该行：

现在我们只需要对笔划进行样式设置，以便我们的新路径看起来像原始的蓝线。

在“ 笔触”面板中，将宽度设置为4。

通过单击宽度设置右侧的三个点图标来打开高级笔画属性：

在上限下拉菜单中，选择Round ：

重新创建线条形状后，我们现在可以将其设置为正确的颜色。 打开笔划颜色选择器，并从另一条蓝线中采样颜色：