Dekolage Academy

Exporter un design Figma en html css pour un développeur web

Rhalid Hidoun

Rhalid Hidoun

Consultant et Formateur en Marketing Digital

Exporter Figma en html

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
Exporter Figma html css

Cliquer sur “Inspect” sur le coin supérieur droit de l’outil.

Inspecter élément Figma html css

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).

Inspecter élément Figma css Android iOS

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 !

Commençons par chercher Anima dans le Figma Community et installons ce plugin :
Anima export html React Vue Code

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 :

Plugin Figma Anima export html React Vue Code

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.

Figma Code html Anima

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.

Anima projet export html

Votre code est prêt sur Anima, cliquez sur “Open Code Mode” :

Figma Anima telecharger code html

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…

hmtl css react vue code

Exportez votre code en choisissant le Framework souhaité : Pure html, React ou Vue. Vous pouvez tester Anima pendant 14 jours.

export html en zip

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 4h qui va vous permettre de devenir complètement autonome sur l’outil :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.