Anima 4.0：从设计到 React 的无缝衔接

想象一下这样的场景：你收到设计团队的电子邮件，其中包含指向一个高保真 React 应用原型的链接，他们希望你构建这个应用。你点击链接，准备检查工作，却发现... *组件已经被构建好了*。

哈？

这听起来可能像梦境或一厢情愿，但Anima 4.0 正是如此。多年来，Anima 一直致力于简化设计和开发之间的衔接，随着最新更新的发布，设计师通过将设计转换为开发友好的代码，完全融入其中。

让我们再说一遍，但更具体地说：**Anima 4.0 允许你直接从设计中选择元素，并获得完全编写好的 React 组件，这些组件可以立即使用。**

有史以来最简单的设计交接

Anima 并不是你典型的设计到开发工作流程。实际上说它促进交接有点不准确，因为开发一直都是流程的一部分。

想想设计交接都涉及哪些方面。当然，这会因组织而异，但通常会遵循这样的流程

设计创建高保真模型。
设计创建工作的包，可能包括资产，如图像和字体。
设计和开发进行会面，讨论工作，可能使用交互式原型。
开发开始。
开发演示工作。
设计提出更改请求。
开发进行更改。
如此反复...

使用 Anima 4.0，这个过程更像是这样

设计创建基于代码的原型。
开发并行工作，可以参考原型、获取资产、生成代码并进行测试。

因此，我们得到的不只是一个交接，而是一个更高效、更具协作性的流程，可以节省大量时间... 并消除随之而来的挫败感。

不再有“这个东西怎么用？”

这可能是我在任何设计交接中问得最多的问题。前端开发人员必须了解很多东西，这通常会导致冗长的会议和关于事物如何工作的无数电子邮件。

这个链接指向哪里？
它有活动状态吗？
这张图片会是 SVG 吗？
...你懂的

这就是 Anima 的亮点所在。可交付的不仅仅是一个扁平的设计，而是一个完全交互式的原型。所有链接、状态、资产以及你能想到的任何其他内容都可以在那里查看和互动，包括动画和效果。

哦，如果你的设计是响应式的（当然，它是响应式的），那么在任何断点查看它的行为都轻而易举，无论你使用的是设计应用程序中的集成浏览器还是 Anima 原型。

确保设计响应式可能是项目中最耗时的部分之一。我和设计师之间有过许多来回讨论，如果可以在设计过程中在真实的浏览器中测试设计，这些讨论根本就不会发生，而且设计师很可能已经使用过这些设计工具，包括Sketch、Figma 和Adobe XD。由于 Anima 生成所有代码，这将为我节省大量时间，否则我需要花时间来调整断点。这也将为设计师节省时间，因为他们不需要记录这些行为并回答我所有的问题。

不再有“这不是设计好的！”

你不仅拥有一个可以真实模拟实时网站的原型，还可以获得所需的全部代码！而且，这不像你过去可能见过的那些 HTML 和 CSS 生成器。Anima 输出极其干净的代码，包含语义 HTML 元素和现代 CSS 功能。以下是我从一个快速设计的英雄组件中得到的 CSS 代码

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
.hero {
  background-color: transparent;
  flex-shrink: 0;
  height: 1037px;
  position: relative;
  width: 505px;
}
.hero-container {
  background-color: var(--royal-blue);
  height: 1024px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 505px;
}
.shape-circle {
  background-color: transparent;
  height: 444px;
  left: 283px;
  position: absolute;
  top: 593px;
  width: 222px;
}
.shape-dots {
  background-color: transparent;
  height: 646px;
  left: 43px;
  position: absolute;
  top: 189px;
  width: 418px;
}
.shape-triangle {
  background-color: transparent;
  height: 332px;
  left: 0px;
  position: absolute;
  top: 79px;
  width: 269px;
}
.video {
  background-color: transparent;
  height: 294px;
  left: 43px;
  overflow: hidden;
  position: absolute;
  top: 278px;
  width: 418px;
}
:root {
  --royal-blue: rgba(67,83,255,1.0);
}

其中包含大量精确的数字，通常需要一些费时费力的猜测。而且这些是我可以读懂的类名和自定义属性！我会更改任何代码吗？也许吧！但至少我一直参与了整个过程，并且拥有一个坚实的基础，否则我需要花费时间自己编写。

但是，这里的真正亮点是 Anima 4.0 实现了其他平台无法实现的功能，因为它可以...

将任何内容转换为功能性 React 组件

只需要点击一下，我就可以得到以下内容

import React from "react";

function App(props) {
  return (
    <div className={`hero ${props.className || ""}`}>
      <div className="hero-container"></div>
      <img
        className="shape-circle"
        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-learn-path-2-DC8E0494-121C-40B1-8AE1-3C8BEAC833A7.png"
      />
      <img
        className="shape-triangle"
        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-home-triangle2x-BA81FE1D-AE06-47A2-91D5-20EC51D5F0F8.png"
      />
      <img
        className="shape-dots"
        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-home-rectangle2x-4EFFE4A8-CAD1-47C7-A175-D3256F2E5124.png"
      />
      <div className="video">
        <iframe
          style="border: 0; pointer-events: auto;"
          id="ytplayer"
          type="text/html"
          width="100%"
          height="100%"
          src="https://www.youtube.com/embed/rk71kS4cY7E?rel=0"
          frameborder="0"
          allowfullscreen="allowfullscreen"
          mozallowfullscreen="mozallowfullscreen"
          msallowfullscreen="msallowfullscreen"
          oallowfullscreen="oallowfullscreen"
          webkitallowfullscreen="webkitallowfullscreen"
        ></iframe>
      </div>
    </div>
  );
}

export default App;

这是真的——并且在 Anima 4.0 中是全新的！我可以在 Anima 界面中的任何元素上执行此操作。选择一个元素，将其标记为组件，然后生成代码。

你可以在未来的版本中期待 Vue 和 Angular 的相同功能。

为什么这很重要

也许现在已经很明显了，但我从前端开发人员的角度看到了很多好处。获得 HTML 和 CSS 很棒，但拥有像这样与现代框架和代码实践集成的工具，不仅仅是令人印象深刻——它是一个游戏规则的改变者。减少了上下文切换和浪费在其他事情上的时间，我更希望把这些时间用在完成更好的工作（或开始下一个项目）上！

和你们中的许多人一样，我介于设计和开发之间，看到了这如何填补设计方面的许多空白。我对应用程序内浏览器预览感到不可思议。当这些内容可以在设计阶段完成时，所有在设计 QA 中花费在响应式断点上的时间都将立即释放——更不用说它生成的代码节省的时间了。

以下是一个从 Adobe XD 到浏览器中实际呈现的 React 组件的简短视频

Anima 4.0 现已发布... 今天

是的，它今天，10 月 27 日正式发布。事实上，有一个虚拟派对正在举行，你被邀请参加。我听说这将是一个盛大的极客派对，会有很棒的人、演示，甚至还有礼物。希望在那儿见到你！

获取 Anima 4.0