Une plate-forme de conception-à-code unifiée comme Anima peut vous aider à accélérer les projets de développement de sites Web et d'applications.
Anima est un plug-in de conception au code pour Figma, Adobe XD et Sketch. Il permet aux concepteurs de créer des prototypes haute fidélité pour les applications mobiles, les pages de destination ou les sites Web, et les développeurs peuvent facilement obtenir des codes réactifs, propres et réutilisables qui sont également prêts pour la production.
Cet article présentera les fonctionnalités de conception et de codage du plug-in Anima. Continuez à lire pour savoir si cette application sera utile pour vos projets de conception UI/UX.
1. Conversion de codes
le Plugin Anima convertit rapidement les conceptions visuelles des applications mobiles ou des sites Web en codes conviviaux pour les développeurs. Vous pouvez obtenir des codes dans différents langages de développement tels que Vue, React, CSS, Sass et HTML. Les codes générés par Anima sont exploitables et pas seulement générés par la machine.
Les développeurs peuvent parcourir l'intégralité du code de conception et apporter les modifications qu'ils souhaitent. Ils peuvent également vérifier tout changement sur le même espace de travail car Anima affiche une représentation graphique du code de programmation.
Anima travaille sur des projets pour offrir de nouvelles options de conversion de code à Swift, ReactNative et Angular.
2. Créez des prototypes haute fidélité
Le plug-in Anima vous aide à créer des prototypes haute fidélité à partir de vos projets de conception Adobe XD, Figma ou Sketch. Vous pouvez voir et interagir avec un prototype qui ressemble vraiment au site Web ou à l'application finale.
En rapport: Les meilleures fonctionnalités de Figma que tous les concepteurs devraient utiliser
Vous pouvez incorporer des points d'arrêt dans vos éléments de conception et visualiser votre prototype dans une vue de navigateur en direct. Vous pouvez effectuer des ajustements au fur et à mesure que vous examinez l'aspect final des tailles d'écran de site Web, de tablette ou de mobile.
Le plug-in offre également des effets intégrés pour transformer les conceptions statiques en éléments vivants. Vous pouvez inclure une animation de défilement de parallaxe, des menus déroulants, des effets de survol, des animations de chargement d'écran, des vidéos, etc.
En résumé, il vous permet de transmettre un prototype de conception qui possède tous les composants d'interface utilisateur et les ressources de conception nécessaires.
3. Exporter les codes Vue/React pour la production
Vous pouvez exporter sans effort les codes Vue/React de la conception du prototype pour les tests, la pré-production et la production. Vous pouvez également développer rapidement un site Web basé sur du code en utilisant les codes HTML/CSS de votre projet de conception.
Vous pourrez publier votre site Web directement depuis Figma, Sketch ou Adobe XD. Tout d'abord, utilisez le Aperçu dans le navigateur fonctionnalité pour tester l'apparence du site Web. Ensuite, utilisez simplement le Synchroniser avec Anima fonctionnalité pour connecter le projet à votre tableau de bord plug-in Anima.
Depuis l'espace de travail du projet Anima, vous pouvez partager le lien du site Web avec des collaborateurs ou des clients. Vous pouvez également exporter les codes HTML/CSS du site Web et publier le site Web dans votre propre domaine ou partager le code avec le développeur du site Web pour un traitement ultérieur.
4. Travailler avec la conception matérielle
Anima vous apporte le tout nouveau Conception matérielle bibliothèque basée sur les dernières directives de Google. Vous pouvez accéder à la bibliothèque Material Design à partir du Bibliothèque de widgets du plug-in Anima pour Adobe XD, Figma ou Sketch.
Les composants matériels Anima sont des éléments de construction interactifs permettant de créer une interface utilisateur moderne et élégante pour les sites Web ou les applications mobiles. Vous pouvez surfer à partir d'une énorme liste de composants et simplement glisser-déposer sur votre espace de travail de conception de Figma, Adobe XD ou Sketch.
À l'heure actuelle, la bibliothèque Anima Material Design se compose de neuf menus de composants: bouton, case à cocher, liste déroulante, FAB, icône de police Google, bouton radio, curseur, commutateur et champ de texte.
En rapport: Qu'est-ce que le matériel vous? Tout ce que vous devez savoir sur le nouveau look d'Android
Le développeur affirme également qu'Anima est la seule plate-forme qui propose des conceptions matérielles vraiment fonctionnelles, en direct et réactives. Ces éléments de conception se traduisent également automatiquement par leurs codes correspondants.
5. Tests de prototypes basés sur des codes
Vous utilisez peut-être des outils de conception populaires tels qu'Adobe XD, Figma et Sketch pour les projets de conception d'interface utilisateur. Cependant, ils ne prennent pas en charge le prototypage basé sur le code et en direct. Anima est l'un des plug-ins tendance qui peut générer le code dont vous avez besoin pour les tests de prototypes.
Les outils de test de prototypes tels que Fullstory et Hotjar nécessitent les éléments suivants dans votre projet de conception pour un test utilisateur réussi :
- Éléments de conception réactifs.
- Boutons interactifs, menus déroulants, champs de texte et médias.
- Un code fonctionnel que vous pouvez télécharger dans les outils de test ci-dessus.
Le plug-in Anima vous aide à répondre à toutes les exigences ci-dessus pour des tests réussis et sans effort de votre prototype de site Web ou d'application mobile.
Anima fait collaboration visuelle sur la conception et les projets de développement plus faciles avec des commentaires en temps réel. Si vous collaborez avec plusieurs personnes comme des chefs de projet, des concepteurs, des développeurs et des clients, alors c'est le support de communication parfait pour tout le monde.
Au lieu de décrire l'avancement de votre travail par e-mail, écrivez de courts commentaires directement dans le projet. Votre collaborateur peut voir exactement ce que vous essayez de transmettre. En visualisant ainsi le scénario, chacun gagne du temps et évite les conflits potentiels.
7. Gérer et partager des composants
L'espace de travail collaboratif d'Anima est le lieu central où chaque membre du projet partage et gère des composants ou des actifs. Vous pouvez facilement éviter de perdre du temps lors de la recherche de composants de conception ou d'actifs de code lors des réunions de projet.
le Mode de code divise l'espace de travail en trois sections distinctes. Vous pouvez accéder Composant et Guide de style dans le menu inférieur de l'écran. Dans le menu de droite, vous avez tous vos actifs dans le Les atouts languette.
Au centre de l'écran, vous avez l'affichage en temps réel du design. Les concepteurs peuvent également créer une bibliothèque de composants personnalisés pour la référence du développeur.
8. Travailler sur des brouillons en direct
De nombreux projets de développement d'applications mobiles et de sites Web souffrent d'une perte de temps due à plusieurs itérations. Dans la plupart des cas, ces itérations concernent simplement des modifications mineures qu'un concepteur ou un développeur peut apporter en quelques minutes.
Votre concepteur et développeur peut travailler sur le projet en continu sans perdre de temps. Le concepteur peut synchroniser la nouvelle version du prototype de Figma, Sketch ou Adobe XD avec le tableau de bord du projet Anima. À partir de là, le développeur peut accéder à la nouvelle conception et poursuivre le projet. Ainsi, vous et votre équipe gagnez un temps précieux en travaillant sur des brouillons en direct.
Conception au code sans effort avec Anima
Les fonctionnalités mentionnées ci-dessus suggèrent clairement que le plug-in Anima de conception au code supprimera les multiples goulots d'étranglement dont souffrent de nombreux projets de développement UI/UX. Le concepteur et le développeur de votre application ou de votre site Web peuvent travailler en étroite collaboration pour fournir un prototype fonctionnel qui ressemble à votre vision.
Oubliez les tracas des transferts de conception maladroits, des codes de conception défectueux et des retards dans l'obtention d'un site Web ou d'une application en direct. Vous pouvez désormais vous concentrer davantage sur les éléments de conception graphique pour impressionner votre public cible.
Nouveau dans le graphisme? Ces éléments sont essentiels pour créer un design attrayant.
Lire la suite
- Créatif
- Productivité
- Outils en ligne
- Développement d'applications
- Développement web
Tamal est un écrivain indépendant chez MakeUseOf. Après avoir acquis une solide expérience dans les domaines de la technologie, de la finance et des affaires dans son précédent emploi dans une société de conseil en informatique, il a adopté l'écriture comme métier à temps plein il y a 3 ans. Bien qu'il n'écrive pas sur la productivité et les dernières nouvelles technologiques, il adore jouer à Splinter Cell et regarder Netflix/ Prime Video.
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
