火星网校
用 Figma 轻松制作属于自己的表情包
发布时间：2024-08-22 10:38:03 浏览量：262次
发表情包也是一种情感表达方式，能够化解尴尬，我超喜欢发表情包，但又不想老是发那几个，所以偶尔会自己动手制作一些，来回馈广大网友。
熊猫头
以前我通常使用 Photoshop 的帧动画来制作表情包，就是一帧帧地修改图片，最后导出Gif。比如下面这个表情包，就是我在苹果发布新的 AirPods 时用 Photoshop 制作的。
然而，最近我发现在使用 Figma 时，其 Smart Animate 功能也非常适合制作表情包，于是尝试做了几个。一做就停不下来，现在甚至觉得 Figma 是最好的表情包制作工具了。因为 Figma 基于 Web，无需繁琐的安装步骤，而且上手快速，所以我决定给大家展示一下我如何使用 Figma 做表情包，感兴趣的读者也可以尝试一下，动手丰衣足食。
Smart Animate（智能动画）好用在哪里？
如果你对 Figma 不熟悉，可以查看以下文章《网页设计？你也可以——Figma入门》和《我用 Figma 做设计这一年》。去年，Figma 推出了一个叫 Smart Animate 的特性，是 Figma 动效制作的一种方式。Smart Animate 的「智能」之处在于，你只需绘制起始和结束状态，然后在它们之间连接并添加触发事件，Figma 就会自动填充中间帧，生成自然的动画效果。
自动填充中间帧
制作一个有趣的笑脸表情包
百闻不如一见，我们直接动手做一个简单的，最终效果像右边这个有趣的笑脸。它其实是一个只有两帧的循环动画，左右切换会显得特别有趣。
魔性人脸动画
现在让我们开始吧，首先绘制最左边的脸，实际上是组合各种图层。Figma 中有一种特殊的图层叫 Frame，它可以理解为一种容器，里面可以放置其他图层，甚至另一个 Frame，外层 Frame 就是画板，而我们要连接的线也在画板之间。
绘制一个正方形 Frame
接下来，画一个圆盘，也就是下面的脸。选择形状工具，选圆形，在刚才的 Frame 中绘制出一个圆。
绘制脸部
接着，我们来画眼睛，每只眼睛由一个圆形和一条长条组成，先绘制长条。选择矩形工具，在 Frame 中绘制一个长方形。
绘制眼睛
眼睛的颜色要和圆形一样，在右侧将其设置为白色，并添加圆角。颜色选择白色并给予圆角效果。
继续绘制眼睛
接下来，画一个圆形的眼珠。绘制一个和长条一样高的圆形，并设置为黑色，移至长条左侧。
绘制眼珠
现在，左眼完成了，右眼只需要复制一下。选中眼球，按下 Shift 再点击长条，然后按住 Alt（Option）拖动即可复制右眼。
复制右眼
最后，绘制嘴巴。嘴巴是一个圆弧，在 Figma 中制作圆弧也很简单。首先画一个圆形，然后移动中心 Arc 控制点，形成弧形；之后再向外拖动，将其变为环状。
绘制嘴巴
现在，我们绘制了第一帧，第二帧只需要复制第一帧并对其稍作调整。选中 Frame，按住 Alt（Option）拖动，即可复制第二帧。在第二帧中，将眼球向右移动，嘴歪向右边。
选择两个眼球，向右移动，并旋转嘴巴使其倾斜。
动画的两帧
现在，将这两帧连接起来即可完成这个表情包。选择 Prototype，选中左侧 Frame，在上方会出现连接点，将其连接到右侧 Frame。选择 Smart Animate 动画以实现平滑过渡。
连接两帧
点击播放按钮，将会启动一个原型播放界面，点击笑脸，它将自动过渡到第二帧。
动起来了
尽管现在有动画了，但只能播放一次，还需要手动触发，我们希望能循环播放，所以需要做些调整。当前触发条件是点击事件，现在改为 After Delay，即延迟几秒后自动触发。
点击连接线，设置触发条件为 After Delay，时间设为 1 毫秒。
设置触发条件
在右侧会出现一个时间输入框，默认是 800ms，我们需要立即触发，输入 1ms。虽然不能输入 0，但是输入 1 就能实现立即跳转。
立即跳转
现在，我们需要让它从第二帧跳回第一帧，实现循环播放效果。点击 Frame 2，从连接点拖出一条线连接第一帧，同样设置触发为 After Delay，并将时间调整为 1ms。
从第二帧返回
这样，再次转到原型播放界面，这个循环动画就完成了。
有趣的笑脸
如何输出为表情包？
如果想转换为表情包，Figma 本身不支持导出 Gif，通常我会使用 Giphy Capture 进行录制。它支持多种参数调整，还可裁剪片段，点击 SAVE AS 即可保存 Gif，非常方便。
Giphy Capture
制作更复杂的表情包
上面的案例虽然简单，但包含了 Figma Smart Animate 功能的各个方面。掌握原理后，你可以制作更复杂的表情包，如下面的「灵感启示连击」和「汉堡+6」
热门课程推荐
热门资讯
-
想将照片变成漫画效果？这篇文章分享了4个方法，包括Photoshop、聪明灵犀、VanceAI Toongineer、醒图，简单操作就能实现，快来尝试一下吧！
-
2. 华为手机神奇“AI修图”功能，一键消除衣服！原图变身大V领深V！
最近华为手机Pura70推出的“AI修图”功能引发热议，通过简单操作可以让照片中的人物换装。想了解更多这款神奇功能的使用方法吗？点击查看！
-
近年来,人工智能逐渐走入公众视野,其中的AI图像生成技术尤为引人注目。只需在特定软件中输入关键词描述语以及上传参考图就能智能高效生成符合要求的...
-
4. AI视频制作神器Viggle：让静态人物动起来，创意无限！
Viggle AI是一款免费制作视频的AI工具，能让静态人物图片动起来，快来了解Viggle AI的功能和优势吧！
-
5. Logo Diffusion——基于sd绘画模型的AI LOGO 生成器
这下LOGO设计彻底不用求人了。接下来详细演示一遍操作流程首先进入Logo D... 想学习更多AI技能,比如说关于怎么样利用AI来提高生产效率、还能做什么AI...
-
6. 零基础10分钟生成漫画，教大家如何用AI生成自己的漫画
接下来,我将亲自引导你,使用AI工具,创作一本既有趣又能带来盈利的漫画。我们将一起探索如何利用这个工具,发挥你的创意,制作出令人惊叹的漫画作品。让...
-
以下是一些免费的AI视频制作网站或工具,帮助您制作各种类型的视频。 1. Lumen5:Lumen5是一个基于AI的视频制作工具,可将文本转换为视频。 用户可以使...
-
8. AI显卡绘画排行榜:4090无悬念，最具性价比出人意料
在AI绘图领域，Stable Diffusion的显卡绘图性能备受关注。本文整理了Stable Diffusion显卡的硬件要求和性能表现，以及2023年3月显卡AI绘图效率排行榜和性价比排行榜。欢迎查看最新的AI显卡算力排行榜。
-
9. 一款免费无限制的AI视频生成工具火了!国内无障碍访问!附教程
人人都可以动手制作AI视频! 打开网址https://pixverse.ai/,用邮箱注册后,点击右上角Create,就可以开始创作了。 PixVerse目前有文案生成视频,和图片生...
-
就能快速生成一幅极具艺术效果的作品,让现实中不懂绘画的人也能参与其中创作!真的超赞哒~趣趣分享几款超厉害的AI绘画软件,提供详细操作!有需要的快来...
