Anima : transformer les ébauches de conception Figma en code frontal propre

Introduction générale

Anima est une plateforme qui aide les concepteurs et les développeurs à transformer leurs conceptions en code. Elle permet de générer du code React, Vue ou HTML directement à partir d'outils de conception tels que Figma, Adobe XD et Sketch, ce qui rend le développement frontal plus rapide et plus facile. Les utilisateurs peuvent l'utiliser pour créer des prototypes d'interaction haute-fidélité, et aussi générer automatiquement du code qui répond aux normes de développement et peut être utilisé directement.L'objectif principal d'Anima est de réduire la communication itérative entre la conception et le développement et d'améliorer l'efficacité de l'équipe. Anima convient aux personnes ou aux équipes qui souhaitent passer rapidement de la conception à la réalisation, et est particulièrement utile pour les projets qui nécessitent une itération rapide. La plateforme propose également des formules payantes qui offrent des fonctionnalités plus avancées, telles que l'exportation illimitée de code et une assistance de niveau entreprise.

Liste des fonctions

• De la conception au codeLes fonctionnalités : Générer du code React, Vue, HTML, et CSS à partir de Figma, Adobe XD, ou Sketch.
• prototype haute fidélitéLes outils d'aide à la décision : ils permettent d'ajouter des éléments interactifs tels que des formulaires, des GIF et des vidéos afin de créer une expérience de prototype réaliste.
• Systèmes de conception automatisésLes composants de conception sont automatiquement convertis en composants de code et synchronisés avec l'environnement de développement grâce à la fonctionnalité Frontier.
• mise en page réactiveLes logiciels d'aide à la décision : la prise en charge de la définition de points d'arrêt et de mises en page flexibles garantit l'adaptation du code à différents écrans.
• Travail d'équipeLe système de gestion de l'information : Il offre des capacités de collaboration en temps réel afin que les équipes de conception et de développement puissent travailler de manière synchronisée.
• Personnalisation du codeL'IA adapte les résultats générés aux habitudes de codage de l'équipe, au plus près des besoins réels de développement.
• Exporter et publierLe code peut être exporté directement ou le prototype peut être publié sous la forme d'un site web en ligne.

Utiliser l'aide

Comment démarrer avec Anima

L'utilisation d'Anima ne nécessite pas un processus d'installation compliqué et fonctionne principalement par le biais de plugins et du côté web. Vous trouverez ci-dessous les étapes détaillées :

1. installation des plug-ins

• Installation dans l'outil de conception: :
  • Ouvrez Figma (ou Adobe XD, Sketch).
  • Cliquez sur Plugins > Browse All Plugins dans la barre de menu Figma.
  • Recherchez "Anima" et cliquez sur "Installer".
  • Une fois l'installation terminée, le plug-in apparaît dans la barre d'outils ou dans le menu du plug-in.
• S'inscrire à un compte: :
  • Après avoir ouvert le plugin, vous serez invité à vous connecter ou à vous enregistrer.
  • Visitez le site https://www.animaapp.com/, cliquez sur "Sign Up" pour créer un compte, et connectez-vous avec votre adresse électronique et votre mot de passe.
• Vérifier l'installation: :
  • Après avoir installé le plugin, ouvrez un projet dans l'outil de conception, cliquez sur l'icône du plugin et voyez l'interface Anima.

2. comment générer un code

• Préparation de la conception: :
  • Complétez le dessin dans Figma, en veillant à ce que les couches soient clairement nommées et que la mise en page soit logique (par exemple, en utilisant la mise en page automatique).
• Ouvrir le plug-in Anima: :
  • Cliquez sur le menu du plugin Figma et sélectionnez Anima.
  • Dans l'écran contextuel, sélectionnez la page ou le cadre pour lequel vous devez générer un code.
• Sélectionner le type de code: :
  • Dans l'interface du plugin, cliquez sur "Export Code".
  • Sélectionnez le type de code cible : React, Vue ou HTML (avec CSS, Tailwind CSS, etc.).
