À l’ère de l’IA générative, nous nous attendons à ce que l’IA nous comprenne simplement. Et dans de nombreux cas, elle le fait déjà. Et c’est pure magie quand un outil fournit exactement ce dont vous avez besoin, basé sur une simple instruction.

Notre objectif chez Anima est d’automatiser l’ingénierie du front-end pour que les humains ne perdent pas leur temps. En 2023, l’IA d’Anima a produit plus de 750 000 extraits de code, soit l’équivalent de 1 000 ans de codage humain. Avec plus d’un million d’installations sur la plateforme de Figma, Anima est à la pointe de la transformation du design en code.

Dans la prochaine phase, nous nous engageons plus profondément dans l’automatisation du codage quotidien du front-end.

Les LLM actuels ne comprennent pas le front-end et l’interface utilisateur

Il existe de nombreux modèles de génération de code, allant de la complétion de code aux instructions. Il y a plusieurs copilotes populaires – des assistants de codage qui vous aident à coder plus rapidement et qui sont basés sur ces modèles de code.

Cependant, en ce qui concerne l’automatisation du front-end, nous pensons qu’il y a un grand fossé entre ce qui existe et ce qui est possible. Avec les capacités d’Anima et notre compréhension de ce domaine, nous visons à combler ce fossé.

C’est pourquoi, aujourd’hui, nous annonçons Frontier – un assistant de codage par IA pour les développeurs construisant du front-end.

Frontier – Génération de code IA, avec votre code, et adapté pour le front-end

Anima Frontier rencontre les développeurs là où ils se trouvent, l’IDE. En commençant par VSCode, l’IDE le plus populaire.

Premièrement, Frontier analyse l’ensemble du code et cartographie votre système de conception, vos frameworks, conventions et composants. Cette étape prend quelques secondes et se fait localement, garantissant ainsi la sécurité maximale de votre code.

Deuxièmement, en utilisant le moteur de transformation du design en code de pointe d’Anima, Frontier analyse votre design et comprend simplement ce qui se trouve dans la version du design et le code du système de conception.

Enfin, vous pouvez choisir n’importe quelle partie du design Figma directement dans VSCode, et obtenir du code basé sur VOTRE code. Et c’est magique.

Demander un accès

Accroître l’adoption des Design Systems grâce à l’automatisation

Les projets matures ont souvent des centaines, voire des milliers de composants. La gouvernance et l’adoption des design systems (systèmes de conception) sont des tâches difficiles mais cruciales pour maintenir ces projets. L’automatisation aide.

Sécurité et garde-fous de l’IA

Frontier a été conçu pour offrir une solution sécurisée de niveau entreprise.

L’adoption de l’IA dans les entreprises connaît plus de frictions en raison des préoccupations courantes en matière de confidentialité :
– Confidentialité des sorties : Comment garantir que notre code ne « fuit » pas dans le modèle LLM via le training du modèle, ce qui signifie que d’autres entreprises pourraient recevoir des extraits de votre code ?
– Confidentialité des entrées : Comment garantir que le code d’autres entreprises, qui pourrait avoir été ajusté ou entraîné dans le LLM, n’entre pas dans notre base de code, entraînant des préoccupations de sécurité et de droits d’auteur ?

Pour générer du code qui intègre l’interprétation d’Anima du design Figma, mais utilise les composants de la base de code de l’utilisateur, nous aurions pu choisir la voie facile et simplement entraîner le LLM autour de la base de code. Cela a des implications sévères en matière de confidentialité et de sécurité, car nous aurions dû télécharger une quantité significative de code utilisateur/entreprise et entraîner un LLM personnalisé autour de celui-ci. Nous réalisons à quel point la sécurité et la confidentialité sont critiques, en particulier pour les développeurs dans des environnements d’entreprise. Nous avons donc pris une direction complètement différente.

