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