Catégories
Astuces et Design

Anima 4.0 transforme les conceptions en code React convivial pour les développeurs + un cadeau gratuit

Si vous recherchez un outil pour transformer la conception en un code fonctionnel et convivial pour les développeurs, permettant aux concepteurs, développeurs et équipes produit de travailler ensemble plus efficacement, vous devez essayez Anima 4.0. Ici, nous allons vous présenter tous ses avantages et vous donner la chance de l'essayer par vous-même, en participant à notre concours à gagner un plan gratuit de 3 mois.

Si vous êtes un concepteur, il y a de fortes chances que vous soyez régulièrement frustré par les conceptions qui se perdent dans la traduction et les boucles de rétroaction inefficaces qui en découlent. Inévitablement, cette friction entraîne une mise sur le marché plus lente, des concepteurs déçus et des développeurs mécontents.

C’est pourquoi nous avons construit Anima: c'est une solution de bout en bout qui rationalise les workflows de conception à développement, rendant les transferts continus plutôt que ponctuels. La plate-forme de conception à développement d'Anima permet aux concepteurs de créer des prototypes réactifs haute fidélité et fournit aux développeurs un code réutilisable convivial pour les développeurs afin que les équipes puissent expédier des produits de qualité plus rapidement.

Comment fonctionne Anima?

Étape 1: conception

Les concepteurs peuvent utiliser leur outil de conception actuel pour créer des prototypes qui semblent réels, à l'aide de vidéos, de GIF ou de Lottie, de formulaires en direct, de cartes, etc. Anima s'intègre aux plateformes que vous utilisez déjà; que vous utilisiez Sketch, Figma ou Adobe XD, une installation rapide du plugin Anima vous permet de créer des prototypes haute fidélité à l'aide des outils que vous aimez.

Anima s'intègre aux plateformes que vous utilisez déjà

application anima

Étape 2: Aperçu

Utilisez la fonction d'aperçu pour voir à quoi ressemble votre conception en direct dans un navigateur, en effectuant les ajustements nécessaires dans votre outil de conception jusqu'à ce que vous soyez satisfait de la conception finale.

application anima

Étape 3: Synchroniser + Collaborer

Cliquez sur "Synchroniser avec le projet" et enregistrez votre projet dans l'application Web d'Anima. Vous êtes maintenant prêt à collaborer avec votre équipe! Les membres de l'équipe de conception, de produit et de développement peuvent facilement ajouter des commentaires et des commentaires sur des composants de conception spécifiques, en s'assurant que tout le monde est sur la même page.

Étape 4: Code + Export

Une fois la conception synchronisée avec le projet, les développeurs accèdent simplement aux écrans de projet individuels, basculent vers Mode code (Icône «<>»), puis cliquez sur n’importe quel élément pour générer le code React / HTML pour ce composant spécifique.

application anima

À partir de là, vous pouvez ajouter vos propres guides de style CSS, remplacer les codes selon vos besoins et utiliser Comparer le mode pour voir facilement comment le code rendu d'Anima se compare à la conception d'origine. Lorsque vous êtes prêt, vous pouvez sélectionner des composants individuels dans le langage de codage que vous utilisez, les copier dans votre IDE ou les exécuter dans CodePen / jsFiddle.

application anima

Qu'y a-t-il pour vous?

Anima est pour les designers

  • Anima fonctionne avec votre outil de conception et s'intègre à Sketch, Figma et Adobe XD.
  • Passez de la conception au prototype réaliste plus rapidement. Transformez vos conceptions statiques en prototypes entièrement interactifs et réactifs.
  • Prototypes basés sur du code. Tout ce que vous pouvez faire avec du code, vous pouvez le faire avec Anima. Incorporer des vidéos, des GIF, des fichiers Lottie, des cartes, etc.
  • Rien n'est perdu dans la traduction. Les développeurs peuvent reprendre exactement là où vous vous êtes arrêté, de sorte que la collaboration est plus fluide et sans friction.

Anima est pour les développeurs

  • Travaillez avec votre pile existante. Anima traduit n'importe quelle conception en composants de code réutilisables, vous permettant d'exporter en HTML / JS / CSS ou React.js.
  • Gagner du temps. Au lieu de coder l'interface utilisateur à partir de zéro, éliminez le travail grognon et développez le code en cours d'exécution.
  • Code convivial pour les développeurs. Anima traduit la conception en code sémantique qui a du sens pour les ingénieurs: code autonome, réutilisable, conforme et propre.
  • Remplacements de code. Les développeurs peuvent modifier le code d'Anima, et leurs remplacements de code s'intègrent automatiquement dans la conception principale (que les concepteurs synchronisent ou non les modifications supplémentaires de leur côté).
  • Code réutilisable. Les composants de code réutilisables d'Anima n'ont pas de dépendances, vous pouvez donc facilement les copier et les coller dans une base de code existante.

Anima est pour les équipes produit

  • Collaborez et fermez la boucle de rétroaction. Éliminez les transferts aller-retour, utilisez un seul outil pour tous vos flux de travail de conception à développement.
  • Augmentez la clarté et la vitesse. Les prototypes basés sur du code permettent aux concepteurs de réaliser leur vision créative et aux ingénieurs de se concentrer sur l'architecture frontale. Les deux peuvent parcourir les itérations plus rapidement et expédier des produits de meilleure qualité.

Pour résumer, contrairement aux solutions de transfert existantes qui ne vous donnent que des spécifications de conception et des CSS, Anima 4.0 transforme la conception en code exploitable et convivial pour les développeurs, offrant une solution de bout en bout pour les concepteurs, les développeurs et les équipes produit qui cherchent à travailler plus efficacement, à minimiser les tâches répétitives et à éliminer les tâches difficiles afin qu'ils puissent se concentrer sur ce qu'ils veulent vraiment. Créer.

Offrez gratuitement!

Nous offrons 3 lecteurs Awwwards un compte Pro gratuit de 3 mois pour essayer Anima 4.0 pour eux-mêmes. Pour participer au concours, suivez @animaapp, cliquez sur le bouton ci-dessous pour partager le message sur votre Twitter, Facebook ou LinkedIn et taguer un ami. Les gagnants seront choisis au hasard et annoncés le 10 novembre.

Laisser un commentaire

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