Au lieu de télécharger le code dans le cloud, nous avons mis en place une collecte de données locale, un indexage et des modèles ML, localement, dans VS Code. Ceux-ci identifient et indexent le code pertinent sur la machine du développeur. Les informations collectées sont stockées localement, en tant que partie de la base de code, ce qui signifie qu’elles peuvent être partagées en toute sécurité au sein de l’équipe via Git – et non via le cloud. Lorsqu’un composant particulier doit être instancié, nous pouvons effectuer une quantité significative de prétraitement localement et envoyer au LLM dans le cloud uniquement une petite quantité de code et d’informations nécessaires – pas assez pour exposer l’entreprise à un risque quelconque d’entrée ou de sortie. Cette approche innovante a l’avantage supplémentaire des performances, car la plupart des opérations sont effectuées sur l’ordinateur rapide du développeur.

Sous le capot de Frontier – LLMs, ML et architecture axée sur l’IA

Anima Frontier automatise le front-end avec l’IA, basé sur la vaste expérience d’Anima dans ce domaine et utilisant la technologie la plus avancée pour la mission.

Nous voyons souvent des projets « du dimanche » impressionnants qui sont alimentés à 99 % par les LLMs et ont des résultats étonnants 30 % du temps. Ce sont des projets sympas, mais ils ne conviennent pas aux professionnels.

Les LLMs, aussi puissants soient-ils, ouvrent de nouvelles portes mais ne sont pas des solutions miracles ; ils nécessitent un environnement de soutien. Chez Anima, nous testons et benchmarkons, en choisissant le bon outil pour la bonne tâche. En ce qui concerne les LLMs, nous leur fournissons le contexte, validons leurs résultats et les mettons en place pour réussir.

Dans le processus de résolution de ce problème complexe, nous l’avons décomposé en dizaines de problèmes et exigences. Certains problèmes nécessitent de la créativité et sont mieux résolus avec les LLMs, et certains modèles sont plus rapides et plus performants que d’autres. Certains de ces problèmes nécessitent des problèmes classiques de Machine Learning / Vision par ordinateur, c’est-à-dire la classification plutôt que la génération. Certains sont mieux résolus avec des heuristiques.

En combinant les meilleures solutions pour chaque problème individuel, nous pouvons produire des résultats époustouflants avec un risque minimal d’hallucinations de LLM, si courantes dans les solutions de code basées sur LLM.

Quelle est la suite pour Frontier

Alors que nous cherchons à utiliser tout ce qui est possible avec l’IA pour aider les développeurs à coder plus rapidement le front-end, il semble que nous ne faisons que gratter la surface. Anima Frontier devrait pouvoir fusionner le code avec les mises à jour de conception, réparer le code cassé, comprendre les états et la thématisation, nommer correctement les éléments, lire les spécifications et penser de plus en plus comme un développeur humain.

Nous avons une liste riche de fonctionnalités, et nous avons besoin de vous pour nous dire ce qui vous dérange le plus et ce que vous attendez de l’IA pour les développeurs de front-end aujourd’hui. Rejoignez la conversation sur le canal Discord d’Anima.

Demander un accès

The post Anima présente: Frontier, l’avenir du front-end par Anima appeared first on Anima Blog.

Anima convertit facilement les conceptions Figma en code HTML ou React responsive, en permettant aux utilisateurs de définir des breakpoints – points d’arrêt (media queries) pour un projet Figma.

Imaginez que vous avez passé des heures à perfectionner la conception d’un site web dans Figma. Il est superbe sur votre ordinateur. Mais ensuite, vous le vérifiez sur un smartphone, et il se réduit tellement mal que les lettres ne sont que des pixels. Alors, vous créez plusieurs prototypes pour chaque résolution et partagez plusieurs liens avec les parties prenantes et les ingénieurs. Dans le meilleur des cas, vous obtenez une résolution correcte, et les autres sont loin d’être parfaites au pixel près. Ce scénario est trop courant dans le monde du design numérique, où soutenir plusieurs résolutions n’est pas juste un défi ; c’est une nécessité. C’est ici que les breakpoints interviennent.

