L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
De la conception au code React convivial pour les développeurs en quelques minutes avec Anima
La promesse d'une conception transparente à la traduction de code remonte aux premiers constructeurs de pages WYSIWYG. Malgré l'objectif admirable, leur plus gros défaut (parmi tant d'autres) était l'horrible code qu'ils ont généré. Le scepticisme demeure à ce jour et chaque fois que cette idée réapparaît, les plus grandes préoccupations sont toujours liées à la qualité et à la maintenabilité du code.
Cela est sur le point de changer car les nouveaux produits ont fait de grands pas dans la bonne direction. Leur objectif ultime est d'automatiser le processus de conception à code, mais pas au détriment de la qualité du code. L'un de ces produits, Anima tente enfin de combler le fossé en fournissant une conception à part entière à la plate-forme de développement.
Qu'est-ce qu'Anima?
Anima est un design-to- outil de développement. Il vise à transformer le processus de transfert de conception en une collaboration continue. Les concepteurs peuvent utiliser Anima pour créer des prototypes entièrement réactifs qui ressemblent et fonctionnent exactement comme le produit fini (aucun codage requis). Les développeurs peuvent à leur tour prendre ces conceptions et les exporter dans un code React / HTML convivial. Au lieu de coder l'interface utilisateur à partir de zéro, ils sont libres de se concentrer sur la logique et l'architecture.
Il le fait à l'aide d'un plugin qui se connecte directement à votre outil de conception et vous permet de configurer conçoit et synchronise-les sur la plate-forme Web d'Anima. C'est là que le reste de l'équipe peut accéder au prototype, en discuter et choisir des spécifications ou des ressources utiles. En plus de la fonctionnalité de collaboration, cela donne aux développeurs une longueur d'avance grâce au code généré.
Cela pourrait faire une grande différence dans le va-et-vient traditionnel entre les concepteurs et les développeurs. Il garde tout au même endroit, synchronisé, et permet aux deux parties d'apporter des modifications en utilisant soit du code, soit des outils de conception.
Dans cet article, nous allons apprendre à transformer nos conceptions statiques en un live, code- prototype basé avec des champs réels, des formulaires, des cartes et des animations, et à son tour transforme ce prototype en code React – le tout intégré dans un seul outil.
Installation du plugin et configuration d'un projet
Premiers pas avec Anima est simple. Vous devez d'abord créer un compte, puis installer le plugin. Bien que j'utilise Figma pour cette procédure pas à pas, Anima prend en charge tous les principaux outils de conception: Sketch, Figma et Adobe XD.
Une fois que cela est fait, assurez-vous de créer un projet sur la plate-forme Anima – c'est là que nos conceptions apparaîtront lorsque nous les synchroniserons.
Le plugin lui-même est séparé en trois sections principales, chacune avec une liste d'options. La plupart de ce que nous allons faire est simplement de sélectionner l'une de ces options, puis d'appliquer un calque ou un cadre spécifique dans Figma .
Création d'un prototype réactif
Pour les besoins de l'article, nous avons conçu une expérience d'intégration qui sera transformée en un prototype interactif. Jusqu'à présent, nous avons préparé des écrans pour les trois points d'arrêt les plus courants et nous les avons liés en utilisant les fonctionnalités de prototypage de Figma.
L'une des choses intéressantes que nous pouvons réaliser avec Anima est de créer des prototypes qui s'adaptent à toutes les tailles d'écran. Les prototypes traditionnels faits d'images cliquables sont statiques et échouent souvent sous différentes tailles d'écran.
Pour ce faire, cliquez sur l'option «Breakpoints» et Anima vous demandera les cadres que vous souhaitez connecter. Sélectionnez tous les cadres pour les ajouter en tant que points d'arrêt. Puis confirmez votre sélection en cliquant sur «Terminé».
Une fois que vous êtes prêt, cliquez sur «Aperçu dans le navigateur» pour voir le résultat. C’est à ce moment qu’Anima convertira vos créations en code.
La première chose que vous remarquerez est que le prototype est maintenant transformé en HTML et CSS. Tout le contenu est sélectionnable et est redimensionné lorsque l'écran est redimensionné. Ceci est plus visible lorsque vous sélectionnez le mode "Réactif" dans l'aperçu du prototype et que vous jouez avec différentes tailles d'écran.
Pour obtenir des transitions plus fluides, il est important d'utiliser les fonctions de contrainte de Figma lors de la conception de vos composants. Assurez-vous également de cocher la case «Utiliser les contraintes Figma» dans la section «Mise en page» du plugin.
Donnez vie à vos conceptions avec des couches intelligentes
Nous pouvons aller un peu plus loin. Puisque Anima convertit les conceptions en code, les possibilités sont infinies pour ce que nous pouvons ajouter pour rendre notre prototype plus réaliste.
Des animations et des effets de survol seraient un excellent moyen de rendre le prototype plus vivant et de impressionner les parties prenantes. Anima offre une variété d'options qui peuvent être appliquées à n'importe quel calque ou composant. Dans notre cas, nous sélectionnerons le calque de titre, puis choisirons "Animation d'entrée" et "Fondu entrant". Dans le champ de délai, nous ajouterons 0,5 .
Pour chaque champ, nous ajouterons un effet de lueur lors du survol. Sélectionnez le calque de champ, puis «Effet de survol» et choisissez «Éclat». Répétez la même chose pour le bouton.
Maintenant que nous avons appliqué tous les changements, nous pouvons voir que le prototype commence à se sentir comme un vrai produit. [19659035] Un aperçu des survols et des animations avec Anima (Illustration de Radostina Georgieva)
L'une des caractéristiques uniques offertes par Anima est la possibilité d'ajouter des champs et des formes vivants aux prototypes. Puisque nous concevons une expérience d'intégration, cela nous sera vraiment utile. La saisie de données est l'un des plus gros points de désabonnement dans toute expérience produit et il est vraiment difficile de tester des idées sans en tenir compte.
Comme nous avons ajouté les effets précédents, nous sélectionnons maintenant le composant de champ et choisissons «Champ de texte ». À partir de là, nous devrons choisir le type de champ dont nous avons besoin. Si nous choisissons un champ de mot de passe, par exemple, l'entrée sera masquée et Anima ajoutera une fonctionnalité d'affichage / masquage au champ.
Comme vous pouvez le voir, les champs fonctionnent maintenant comme prévu. Il est également possible de rassembler toutes les données collectées à partir de ces champs dans une feuille de calcul. Sélectionnez le bouton «Continuer», puis cliquez sur l'option «Bouton Soumettre» dans Anima. Cela ouvrira une boîte de dialogue supplémentaire, dans laquelle nous devons cocher la case «Ajouter à la feuille de calcul» et sélectionner les destinations de redirection en cas de succès ou d'échec.
Ensuite, nous ajouterons une animation Lottie pour notre écran de réussite car ce sera un excellent moyen de rendre l'expérience un peu plus engageante. Pour cela, nous devons ajouter un calque d'espace réservé à la place de l'animation, puis le sélectionner et choisir l'option "Vidéo / GIF / Lottie" dans le plugin.
Ensuite, nous allons coller l'URL de notre animation Lottie et cochez les cases «Autoplay» et «No controls». Dans notre cas, nous ne voulons pas de commandes de lecteur vidéo, car il s'agit d'une animation réussie.
Appliquez les modifications et ouvrez le mode Aperçu pour voir les résultats. Comme vous pouvez le voir, lorsque nous remplissons les champs et soumettons le formulaire, nous sommes redirigés vers notre page de réussite, avec une animation en boucle.
Partager des dessins avec le reste de l'équipe
Jusque-là, nous travaillions sur un projet qui n'était visible que par nous. Il est maintenant temps de le partager avec le reste de l’équipe . Pour ce faire dans l'application, cliquez sur «Aperçu dans le navigateur», vérifiez à quoi il ressemble et, si vous êtes satisfait, continuez avec «Synchroniser».
Toutes les personnes invitées au projet auront désormais accès au
Les développeurs peuvent obtenir du code de réaction réutilisable
Comme mentionné précédemment, en tant que développeurs, nous sommes généralement sceptiques quant aux outils qui génèrent du code, principalement parce qu'écrire quelque chose à partir de zéro est toujours plus rapide que de refactoriser quelque chose qui était mal écrit. Pour éviter cela, Anima a adopté quelques bonnes pratiques pour garder le code propre, réutilisable et concis.
Lorsque nous passons en mode «Code», nous pouvons survoler et inspecter les éléments de notre conception. Chaque fois que nous sélectionnons un élément, nous verrons le code généré en dessous. La vue par défaut de est React mais nous pouvons également basculer vers HTML et CSS. Nous pouvons également ajuster les préférences dans la syntaxe et les conventions de dénomination.
Les classes réutilisent les noms des couches dans votre outil de conception, mais les concepteurs et les développeurs peuvent également renommer les couches. Néanmoins, il est important de s'entendre sur des conventions de dénomination unifiées qui seraient claires et directes pour les concepteurs et les développeurs.
Même si nous avons laissé certaines couches sans nom, les développeurs peuvent en fait les remplacer et apporter des modifications si nécessaire. Cette expérience rappelle la fonctionnalité d'élément Inspect de Chrome, et toutes les modifications sont enregistrées et synchronisées avec le projet.
Si vous utilisez Vue ou Angular, il est prévu qu'Anima commencera également à prendre en charge ces frameworks dans un proche avenir. [19659055] Regard vers l'avenir
Comme nous pouvons le voir, l'écart entre la conception et le code ne cesse de se combler. Pour ceux qui écrivent du code, utiliser un tel outil est très pratique car il peut réduire beaucoup de travail répétitif en front-end. Pour ceux qui conçoivent, cela permet le prototypage, la collaboration et la synchronisation qui seraient difficiles à réaliser en envoyant des images statiques dans les deux sens.
Ce qui est déjà certain, c'est que Anima élimine beaucoup d'activités inutiles en le processus de transfert et permet aux concepteurs et aux développeurs de se concentrer sur ce qui compte: créer de meilleurs produits. Nous sommes impatients de voir ce qui va se passer dans Anima.
(vf, il) [19659060]Source link