• Ajustement des paramètres: :
  • Si vous souhaitez une mise en page réactive, cliquez sur "Points d'arrêt" pour définir des points d'arrêt.
  • Si vous souhaitez personnaliser votre code, activez l'option "Personnalisation du code" et laissez l'IA optimiser votre code en fonction de vos habitudes.
• Code d'exportation: :
  • Cliquez sur "Générer" et attendez quelques secondes pour que le code soit généré.
  • Vous pouvez copier le code dans votre environnement de développement ou télécharger le fichier ZIP.
• mise en garde: :
  • Le nombre d'exportations de code étant limité dans la version gratuite, il est recommandé de passer à la version Pro (à partir de $31 par mois) pour bénéficier de davantage de fonctionnalités.

3. créer des prototypes haute-fidélité

• Ajout d'interactions: :
  • Sélectionnez les éléments de conception dans Figma et ouvrez le plug-in Anima.
  • Cliquez sur "Ajouter de l'interactivité" et sélectionnez un formulaire, une vidéo ou une animation Lottie, etc.
  • Définissez l'action de déclenchement, par exemple cliquer pour sauter ou afficher pour masquer.
• Effet de prévisualisation: :
  • Cliquez sur "Aperçu" dans le plugin pour visualiser le prototype dans votre navigateur.
• Publication de prototypes: :
  • Cliquez sur "Publier" pour générer un lien en ligne que vous pourrez partager avec votre équipe ou vos clients.
• compétence opérationnelle: :
  • Utilisez la fonction "Live Embed" pour intégrer le prototype dans une page web afin d'en faciliter l'affichage.

4. l'utilisation du système de conception automatisé Frontier

• Installer la frontière: :
  • Installez l'extension Frontier dans Visual Studio Code (téléchargez-la sur le site d'Anima).
  • Connectez-vous à votre compte Anima et connectez-vous au projet Figma.
• composant de synchronisation: :
  • Marquez les composants qui doivent être synchronisés dans Figma.
  • Ouvrez Frontier dans VS Code, cliquez sur "Sync" et la conception sera automatiquement convertie en un composant de code.
• code de gestion: :
  • Le code généré prend en charge l'intégration de Storybook et le CSS est converti en Auto Layout.
  • Après avoir modifié le code, il peut être synchronisé à l'envers avec Figma via Frontier.

5. les fonctions du travail d'équipe

• Membres invités: :
  • Sur le site web d'Anima, allez dans "Team Settings".
  • Saisissez l'adresse électronique d'un collègue pour lui envoyer un lien d'invitation.
• synchronisation en temps réel: :
  • Les membres de l'équipe peuvent consulter les dernières conceptions et le code dans le plugin ou sur le site web.
  • Les modifications sont mises à jour instantanément afin de réduire les coûts de communication.

6. déroulement des opérations des fonctions spéciales

• Personnalisation du code: :
  • Ouvrez "AI Settings" dans le plugin et téléchargez les échantillons de code existants de votre équipe.
  • L'IA analyse les règles et les structures de nommage pour générer un code plus conforme aux habitudes de l'équipe.
• conception réactive: :
  • Sélectionnez "Responsive" dans le plugin et faites glisser le curseur du point de rupture (par exemple 768px, 1200px).
  • Prévisualiser différents effets d'écran pour assurer l'adaptation du code.
• Site d'édition: :
  • Cliquez sur "Publier comme site web" dans le plugin.
  • Créez un nom de domaine (plan payant requis) pour générer un site web autonome.

Recommandations d'utilisation

• première tentativeLes logiciels d'aide à la décision : Commencez par une conception simple et familiarisez-vous avec le processus de génération de code.
• Une conception optimiséeLes avantages : Améliorez la qualité du code avec la mise en page automatique de Figma.
• plan de paiementPour une utilisation fréquente, il est recommandé de souscrire au plan Pro ou Enterprise pour bénéficier d'un nombre illimité d'exportations et d'une assistance de premier ordre.