En utilisant des points d’arrêt, Anima assure que votre conception s’ajuste automatiquement pour paraître sous son meilleur jour, que ce soit sur un smartphone, une tablette ou un écran de PC. La bonne mise en page s’affichera.

Que sont les breakpoints?

Les breakpoints (points d’arrêt) sont des points spécifiques dans le processus de conception où le contenu et la mise en page d’un site web s’adaptent pour correspondre à différentes tailles d’écran ou résolutions. Cette adaptation garantit qu’un site reste fonctionnel et visuellement attrayant sur divers appareils.

Pourquoi devriez-vous utiliser des points d’arrêt ? Voici quelques raisons clés :

1. Amélioration de l’Expérience Utilisateur : En adaptant votre site web ou application pour qu’il apparaisse et fonctionne bien sur n’importe quel appareil, vous touchez un public plus large. Cette inclusivité rend votre conception plus conviviale, en accommodant les utilisateurs sur des ordinateurs de bureau, des tablettes et des téléphones mobiles.

2. Lisibilité et Clarté : Les points d’arrêt permettent aux concepteurs de peaufiner non seulement l’échelle des éléments de conception mais aussi leur positionnement, visibilité, contenu et fonctionnalité. Cette personnalisation est cruciale pour les appareils à différentes résolutions, assurant que les éléments ne sont pas seulement visibles mais également placés où ils sont les plus efficaces et faciles à interagir avec. Par exemple, concevoir une page d’atterrissage qui s’adapte bien à différents appareils peut conduire à une meilleure engagement et taux de conversion des utilisateurs.

3. Avantages SEO : Les moteurs de recherche privilégient les sites web adaptés aux mobiles. Un design réactif qui s’adapte à différentes tailles d’écran à l’aide de points d’arrêt est plus susceptible d’être mieux classé dans les résultats de recherche. Ce classement supérieur peut entraîner une visibilité accrue et plus de trafic.

4. Efficacité dans la Communication : Pendant le processus de conception, utiliser des points d’arrêt peut simplifier la communication avec les parties prenantes ou les clients. Au lieu de multiples liens pour différentes résolutions, un seul lien peut montrer comment un design s’adapte à diverses tailles d’écran. Cette efficacité non seulement accélère le processus d’approbation mais aide également à faire une impression plus forte avant le début du développement technique.

Les points d’arrêt sont donc un élément essentiel dans la boîte à outils des designers modernes, leur permettant de créer des designs réactifs et centrés sur l’utilisateur qui assurent que le produit final est accessible et engageant pour tous les utilisateurs, quel que soit l’appareil utilisé.

The post De Figma au site web adaptatif – avec les breakpoints appeared first on Anima Blog.

La dernière version d’Anima avec IA Générative et ce qui nous attend

Anima est une plate-forme de design-to-code (du design au code) basée sur l’IA, transformant Figma/XD en un code exécutable au pixel près.
En arrière-plan, les éléments de Machine Learning nomment déjà automatiquement les couches et nettoient le code, afin que les ingénieurs puissent créer 2 fois plus rapidement.

Anima est le leader dans le domaine du design-to-code – Avec plus de 750 000 installations, Anima est le plugin Figma n°1 de la communauté des développeurs. Nous sommes fiers de servir des équipes de géants de l’industrie comme Amazon, Cisco, Samsung et Deloitte. Les utilisateurs révelent une réduction de 50 % du temps de codage de l’interface utilisateur, grâce à Anima.

La longue traîne des conventions de codage

Jusqu’à présent, nous nous sommes concentrés sur le code React et HTML haut de gamme. La qualité du code d’Anima est inégalée en termes de pixellisation parfaite, de propreté et de maintenabilité.

Au cours des 12 derniers mois, nous avons organisé des sessions Zoom avec plus de 1 000 équipes R&D. Bien que 44 % du marché choisissent React pour de nouveaux projets, la pile technologique Front-end est fragmentée. Dans 1000 équipes, il existe plusieurs référentiels, chacun avec ses propres conventions.

