Catégories
Astuces et Design

Anima 4.0: passez directement de la conception à la réaction lors du transfert de conception

Imaginez ce scénario: vous recevez un e-mail de l'équipe de conception. Il contient un lien vers un prototype haute fidélité d'une application React qu'ils souhaitent que vous construisiez. Vous cliquez sur le lien et vous vous préparez à inspecter le travail uniquement pour trouver… les composants ont déjà été construits.

Hein?

Cela peut ressembler à un rêve ou à un vœu pieux, mais c'est exactement ce que fait Anima 4.0. Pendant des années, Anima a travaillé à rationaliser le transfert entre la conception et le développement, et avec sa dernière mise à jour, les concepteurs sont pleinement intégrés en transformant les conceptions en code convivial pour les développeurs.

Répétons encore une fois, mais plus précisément: Anima 4.0 vous permet de sélectionner des éléments directement à partir d'une conception et d'obtenir des composants React entièrement écrits qui fonctionnent.

Le transfert de conception le plus simple jamais réalisé

Anima n'est pas votre flux de travail typique de la conception au développement. Il semble en fait un peu inexact de dire que cela facilite les transferts parce que le développement fait partie du processus depuis le début.

Considérez ce qu'implique un transfert de conception. Bien sûr, cela varie selon l'organisation, mais ils se déroulent généralement comme suit:

  • Le design crée des maquettes haute fidélité.
  • La conception crée un ensemble du travail, comprenant éventuellement des éléments, tels que des images et des polices.
  • La conception et le développement se rencontrent et parlent, éventuellement avec un prototype interactif.
  • Le développement démarre.
  • Le développement démontre le travail.
  • La conception demande des modifications.
  • Le développement apporte ces changements.
  • Et ainsi de suite…

Avec Anima 4.0, ce processus ressemble plus à ceci:

  • La conception crée des prototypes basés sur du code.
  • Le développement fonctionne parallèlement, avec la possibilité de référencer des prototypes, de récupérer des actifs, de générer du code et de tester des éléments.
Le développement est un composant intégré du processus de conception, où le code est toujours que vous soyez dans le prototype ou dans l'application de conception.

Donc, ce que nous avons est moins un transfert et plus un processus productif et collaboratif qui économise beaucoup de temps… et de frustration pour démarrer.

Plus de "Comment ça marche?"

C’est probablement la question que je pose le plus lors de tout transfert de conception. Les front-enders doivent être conscients de tant de choses et cela conduit souvent à de longues réunions et de nombreux courriels sur la façon dont les choses sont censées fonctionner.

  • D'où vient ce lien?
  • Cela a-t-il un état actif?
  • Cette image sera-t-elle SVG?
  • …Vous savez comment ça se passe

C’est là que l’Anima brille. Le livrable n'est pas seulement un design plat, mais un prototype entièrement interactif. Tous les liens, états, ressources et tout ce à quoi vous pouvez penser sont là pour que vous puissiez les visualiser et interagir avec, y compris les animations et les effets.

Besoin d'un atout? Il est disponible directement dans le prototype et déjà écrit dans le code généré.

Oh, et si votre conception est réactive (ce qui, bien sûr, c'est le cas), il est facile de voir comment elle se comporte à n'importe quel point d'arrêt, que vous utilisiez le navigateur intégré dans l'application de conception ou dans le prototype Anima.

Le design peut être prévisualisé à tout moment dans un vrai navigateur directement dans l'application de design.

Obtenir la réactivité d'une conception vers le bas est probablement l'une des parties les plus chronophages d'un projet. J'ai eu tellement de discussions avec des concepteurs qui n'auraient jamais eu lieu s'il était possible de tester la conception dans un vrai navigateur pendant la conception dans les outils de conception que les concepteurs utilisent probablement déjà, notamment Sketch, Figma et Adobe XD. Et comme Anima génère tout le code, cela m'aurait fait gagner beaucoup de temps en essayant d'obtenir les points d'arrêt juste. Cela aurait également fait gagner du temps aux concepteurs sans avoir à documenter ce comportement et à répondre à toutes mes questions.

À quel point est-il cool que les concepteurs puissent tester leurs conceptions dans un navigateur réel intégré à leur application de conception?!

Plus de "Ce n'est pas comme ça que ça a été conçu!"

Non seulement vous avez un prototype qui simule de manière réaliste un site en direct, mais vous obtenez tout le code dont vous avez besoin! Et non, ce n'est pas comme les générateurs HTML et CSS que vous avez probablement vus dans le passé. Anima produit un code extrêmement propre, complet avec des éléments HTML sémantiques et des fonctionnalités CSS modernes. Voici le CSS que j'ai obtenu d'une conception rapide d'un composant héros que j'ai assemblé:

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

Il contient de nombreux chiffres précis qui auraient normalement pris du temps. Et ce sont des noms de classes et des propriétés personnalisées que je peux prononcer! Vais-je changer l'un de ces codes? Peut être! Mais au moins, j'ai fait partie du processus depuis le début et j'ai une longueur d'avance solide que j'aurais autrement passé du temps à écrire moi-même.

Mais, le vrai bijou ici est qu'Anima 4.0 va là où aucune autre plate-forme n'est allée parce qu'elle le peut …

Transformez n'importe quoi en un composant React fonctionnel

Il n'a fallu qu'un seul clic et voici ce que j'ai obtenu:

import React from "react";

function App(props) {
  return (
    
); } export default App;

C'est réel – et tout nouveau dans Anima 4.0! Et je peux le faire avec n'importe quel élément de l'interface Anima. Sélectionnez un élément, marquez-le comme composant, puis générez le code.

Vous pouvez vous attendre à la même chose pour Vue et Angular dans les versions futures.

Pourquoi c'est un gros problème

Peut-être est-ce évident maintenant, mais je vois des tonnes d’avantages dans ma position en tant que développeur front-end. Obtenir du HTML et du CSS est formidable, mais avoir un outil comme celui-ci qui s'intègre aux frameworks et aux pratiques de code modernes est plus qu'impressionnant – cela change la donne. Il y a beaucoup moins de changement de contexte et de temps passé sur des choses que je préfère passer à faire un meilleur travail (ou à démarrer sur le prochain projet)!

Comme beaucoup d'entre vous, je chevauche la ligne entre la conception et le développement et je vois comment cela comble de nombreuses lacunes du côté de la conception. Je n'arrive pas à oublier les aperçus du navigateur dans l'application. Tout le temps passé au contrôle qualité de la conception à des points d'arrêt réactifs s'ouvre instantanément lorsque cela peut être fait au moment de la conception – sans parler du temps gagné avec le code qu'il génère.

Voici une vidéo rapide du passage d'Adobe XD à un véritable rendu des composants React dans le navigateur:

Anima 4.0 est disponible… aujourd'hui

Comme dans, il a littéralement été livré aujourd'hui, le 27 octobre. En fait, il y a une fête virtuelle et vous êtes invité. On me dit que ce sera un événement geek épique avec des gens formidables, des démos et même des cadeaux. Espérons vous y voir!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *