-25% sur toutes les formations avec le code : 
Figma que l’on ne présente plus est un outil de design collaboratif qui va vous permettre de concevoir des interfaces web de manière très pratique. L’une des fonctionnalités que Figma met en avant est la possibilité d’exporter les designs que vous avez créé vers différents formats que les développeurs apprécieront tout particulièrement : pure Html, React ou Vue.
Avant de rentrer dans le vif du sujet, commençons par nous intéresser à la fonctionnalité d’inspection dans Figma.
Inspecter les éléments dans Figma :
L’utilité de pouvoir inspecter les différents éléments dans Figma est de pouvoir voir exactement le code css pour les sites web et Andoird et Iphone pour les applications.
Pour ce faire, il vous suffit de :
- Sélectionner un élément sur votre plan de travail
Cliquer sur “Inspect” sur le coin supérieur droit de l’outil.
Nous avons différentes informations sur le titre de niveau 2 que nous venons de sélectionner : la largeur, la hauteur, la typographie (font, taille, espacement des lettres par exemple).
Si vous scroller un peu plus sur la barre latérale droite, vous aurez des information sur le code css, iOS et Android. Ce qui est très utile pour les développeurs qui souhaitent respecter au pixel près un design web ou d’application mobile.
Exporter un design Figma en html avec Anima
Après avoir designé et prototypé votre design sur Figma, vous avez la possibilité d’exporter votre création en html css à travers un plugin que vous pouvez installer depuis le Figma Community.
Petit rappel sur le Community, c’est un espace où les utilisateurs de Figma pourront télécharger des ressources gratuites pour faciliter notre quotidien de designer : Plugins, widgets, FigJam, Design Systems, Wireframes, Illustrations, Icones, Typographies, Design mobiles, Web design et Ui Kit. C’est pour ainsi dire, une mine d’or !
On sélectionne notre Frame qui contient notre page web, et on va chercher notre plugin en cliquant droit et en sélectionnant Plugins > Anima :
La fenêtre du plugin va s’ouvrir sur le côté gauche de l’écran, cliquez sur
Sélectionnez ensuite “Get Code” et le language de programmation souhaité : Html, React ou Vue.
Dans cette étape, il faudra créer un compte sur Anima pour pouvoir profiter de cette fonctionnalité. Vous pouvez tester l’outil pendant 14 jours avant qu’il soit payant. Notez que vous avez également la possibilité d’héberger votre site internet directement sur cette plateforme à l’image de Webflow.
Votre code est prêt sur Anima, cliquez sur “Open Code Mode” :
Cliquez sur “Export Code”. Vous pouvez retravailler proprement votre code pour qu’il corresponde avec ce que vous souhaitez, notamment pour optimiser le réferencement avec la sémantique des titres h1, h2, h3…
Exportez votre code en choisissant le Framework souhaité : Pure html, React ou Vue. Vous pouvez tester Anima pendant 14 jours.
Voilà, votre code est exporté.
Vous voulez aller plus loin dans la prise en main de Figma ?
Je vous propose une formation complète de 5h qui va vous permettre de devenir complètement autonome sur l’outil :