L’entrée de l’IA générative (GenAI)

La combinaison du moteur de génération de code de pointe d’Anima avec les capacités du GenAI (IA générative) signifie davantage de frameworks, un développement plus rapide et le maintien d’un code haute performance.

L’utilisation de LLM (grand modèle de langage) nous permet de prendre en charge davantage de conventions de codage et de faire évoluer notre offre plus rapidement.

Étant donné qu’Anima intègre des tests visuels et que Figma prend en charge les fonctionnalités, des mises en page aux styles, en passant par les composants et les interactions, vous obtenez tout cela immédiatement.

Ce que cela signifie aujourd’hui

À partir d’aujourd’hui, les utilisateurs d’Anima pour Figma peuvent commencer à exporter leur conception vers Vue/CSS, Vue/Tailwind (Vue 2 et Vue 3) et les composants en React/Styled components. En JavaScript ou TypeScript. Cette matrice de frameworks de code, de styles et de conventions continuera de croître rapidement.

Grâce à la puissance de l’intelligence artificielle, nous sommes sur le point d’étendre notre support de framework, offrant aux développeurs une gamme encore plus large d’options pour leurs besoins de développement front-end. Que vous travailliez avec des frameworks établis comme Angular, Ember.js et Backbone.js, ou que vous exploriez des technologies plus récentes comme Svelte, Meteor ou Aurelia, notre produit sera prêt à vous aider. Nous comprenons que le paysage du développement front-end est diversifié et notre approche basée sur l’IA garantit que nous pouvons répondre à des projets de toutes tailles et de toutes complexités.

De plus, pour ceux qui recherchent la simplicité et l’efficacité, des frameworks tels que Mithril, Alpine.js et Stencil peuvent également bénéficier de notre génération de code frontal améliorée par l’IA. L’avenir nous offre des perspectives passionnantes alors que nous exploitons l’IA pour améliorer continuellement les capacités de nos produits et prendre en charge divers cadres, garantissant ainsi que nous restons à la pointe de l’innovation dans le paysage du développement front-end.

Simple mise en garde, l’IA peut prendre un peu plus de temps pour créer le code, mais le résultat est d’une qualité et d’une efficacité de premier ordre. De plus, il est personnalisé selon les conventions de codage de votre équipe.

Anima vs multimodal

Anima avec GenAI et les grand modèle de langage (LLM) multimodaux sont tous deux des innovations révolutionnaires, mais ils servent différentes niches dans le paysage technologique. Alors qu’Anima s’efforce de combler le fossé entre la conception et le développement en convertissant directement les plates-formes de conception telles que Figma en code exploitable, tel que React, les LLM multimodaux combinent compréhension textuelle et traitement visuel pour comprendre et générer du contenu selon plusieurs modalités. Considérez Anima comme un outil spécialisé qui rationalise le processus de développement Web et d’applications, transformant les plans de conception en réalité sans avoir besoin de codage manuel. En revanche, les LLM multimodaux comme ChatGPT d’OpenAI avec des capacités de saisie d’images visent davantage à élargir les horizons de l’IA, en lui permettant d’interpréter et de produire du texte et des images de manière synergique. Les deux sont transformateurs, mais tandis qu’Anima optimise le flux de travail pour les concepteurs et les développeurs, les LLM multimodaux ouvrent de nouvelles portes pour une création et une compréhension complètes de contenu basées sur l’IA.

Anima excelle dans la traduction de conceptions en code au pixel près, capturant avec précision chaque détail de plateformes comme Figma. En revanche, bien que les LLM multimodaux soient polyvalents dans la gestion à la fois du texte et des images, ils ne sont pas adaptés à la tâche exigeante de réplication parfaite de la conception au code. Anima garantit la fidélité du design ; Les LLM offrent une large compréhension du contenu.

Et après?

