使用 Anima 在几分钟内从设计到开发人员友好的 React 代码

这是一篇友好的赞助文章，在我们亲爱的 Anima 朋友的支持下撰写，他们帮助您使用 Sketch、Figma 或 Adob​​e XD 设计完全交互式的高保真原型。 谢谢！

无缝设计到代码翻译的承诺可以追溯到早期的所见即所得页面构建器。 尽管目标令人钦佩，但他们最大的缺陷（在众多缺陷中）是他们生成的可怕代码。 直到今天仍然存在怀疑，每当这个想法再次出现时，最大的担忧总是与代码的质量和可维护性有关。

随着新产品朝着正确的方向飞跃，这种情况即将改变。 他们的最终目标是自动化设计到代码的过程，但不以牺牲代码质量为代价。 其中一款产品 Anima 正试图通过为开发平台提供成熟的设计来最终弥合差距。

什么是阿尼玛？

Anima 是一种从设计到开发的工具。 它旨在将设计移交过程转变为持续的协作。 设计师可以使用 Anima 创建完全响应的原型，其外观和工作方式与成品完全相同（无需编码）。 反过来，开发人员可以采用这些设计并将它们导出为对开发人员友好的 React/HTML 代码。 他们无需从头开始编写 UI，而是可以自由地专注于逻辑和架构。

它借助一个插件直接连接到您的设计工具并允许您配置设计并将它们同步到 Anima 的网络平台。 这就是团队的其他成员可以访问原型、讨论它并选择有用的规范或资产的地方。 除了协作功能外，由于生成的代码，它还为开发人员提供了先机。

这可能会对设计师和开发人员之间传统的来回舞蹈产生很大的影响。 它将所有内容保持在一个地方，保持同步，并允许双方使用代码或设计工具进行更改。

安装插件并设置项目

开始使用 Anima 很简单。 您首先需要创建一个帐户，然后安装插件。 虽然我将在本演练中使用 Figma，但 Anima 支持所有主要的设计工具：Sketch、Figma 和 Adob​​e XD。

• 素描动画
• Figma 动画
• Adobe XD 动画

完成此操作后，请确保您在 Anima 的平台上创建了一个项目——当我们同步它们时，我们的设计将出现在该平台上。

插件本身分为三个主要部分，每个部分都有一个选项列表。 我们要做的大部分工作只是简单地选择其中一个选项，然后在 Figma 中应用特定的图层或框架。

创建响应式原型

出于本文的目的，我们设计了一种将转变为交互式原型的入职体验。 到目前为止，我们已经为三个最常见的断点准备了屏幕，并使用 Figma 的原型设计功能将它们链接在一起。

我们可以使用 Anima 实现的有趣的事情之一是制作适合所有屏幕尺寸的原型。 由可点击图像制成的传统原型是静态的，并且经常在不同的屏幕尺寸下失败。

为此，请单击“断点”选项，Anima 会询问您要连接的帧。 选择所有帧以将它们添加为断点。 然后单击“完成”确认您的选择。

准备好后，单击“在浏览器中预览”以查看结果。 届时，Anima 会将您的设计转换为代码。

您会注意到的第一件事是原型现在已转换为 HTML 和 CSS。 所有内容都是可选择的，并随着屏幕大小的调整而重排。 当您在原型预览器中选择“响应式”模式并使用不同的屏幕尺寸播放时，这一点最为明显。

为了实现更平滑的过渡，在设计组件时使用 Figma 的约束功能非常重要。 确保还选中插件“布局”部分中的“使用 Figma 约束”框。

使用智能图层让您的设计栩栩如生

我们可以更进一步。 由于 Anima 将设计转换为代码，因此我们可以添加的东西以使我们的原型更加逼真的可能性是无穷无尽的。

动画和悬停效果将是使原型更加生动并给利益相关者留下深刻印象的好方法。 Anima 提供了多种可应用于任何层或组件的选项。 在我们的例子中，我们将选择标题层，然后选择“入口动画”和“淡入”。 在延迟字段中，我们将添加0.5 。

对于每个字段，我们将在悬停时添加发光效果。 选择字段层，然后选择“悬停效果”并选择“发光”。 对按钮重复相同的操作。

现在我们已经应用了所有的更改，我们可以看到原型开始感觉像是一个真正的产品。

Anima 提供的独特功能之一是能够向原型添加实时字段和表单。 由于我们正在设计一种入职体验，这实际上对我们非常有用。 数据输入是任何产品体验中最大的流失点之一，如果不考虑它，很难测试出想法。

与我们添加之前的效果类似，我们现在选择字段组件并选择“文本字段”。 从那里，我们必须选择我们需要的字段类型。 例如，如果我们选择密码字段，输入将被隐藏，Anima 将向该字段添加显示/隐藏功能。

如您所见，字段现在按预期工作。 还可以在电子表格中收集从这些字段中收集的所有数据。 选择“继续”按钮，然后单击 Anima 中的“提交按钮”选项。 这将打开一个额外的对话框，我们需要在其中选中“添加到电子表格”框并在成功或失败的情况下选择重定向目标。

接下来，我们将为我们的成功屏幕添加一个 Lottie 动画，因为这将是使体验更具吸引力的好方法。 为此，我们需要在动画的位置添加一个占位符图层，然后选择它并在插件中选择“视频/GIF/Lottie”选项。

然后我们将粘贴 Lottie 动画的 URL 并选中“自动播放”和“无控件”框。 在我们的例子中，我们不希望有任何视频播放器控件，因为这是一个成功的动画。

应用更改并打开预览模式以查看结果。 如您所见，当我们填写字段并提交表单时，我们会被重定向到成功页面，并带有循环动画。

与团队其他成员分享设计

在那之前，我们一直在制作一个只有我们才能看到的草稿。 现在是时候与团队的其他成员分享它了。 在应用程序中执行此操作的方法是单击“在浏览器中预览”，检查它的外观，如果您满意，请继续“同步”。

现在，受邀参与该项目的每个人都可以访问设计，并能够预览、发表评论和检查代码。

开发人员可以获得可重用的 React 代码

如前所述，作为开发人员，我们通常对生成代码的工具持怀疑态度，主要是因为从头开始编写东西总是比重构写得不好的东西要快。 为了避免这种情况，Anima 采用了一些最佳实践来保持代码的干净、可重用和简洁。

当我们切换到“代码”模式时，我们可以悬停并检查我们设计的元素。 每当我们选择一个元素时，我们都会在下面看到生成的代码。 默认视图是 React ，但我们也可以切换到 HTML 和 CSS。 我们还可以调整语法和命名约定中的首选项。

这些类在您的设计工具中重用图层的名称，但设计人员和开发人员也可以重命名图层。 尽管如此，就设计人员和开发人员都清楚和直接的统一命名约定达成一致仍然很重要。

即使我们留下了一些未命名的层，开发人员实际上也可以覆盖它们并在必要时进行更改。 这种体验让我想起了 Chrome 的 Inspect 元素功能，所有的更改都保存并与项目同步。

如果您使用的是 Vue 或 Angular，预计 Anima 也将在不久的将来开始支持这些框架。

期待

正如我们所看到的，设计和代码之间的差距不断缩小。 对于编写代码的人来说，使用这样的工具非常实用，因为它可以减少前端的大量重复工作。 对于那些进行设计的人来说，它允许进行原型设计、协作和同步，而这些都是通过来回发送静态图像难以实现的。

已经可以确定的是，Anima 消除了移交过程中的许多浪费活动，并允许设计师和开发人员专注于重要的事情：构建更好的产品。 我期待看到Anima接下来会发生什么！