Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
表情包真是个好东西，不仅能表达出文字所不能表达的情感，关键时刻甚至能缓解尴尬。我是一个特别喜欢发表情包的人，但又不喜欢总是发那几个表情，所以偶尔也会自己做几个表情包，来回馈广大网友。
以前我基本上都是使用 Photoshop 的帧动画来做表情包，也就是一帧帧地修改图片，最后导出 Gif。比如下面这个表情包，就是我在苹果发布新的 AirPods 时用 Photoshop 做的。
但是最近，在使用 Figma 的过程中我发现 Figma 的 Smart Animate 功能也特别适合做表情包，就尝试做了几个。这一做就一发不可收拾，到现在我甚至觉得 Figma 是最好的表情包制作工具。因为 Figma 是基于 Web 的，不需要繁琐的安装步骤，而且上手也比较快，所以我决定给大家展示一下我是如何使用 Figma 做表情包的，感兴趣的读者也可以尝试一下，自己动手丰衣足食。
在此假设大家都知道 Figma 是什么，如果你还是第一次听说可以看一下《网页设计？你也可以——Figma入门》和《我用 Figma 做设计这一年》。Figma 去年发布了一个叫做 Smart Animate 的特性，直译过来就是「智能动画」，它其实是 Figma 中动效的制作方式。Smart Animate 的「智能」之处在于，你只需要画出开始和结束的状态，然后在它们之间连一条线并添加一个触发事件，Figma 就可以帮你自动补全中间帧，形成一个过渡自然的动画。
如上图，我们画了一个初始状态的正方形并复制一个出来，把第二个旋转 45 度，此时在它们之间连上线并添加 Smart Animate，Figma 就可以为我们平滑地生成中间过渡的状态。
百闻不如一见，百见不如一试，我们直接上手做一个简单的吧，最终的效果如最右边的那个魔性人脸。这其实就是一个只有两帧（前两个人脸）的循环动画，在它俩之间循环切换就会显得非常魔性。
那么我们开始吧，先画出最左边那张脸，其实也就是组合各种图层。在 Figma 中有一种特别的图层叫做 Frame，可以把它理解为一种容器，里面又可以继续放其它图层，甚至另一个 Frame，而最外层的 Frame 就是画板，而我们要连的线的也在最外层的画板之间。
先点击顶部工具栏中的 Frame 工具，此时鼠标会变为「十」字形。按住 Shift，在画布中拖拽就可以画出一个正方形的 Frame。
接下来我们画一个圆盘，也就是最下面的脸。点击顶部工具栏的形状并选择圆形，同样按下 Shift 并在刚才画的 Frame 中拖拽即可画出一个正圆。
接着我们来画眼睛，每只眼睛是由一个圆形和一个长条组成，我们先画这个长条。选择矩形工具，直接在里面拖拽画一个长方形，这一次不需要按住 Shift 了，因为我们不需要正方形。
它的颜色和圆形是一样的，我们需要在右侧将其改为白色，并给它添加圆角。圆角设置为高度的一半，它的两头就会变为圆形；点击 FILL 之后在颜色选择器中拖拽到左上角直接把它变为白色。
现在，我们来画一个圆形的眼珠。画一个和长条一样高的圆形，并将其设置为黑色，移动到长条最左侧。
现在我们画出了左眼，右眼只需要复制一个出来就可以了。点击眼珠选中它，按下 Shift 再点击长条，这样就同时选中了左眼。此时按住 Alt（Option），用鼠标拖拽左眼就可以复制一个右眼出来了。
最后，我们需要画出嘴巴。嘴巴是一个圆弧，在 Figma 中画圆弧也非常方便。我们先画一个圆形，然后拖拽中间的一个 Arc 操控点向上或向下移动，把它变为扇形；接着，由圆心向外拖拽处于圆心的 Ratio 操控点，将其变为一个圆环。
现在我们画出了第一帧，第二帧只需要复制第一帧，并在它的基础上做一些改动就可以了。还是按住 Alt（Option），用鼠标拖拽整个 Frame，复制出第二帧。在第二帧，我们需要把眼珠向右移，嘴巴也歪向右边。
选中两个眼珠，按方向键 → 将其移到右边。接着，选中嘴巴图层并将鼠标移动到嘴巴图层的正方形外框的一个角上，等光标变为一个弧形时拖拽旋转一定角度。现在，我们就得到了两个帧。
现在，我们只需要连接这两帧就可以完成这个表情包了。在右侧面板上方选择 Prototype，选中左侧 Frame，上面会出现圆形连接点，拖拽这个连接点把它连接到右侧 Frame。此时会弹出一个动效设置窗口，默认为「点击时从第一个 Frame 跳转到第二个」，下方的动画我们选择为 Smart Animate。
现在，点击顶部的播放按钮，就会打开一个新的原型播放界面，点击笑脸，它就会自动过渡到第二帧。
现在虽然可以动了，但是只能播放一次，还必须要点击一下，而我们要的效果是自动循环播放，我们需要改一下触发条件。目前的触发条件是点击事件，现在我们把它改为 After Delay，也就是延迟几秒自动触发。
点击连接线，它会自动弹出动效设置窗口，点击最上面的 On Click，将其切换为最后一个 After Delay。
此时在右侧会出现一个时间输入框，默认是 800ms（800 毫秒）但是我们需要的是立即触发，也就是 0ms，但是此处不能输入 0，所以我们输入一个 1，也就是在 1ms 之后开始跳到下一帧。因为 1ms 对我们来说几乎是无感知的，所以它的效果就是立即跳到下一帧。
现在，我们还需要让它跳到第二帧之后从第二帧回到第一帧，以达到循环播放的效果。点击 Frame 2，从连接点拖拽出一根线连接到第一帧，我们也给他设置触发条件为 After Delay，并把时间设置为 1ms。
这样，再次回到原型播放界面，可以看到这个循环动画就完成了。
现在问题来了，我们如何把这个效果转变为表情包呢？Figma 本身不带导出 Gif 的功能，我一般是用 Giphy Capture 来录制的。它支持多种参数调节，还可以截取片段，确定后点击下面的 SAVE AS 就可以保存 Gif 了，非常方便。
上面的示例最终的效果很简单，但是却包含了 Figma Smart Animate 功能该如何使用的方方面面。了解了原理之后，你可以用它做出一些更加复杂的表情包，比如下面的「少数派一键三连」和「汉堡🍔+6」。
这些复杂一点的表情包需要事先拆解出每一帧，并规划好图层位置，如果感兴趣的话可以查看我的 源文件，复制到你的草稿箱研究一下（需要登录账号）。
最后不由得感叹一下 Figma 真的是设计行业的 GitHub，可以开源自己的设计，互相学习切磋并且不用重复造轮子。最后再发几个我用 Figma 做的表情包，希望你也玩得开心。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。