Dans la prochaine version d’Anima, nous élevons l’expérience du design-to-code à des niveaux de personnalisation sans précédent. Reconnaissant que chaque équipe de développement a son propre style et ses propres conventions de codage, Anima permettra désormais aux utilisateurs de fournir un échantillon de leur propre base de code. La plate-forme analysera et s’adaptera ensuite intelligemment, garantissant que le code généré non seulement conserve une fidélité de conception parfaite au pixel près, mais s’intègre également de manière transparente aux modèles et conventions de codage existants du projet de l’utilisateur. Cette approche personnalisée promet de réduire considérablement le temps d’intégration et de garantir que le résultat s’intègre parfaitement dans n’importe quelle base de code.

The post Bienvenue dans l’IA Générative du Design-to-Code par Anima appeared first on Anima Blog.

De Figma a Vue: Convertissez n’importe quel design Figma en code Vue

Si vous essayez de convertir Figma en Vue sans écrire le code à partir de zéro, cet article est fait pour vous. Nous allons vous montrer comment exporter vos designs Figma au format Vue en quelques étapes simples à l’aide d’Anima.

Anima transformera chaque propriété de design en code Vue (Vue2 et Vue3) avec Typescript ou Javascript.

Avec Anima, vous pouvez désormais transformer les créations Figma en :

React, HTML ou Vue
Utiliser Typescript ou Javascript
Avec CSS  (Vue avec Tailwind CSS sera bientôt disponible avec AI Beta).

Allons-y :

Étape 1 : Ouvrez Anima dans Figma

Si vous êtes un nouvel utilisateur, vous pouvez utiliser le champ de recherche et saisir Anima.

Étape 2 : Sélectionnez Vue avec Typescript ou Javascript

Ensuite, vous devrez modifier la sélection de code pour qu’elle corresponde à vos besoins actuels :

• Framework : choisissez Vue dans la liste déroulante du framework
• Langue : cochez Javascript ou Typescript en fonction de vos préférences

Anima l’enregistrera comme préférence de code par défaut. Vous pouvez le modifier à tout moment.

Étape 3 : Sélectionnez un composant, un calque ou un cadre Figma

Après avoir sélectionné la section de conception, le codegen AI d’Anima commencera à générer Vue.

Si vous avez déjà utilisé Anima avec HTML ou React, vous constaterez peut-être que la génération du code prend plus de temps que d’habitude. La raison en est notre nouvelle version bêta de l’IA ! Mais ne vous inquiétez pas, cela prend de la vitesse.

Étape 4 : Obtenez votre code

Une fois que vous êtes satisfait du code sélectionné, vous disposez de 3 options . Vous pouvez:

• Copier des extraits directement en cliquant sur cette icône ici :
• Télécharger la sélection en cliquant sur le bouton « Download selection » (« Télécharger la sélection ») pour obtenir un fichier zip contenant le package de code complet pour votre sélection
• Voir le code live en cliquant sur « Ouvrir dans CodeSandbox » pour exécuter votre code instantanément dans CodeSandbox.

Oui, c’est aussi simple que çà! À ton tour:

Plugin Anima pour Figma
Créer un compte Anima
Dites-nous comment ça se passe sur la chaîne Discord d’Anima

The post De Figma a Vue: Convertissez n’importe quel design Figma en code Vue appeared first on Anima Blog.

Comment exporter Tailwind CSS depuis Figma

Obtenez du Tailwind CSS à partir de votre design Figma

Cet article vous montrera comment exporter des designs Figma en Tailwind CSS à l’aide d’Anima.

