Anima 4.0: Direkt von Design zu React im Design Handoff

Stellen Sie sich folgendes Szenario vor: Sie erhalten eine E-Mail vom Designteam. Sie enthält einen Link zu einem High-Fidelity-Prototypen einer React-App, die sie von Ihnen erstellen lassen möchten. Sie klicken auf den Link und machen sich bereit, die Arbeit zu inspizieren, nur um festzustellen… die Komponenten wurden bereits erstellt.

Hä?

Das mag wie ein Traum oder Wunschdenken klingen, aber genau das tut Anima 4.0. Seit Jahren arbeitet Anima daran, den Handoff zwischen Design und Entwicklung zu optimieren, und mit dem neuesten Update werden Designer voll und ganz einbezogen, indem sie Designs in entwicklerfreundlichen Code umwandeln.

Wiederholen wir das noch einmal, aber genauer: Mit Anima 4.0 können Sie Elemente direkt aus einem Design auswählen und voll funktionsfähige React-Komponenten erhalten, die einfach funktionieren.

Der einfachste Design-Handoff aller Zeiten

Anima ist kein typischer Design-to-Development-Workflow. Es ist eigentlich etwas ungenau zu sagen, dass es Handoffs erleichtert, da die Entwicklung von Anfang an Teil des Prozesses ist.

Betrachten Sie, was bei einem Design-Handoff zu tun ist. Sicher, es variiert je nach Organisation, aber im Allgemeinen läuft es ungefähr so:

• Design erstellt High-Fidelity-Mockups.
• Design erstellt ein Paket der Arbeit, möglicherweise einschließlich Assets wie Bilder und Schriftarten.
• Design und Entwicklung treffen sich und besprechen die Dinge, möglicherweise mit einem interaktiven Prototyp.
• Die Entwicklung beginnt.
• Entwicklung präsentiert die Arbeit.
• Design fordert Änderungen an.
• Entwicklung nimmt diese Änderungen vor.
• Und so weiter...

Mit Anima 4.0 sieht der Prozess eher so aus:

• Design erstellt Code-basierte Prototypen.
• Die Entwicklung arbeitet parallel mit der Möglichkeit, Prototypen zu referenzieren, Assets zu extrahieren, Code zu generieren und Dinge auszuprobieren.

Wir haben also weniger einen Handoff und mehr einen produktiven und kollaborativen Prozess, der jede Menge Zeit und Frustration spart.

Kein „Wie funktioniert das Ding?“ mehr

Das ist wahrscheinlich die Frage, die ich bei jedem Design-Handoff am häufigsten stelle. Front-End-Entwickler müssen sich vieler Dinge bewusst sein, und das führt oft zu langen Meetings und zahlreichen E-Mails darüber, wie die Dinge funktionieren sollen.

• Wohin führt dieser Link?
• Hat das einen aktiven Zustand?
• Wird dieses Bild SVG sein?
• …Sie wissen schon, wie das geht.

Da glänzt Anima. Das Ergebnis ist nicht nur ein flaches Design, sondern ein voll interaktiver Prototyp. Alle Links, Zustände, Assets und alles andere, was Ihnen einfällt, sind dort für Sie zum Ansehen und Interagieren vorhanden, einschließlich Animationen und Effekten.

Oh, und wenn Ihr Design responsiv ist (was es natürlich ist), ist es kinderleicht zu sehen, wie es bei jedem Breakpoint funktioniert, egal ob Sie den integrierten Browser in der Designanwendung oder im Anima-Prototyp verwenden.

Das Verständnis der Responsivität eines Designs ist wahrscheinlich einer der zeitaufwändigsten Teile eines Projekts. Ich hatte so viele Hin-und-Her-Diskussionen mit Designern, die nie passiert wären, wenn es möglich gewesen wäre, das Design während des Designs in einem echten Browser in den Design-Tools zu testen, die Designer wahrscheinlich bereits verwenden, einschließlich Sketch, Figma und Adobe XD. Und da Anima den gesamten Code generiert, hätte das viel meiner Zeit gespart, die ich damit verbracht habe, die Breakpoints richtig hinzubekommen. Es hätte auch den Designern Zeit gespart, ohne das Verhalten dokumentieren und all meine Fragen beantworten zu müssen.

Kein „Das wurde nicht so entworfen!“ mehr

Nicht nur haben Sie einen Prototyp, der eine Live-Website realistisch simuliert, sondern Sie erhalten auch den gesamten benötigten Code! Und nein, das ist nicht wie bei den HTML- und CSS-Generatoren, die Sie wahrscheinlich in der Vergangenheit gesehen haben. Anima gibt extrem sauberen Code aus, komplett mit semantischen HTML-Elementen und modernen CSS-Features. Hier ist das CSS, das ich aus einem schnellen Design einer Hero-Komponente erhalten habe, die ich zusammengestellt habe:

@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);
}

Viele präzise Zahlen, die normalerweise einige zeitaufwändige Rätselraten erfordert hätten. Und das sind Klassennamen und benutzerdefinierte Eigenschaften, die ich tatsächlich aussprechen kann! Werde ich etwas an diesem Code ändern? Vielleicht! Aber zumindest war ich von Anfang an Teil des Prozesses und habe einen soliden Vorsprung, den ich sonst selbst hätte schreiben müssen.

Aber das wahre Juwel hier ist, dass Anima 4.0 dorthin geht, wo keine andere Plattform bisher war, weil es kann…

Alles in eine funktionale React-Komponente verwandeln

Es brauchte nur einen Klick und hier ist, was ich bekommen habe:

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;

Das ist real – und brandneu in Anima 4.0! Und das kann ich mit jedem Element in der Anima-Oberfläche tun. Ein Element auswählen, als Komponente markieren und dann den Code generieren.

Sie können das Gleiche für Vue und Angular in zukünftigen Versionen erwarten.

Warum das wichtig ist

Vielleicht ist es inzwischen offensichtlich, aber ich sehe aus meiner Perspektive als Front-End-Entwickler unzählige Vorteile. HTML und CSS zu erhalten ist großartig, aber ein solches Werkzeug zu haben, das sich in moderne Frameworks und Code-Praktiken integriert, ist mehr als beeindruckend – es ist ein Game-Changer. Es gibt viel weniger Kontextwechsel und Zeitaufwand für Dinge, für die ich lieber besser arbeiten (oder mit dem nächsten Projekt beginnen) würde!

Wie viele von Ihnen überschneide ich mich mit Design und Entwicklung und sehe, wie dies viele Lücken auf der Designseite schließt. Ich kann die In-App-Browser-Vorschauen nicht übersehen. Die gesamte Zeit, die für das Design-QA von responsiven Breakpoints aufgewendet wird, öffnet sich sofort, wenn diese Dinge im Designprozess erledigt werden können – ganz zu schweigen von der Zeitersparnis durch den generierten Code.

Hier ist ein kurzes Video, das zeigt, wie man von Adobe XD zu echten gerenderten React-Komponenten im Browser wechselt.

Anima 4.0 ist verfügbar… heute

Das heißt, es wurde buchstäblich heute, am 27. Oktober, veröffentlicht. Tatsächlich findet eine virtuelle Party statt und Sie sind eingeladen. Man sagt mir, es wird ein episches, nerdiges Event mit tollen Leuten, Demos und sogar Geschenken. Ich hoffe, Sie dort zu sehen!