figma怎么用表情（figma正确导入gif）

iseeyu2年前 (2024-05-06)抖音资讯140

表情包真是个好东西，不仅能表达出文字所不能表达的情感，关键时刻甚至能缓解尴尬。我是一个特别喜欢发表情包的人，但又不喜欢总是发那几个表情，所以偶尔也会自己做几个表情包，来回馈广大网友。

以前我基本上都是使用 Photoshop 的帧动画来做表情包，也就是一帧帧地修改图片，最后导出 Gif。比如下面这个表情包，就是我在苹果发布新的 AirPods 时用 Photoshop 做的。

熊猫头

但是最近，在使用 Figma 的过程中我发现 Figma 的 Smart Animate 功能也特别适合做表情包，就尝试做了几个。这一做就一发不可收拾，到现在我甚至觉得 Figma 是最好的表情包制作工具。因为 Figma 是基于 Web 的，不需要繁琐的安装步骤，而且上手也比较快，所以我决定给大家展示一下我是如何使用 Figma 做表情包的，感兴趣的读者也可以尝试一下，自己动手丰衣足食。

Smart Animate（智能动画）是什么？

在此假设大家都知道 Figma 是什么，如果你还是第一次听说可以看一下《网页设计？你也可以——Figma入门》和《我用 Figma 做设计这一年》。Figma 去年发布了一个叫做 Smart Animate 的特性，直译过来就是「智能动画」，它其实是 Figma 中动效的制作方式。Smart Animate 的「智能」之处在于，你只需要画出开始和结束的状态，然后在它们之间连一条线并添加一个触发事件，Figma 就可以帮你自动补全中间帧，形成一个过渡自然的动画。

自动补全中间帧

如上图，我们画了一个初始状态的正方形并复制一个出来，把第二个旋转 45 度，此时在它们之间连上线并添加 Smart Animate，Figma 就可以为我们平滑地生成中间过渡的状态。

做一个简单的魔性笑脸

百闻不如一见，百见不如一试，我们直接上手做一个简单的吧，最终的效果如最右边的那个魔性人脸。这其实就是一个只有两帧（前两个人脸）的循环动画，在它俩之间循环切换就会显得非常魔性。

魔性人脸动画

那么我们开始吧，先画出最左边那张脸，其实也就是组合各种图层。在 Figma 中有一种特别的图层叫做 Frame，可以把它理解为一种容器，里面又可以继续放其它图层，甚至另一个 Frame，而最外层的 Frame 就是画板，而我们要连的线的也在最外层的画板之间。

先点击顶部工具栏中的 Frame 工具，此时鼠标会变为「十」字形。按住 Shift，在画布中拖拽就可以画出一个正方形的 Frame。

画一个正方形 Frame

接下来我们画一个圆盘，也就是最下面的脸。点击顶部工具栏的形状并选择圆形，同样按下 Shift 并在刚才画的 Frame 中拖拽即可画出一个正圆。

画脸

接着我们来画眼睛，每只眼睛是由一个圆形和一个长条组成，我们先画这个长条。选择矩形工具，直接在里面拖拽画一个长方形，这一次不需要按住 Shift 了，因为我们不需要正方形。

画眼睛

它的颜色和圆形是一样的，我们需要在右侧将其改为白色，并给它添加圆角。圆角设置为高度的一半，它的两头就会变为圆形；点击 FILL 之后在颜色选择器中拖拽到左上角直接把它变为白色。

还在画眼睛

现在，我们来画一个圆形的眼珠。画一个和长条一样高的圆形，并将其设置为黑色，移动到长条最左侧。

画眼珠

现在我们画出了左眼，右眼只需要复制一个出来就可以了。点击眼珠选中它，按下 Shift 再点击长条，这样就同时选中了左眼。此时按住 Alt（Option），用鼠标拖拽左眼就可以复制一个右眼出来了。

复制右眼

最后，我们需要画出嘴巴。嘴巴是一个圆弧，在 Figma 中画圆弧也非常方便。我们先画一个圆形，然后拖拽中间的一个 Arc 操控点向上或向下移动，把它变为扇形；接着，由圆心向外拖拽处于圆心的 Ratio 操控点，将其变为一个圆环。

画嘴巴

现在我们画出了第一帧，第二帧只需要复制第一帧，并在它的基础上做一些改动就可以了。还是按住 Alt（Option），用鼠标拖拽整个 Frame，复制出第二帧。在第二帧，我们需要把眼珠向右移，嘴巴也歪向右边。

选中两个眼珠，按方向键 → 将其移到右边。接着，选中嘴巴图层并将鼠标移动到嘴巴图层的正方形外框的一个角上，等光标变为一个弧形时拖拽旋转一定角度。现在，我们就得到了两个帧。

动画的两帧

现在，我们只需要连接这两帧就可以完成这个表情包了。在右侧面板上方选择 Prototype，选中左侧 Frame，上面会出现圆形连接点，拖拽这个连接点把它连接到右侧 Frame。此时会弹出一个动效设置窗口，默认为「点击时从第一个 Frame 跳转到第二个」，下方的动画我们选择为 Smart Animate。