Anima transforme les propriétés du design en styles prédéfinies de Tailwind. Les attributs du design, tels que les couleurs, l’espacement et la typographie, seront traduits en classes Tailwind concises. Si vous utilisez des styles et des variables, la génération de code AI d’Anima les générera en tant que fichier de configuration Tailwind (conf.

Tailwind est le choix idéal pour les développeurs souhaitant rationaliser leur flux de travail et créer facilement des applications Web réactives.

Alors, découvrons comment vous pouvez amener vos designs Figma dans le monde de la magis de Tailwind CSS!

Avec Anima, vous pouvez désormais transformer les designs Figma en :

• React, HTML ou Vue
• Utilisant Typescript ou Javascript
• Avec CSS ou Tailwind CSS

Alors, allonz-y!

Comment convertir des conceptions Figma en Tailwind 

Étape 1 : Exécutez le plugin Anima sur le design Figma souhaité

Ouvrez le plugin Anima dans votre mode préféré (Mode Classique ou Mode Dev). Vous pouvez utiliser le champ de recherche si vous êtes un nouvel utilisateur et tapez Anima. Il vous faudra vous inscrire à Anima. Cela prend quelques secondes, promis.

Étape 2 : Sélectionnez React, Typescript / Javascript + Tailwind

Ensuite, vous devrez modifier la sélection de code pour qu’elle corresponde à vos besoins actuels :

• Framework : choisissez React dans la liste déroulante du framework
• Langue : cochez Javascript ou Typescript en fonction de vos préférences
• Sélectionnez Tailwind CSS sous la sélection Style

Ceci sera enregistré comme préférence de code par défaut. Vous pouvez le modifier à tout moment.

Étape 3 : Sélectionnez un composant, un calque ou un cadre Figma
Sélectionnez maintenant simplement la section que vous souhaitez exporter avec Tailwind et Anima générera son code.

Étape 4 : Obtenez votre code
Une fois que vous êtes satisfait du code sélectionné, vous disposez de trois options :

1. Copiez les extraits avec le bouton ou avec votre raccourci clavier. Cliquez sur « Copy code » (copier le code)
2. Téléchargez tous les fichiers ensemble sous forme de zip en cliquant sur « Télécharger la sélection ».
3. Voyez comment votre code s’exécute en cliquant sur « Ouvrir dans CodeSandbox ». En voici un par exemple : lien CodeSandbox.

Maintenant c’est ton tour!

Plugin Anima pour Figma

Créer un compte Anima

Dites-nous comment ça se passe sur la chaîne Discord d’Anima

The post Comment exporter Tailwind CSS depuis Figma appeared first on Anima Blog.

Si vous vous demandez comment convertir Figma en React, vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment transformer instantanément des composants Figma en composants React (sans quitter Figma) à l’aide d’Anima.

Anima est un partenaire officiel de Figma et notre IA de génération de code est nativement intégrée au mode Dev de Figma. Avec Anima dans le mode Dev de Figma, vous pouvez générer du code efficace, facile à lire et à maintenir, pour n’importe quel composant ou design Figma, en temps réel.

Voici ce que vous pouvez attendre du code d’Anima :

• un code React + TypeScript/JavaScript avec prise en charge de sous-composants pouvant s’exécuter instantanément.
• des composants React interactifs basés sur les variantes et accessoires Figma.
• un CSS Flex basé sur l’Auto Layout de Figma.

Allons-y!

Comment convertir des conceptions Figma en code React avec Anima

Anima vous propose deux façons de générer du code React à partir de designs Figma :

1. Code React pour des écrans entiers et des flux complets (nécessite un accès en écriture dans Figma): 
   • La meilleure option pour les prototypes et MVP (Produit Minimum Viable) basés sur React.
   • Synchronisez les écrans Figma et les flux complets avec l’application Web d’Anima.
   • Exportez React (JSX ou TSX) pour votre sélection synchronisée, avec prise en charge des points d’arrêt (« breakpoints ») et des liens Figma entre les pages.
   • Nécessite une synchronisation externe et un traitement du code. **
2. Code React pour les composants individuels (disponible avec accès en lecture seule dans Figma) ): 
   • L’option la plus efficace et la plus accessible pour les développeurs qui souhaitent des composants React réutilisables.
   • Transformez les composants Figma en composants React (JSX ou TSX) dans le Dev mode de Figma.
   • Générez, inspectez et copiez instantanément le code du composant sélectionné, ainsi que de ses sous-composants individuels.
   • Téléchargez un package de code complet ou ouvrez-le dans CodeSandbox en un clic.

