【图文教程】不需代码！Figma里这样完成悬浮FAB按钮制作，半小时搞定！

今天我们来做一个FAB按钮，此类按钮在安卓设计中非常常见，它一般悬浮在页面右下角，可以快捷打开某个操作。

在本课中，我们的重点是智能动画（smart animation）。智能动画创建状态之间的转换。它将寻找状态之间对象的变化并在它们之间进行动画处理。从设计的角度来看，我们设计了开始和结束状态，智能动画将创建两种状态之间的过渡。

001.分层

智能动画中最重要的因素是适当的分层和命名。智能动画将分析图层更改并为其设置动画。重要的是我们在两种状态下都有所有层，即使它们没有在一种状态下显示。在两种状态下如果没有相同的层，智能动画就无法发挥它的魔力。

我们还希望有目的地组织我们的图层。在实例之间切换层顺序可能会导致不良影响。有时我们追求这种效果。所以当你认为有必要时打破这个规则。

002.命名

层命名也很重要。我们图层的名称在每个状态中必须相同，智能动画才能正常工作。如果它们的名称不同，智能动画会假定图层是不同的对象。我发现最好命名我们的图层，然后复制以保持图层的命名和组织。

003.设计属性

智能动画可以检测任何设计属性的变化。我们可以更改任何图层的大小、位置、旋转、自动布局属性、约束、填充和描边。我们可以单独使用这些，也可以一起使用，这取决于我们追求的效果。

004.过渡类型

在智能动画中，我们可以从多种过渡类型中进行选择。每种过渡类型都会在状态之间创建不同的动画。这些转换可以是个人喜好。花一些时间来处理每种类型，看看它们如何改变动画的感觉。

005.创建步骤：

1. 创建并命名 4 个按钮：添加、发表、媒体、语音

我们将从最终状态开始。对于这个组件，我们需要 4 个圆形按钮，每个按钮都有一个图标。一个按钮将是我们的主按钮，其他将是子菜单按钮。我们将相应地命名每个按钮：添加（Add）、发表（Write）、媒体（Media）、语音（Speak）。

设计提示：将组添加到图标层并应用自动布局 - 居中。将您的填充添加到自动布局图层。添加填充和角半径以达到所需的效果。这使我们能够以更少的层次更快地进行更改。

2.在'Add'按钮周围添加框架，命名为'Action Button'，取消选中'Clip Content'

取消选中剪辑内容允许我们在框架之外显示元素。这将允许我们在状态之间保持组件大小相同。此外，由于此按钮在滚动时具有固定位置，因此我们可以在状态更改时保持对齐。

3.组织和对齐按钮

移出子菜单项并添加到操作按钮框架。确认“add”按钮层是顶层。对于间距，我将“edit”对齐在“Add”按钮上方 32 像素，“speak”在“add”左侧 32 像素，最后是媒体，在“speak”上方 16 像素，在“edit”左侧 16 像素。

4.复制Action按钮框架，将所有项目居中对齐

这将是我们的关闭状态。选中所有项目后，居中对齐。

快速提示：选中所有项目后，先对齐右下角，然后对齐中心。如果我们首先对齐中心，所有项目都会移动到中心，这需要我们然后将框架中的所有层重新居中。这样我们也可以快速与框架对齐。

5.旋转添加按钮图标-45度

回到打开状态，旋转添加图标，使加号图标变成关闭图标的效果。如果使用自动布局，请确保我们的框架高度和宽度设置为“固定”。

6.创建组件集，命名实例

我们将分别命名属性“状态”和变体打开和关闭。

7. 将所有的状态放在一起

从关闭状态的添加按钮到打开状态，反之亦然

8.设置智能动画

在我们的交互详细信息窗格中，选择智能动画。选择过渡类型，“缓出并重新加入”。随意弄乱时间。我使用了默认的 300 毫秒。

9. 将动作按钮实例添加到框架，设置约束并检查固定位置

现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后，检查固定位置，以在滚动时将其保持在原位。

然后点击预览，一个好玩好用的FAB按钮就制作好了。

原文：https://uxplanet.org/get-the-most-out-of-smart-animate-6403e252227c

作者：Brian Laiche 翻译：静电