Option 1 : Générer du code React pour les flux complets

Étape 1 : Ouvrez le plugin Anima dans Figma

Étape 2 : Sélectionnez l’option « Turn Design to Code » (« Transformer le design en code »).

Étape 3 : Sélectionnez les composants, écrans ou flux Figma que vous souhaitez convertir en React.

Avec cette option, Anima connectera les différentes tailles d’écran que vous avez définies avec des points d’arrêt (breakpoints) et les convertira en requêtes multimédias pour produire un code React réactif à partir de n’importe quelle conception dans Figma.

Étape 4 : Cliquez sur le bouton « Sync » en bas du plugin.

Étape 5 : Cliquez sur « Go to Anima » (« Aller à Anima ») une fois la synchronisation terminée.

Étape 6 : Vous serez dirigé vers votre projet dans l’application web d’Anima, où vous sélectionnerez l’icône « <> Code » pour passer en mode code.

Étape 7 : Sélectionnez « React » parmis les options, choisissez « Javascript » ou « Typescript » et cliquez sur « Change to React » 

Étape 8 : Cliquez sur le bouton « Export code » (« Exporter le code ») en haut à droite de l’écran, où vous pouvez télécharger un fichier zip de votre package de code pour une sélection, un écran ou un projet entier spécifique.

Option 2 : Générer du code React pour les composants et écrans individuels

Étape 1 : Passez en mode Dev à l’aide de l’interrupteur en haut du panneau d’inspection de Figma, puis sélectionnez l’onglet « Plugins ».

Étape 2 : Exécutez le plugin Anima pour le mode Dev (si vous ne le voyez pas dans la liste, saisissez « Anima » dans le champ de recherche).

Étape 3 : Sélectionnez n’importe quel composant, écran ou design de Figma.

Étape 4 : Dans le panneau de droite, vous obtiendrez du code exécutable React et CSS . Vous pouvez utiliser l’interrupteur pour passer à Tailwind.

Vous pouvez facilement basculer entre l’instance sélectionnée de votre composant (« Usage ») et sa définition complète (« Source »), qui inclut toutes les variantes et sous-composants.

Vous pouvez également basculer entre JSX et TSX en utilisant la liste déroulante au-dessus de la fenêtre de code.

Étape 5 : Cliquez sur « Download selection » (« Télécharger la sélection ») pour un fichier zip avec tout votre code ou cliquez sur « Open in CodeSandbox » (« Ouvrir dans CodeSandbox ») pour l’exécuter instantanément.

Le voici dans CodeSandbox

Créez une interface 2 fois plus rapide avec les composants React instantanés dans Figma Essayez Anima gratuitement

The post Figma to React: Comment convertir un design Figma en composants React appeared first on Anima Blog.

Si vous vous demandez comment convertir vos plans de travail Figma en HTML sans écrire le code vous-même, vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment exporter vos cadres et prototypes Figma au format HTML prêt pour la production en quelques étapes simples à l’aide d’Anima.

Créer des prototypes haute fidélité dans Figma, Adobe XD et Sketch, puis exporter-les avec Anima en fichiers de code, en quelques clics seulement.

En converstissant directement Figma en HTML, vous pourrez créer des prototypes web,déployer vos propres sites web ou pages de destination, et remettre aux développeurs des packages de code pour l’ensemble de l’interface utilisateur afin d’accélérer le développement.

Alors allons-y!

Comment convertir des designs Figma en HTML

Vous pouvez exporter un package de code HTML complet ou obtenir un code de composant individuel à partir de votre design Figma. Voici deux façons simples d’obtenir du HTML et du CSS à partir de Figma, en utilisant Anima :

• • Option 1: Convertir un projet complet en code HTML / CSS
  • Option 2: Copier ou exporter un snippet de code / un component en HTML / CSS

Option (1) : Obtenez le code HTML pour un projet complet avec l’application web d’Anima (accès en modification requis)

Étape 1 : Exécutez le plugin Anima dans le mode édition de Figma

Tout d’abord, ouvrez votre projet Figma en mode Édition (le mode principal) et exécutez le plugin Anima.

Si vous avez déjà exécuté Anima en mode Dev, il apparaîtra sous « Recents ».

Étape 2 : Synchronisez le projet Figma que vous souhaitez exporter au format HTML

Afin d’ouvrir le projet Figma dans l’application web d’Anima, vous devrez le synchroniser (Sync) (How to sync your design).

Étape 3 : Sélectionnez vos options d’exportation (HTML et CSS) et le code d’exportation

Cliquez sur « Export Code » en haut à droite et sélectionnez « Full Project » (« Projet complet »). Il ouvrira ensuite une fenêtre contextuelle pour confirmer le framework que vous souhaitez exporter. Dans ce cas, nous sélectionnerons « HTML », « Pixels » (Px) et « Flexbox » (pour conserver le comportement réactif défini dans le design Figma).

Cliquez sur « Download ZIP » et voilà. Le package de code de votre projet est prêt.

Option (2) : Copiez ou exportez un fichier de code HTML directement depuis Figma (Edit Mode ou Dev Mode) :

Tout d’abord, ouvrez Figma et accédez au panneau Inspecter. En haut du panneau, vous trouverez une bascule verte pour le mode Dev. Cliquez dessus, puis passez à l’onglet « Plugins ».

Étape 1 : Exécutez le plugin Anima

Ensuite, vous devez ouvrir le plugin Anima pour le mode Dev.

Si vous ne le voyez pas dans la liste, vous pouvez saisir Anima dans le champ de recherche (voir ci-dessus). À partir de là, vous pouvez exécuter le plugin ou l’épingler en haut du panneau pour un accès facile.

Étape 2 : Sélectionnez un composant, un calque ou un cadre Figma

Sélectionnez n’importe quel composant, calque ou cadre Figma pour obtenir son code HTML correspondant en temps réel. Vous pouvez ensuite copier le code depuis le panneau, l’ouvrir dans CodeSandbox ou télécharger le package de code.

Cette option est la plus rapide et la plus simple pour les composants et écrans individuels. Il est parfait pour le transfert des développeurs puisque le mode Dev est accessible en « Read Only » (accès lecture seule).

Mais si vous souhaitez exporter un projet complet, avec plusieurs pages et interactions, vous devrez utiliser l’application web d’Anima. Mais ne vous inquiétez pas, c’est quand même assez simple et rapide !

Que contient le package de codes ?

Le package de codes téléchargé est enregistré sur votre ordinateur sous forme de fichier zip à l’emplacement sélectionné. Dans ce fichier zip, vous pouvez trouver tous les fichiers nécessaires à votre conception (cela inclut les fichiers HTML, CSS, images et polices).

Une fois les fichiers décompressés, vous pouvez les prévisualiser localement dans le navigateur en double-cliquant sur le fichier HTML. Vous pourrez voir tous vos éléments réactifs et interactions, tout comme le produit final !

L’ouverture des fichiers dans un éditeur de texte vous présentera un code HTML et CSS bien structuré.

• Pour chaque écran conçu, vous recevez son fichier HTML et CSS.
• Les écrans avec points d’arrêt partagent le même fichier HTML et CSS.

Prêt à exporter du code HTML prêt pour la production depuis vos créations Figma ?

Bienvenue à bord, c’est parti !

• Plugin Anima pour Figma
• S’inscrire à Anima

Vous voulez apprendre à créer des sites Web réactifs et à ajouter des vidéos, des liens, des interactions et bien plus encore ? Consultez la chaîne YouTube d’Anima

The post Comment exporter Figma en HTML appeared first on Anima Blog.