STRUCTURE : Figma to HTML
https://medium.com/yudiz-solutions/free-figma-alternative-plugins-for-dev-mode-f10111618cbe
📌 STRUCTURE est un plugin FIGMA qui vous permet de générer du code HTML et SASS directement à partir des designs Figma.
Vous pouvez créer instantanément le code en cliquant sur inspecter après avoir sélectionné un élément, qu’il s’agisse d’un objet, d’un composant, d’un cadre ou de toute autre chose. Cette approche rationalisée permet d’extraire facilement la structure du code qui s’intègre de manière transparente dans le flux de travail de développement. Gagnez du temps et améliorez la précision de votre processus de codage avec le plugin Structure.
MAIS… un problème avec les générateurs de code peut être la redondance du code, en particulier avec les objets Figma où l’on peut trouver des instances à l’intérieur d’instances à l’intérieur…
Afin d’obtenir un code beaucoup plus propre, vous pouvez utiliser différentes options :
- utiliser » ↑ » pour fusionner un div (et ses propriétés css) avec le div parent
- utiliser » – » pour supprimer un élément du code
La fusion et la suppression affectent à la fois le code HTML et le code généré par SASS. Vous pouvez expérimenter librement, car vous trouverez un bouton d’annulation, si quelque chose ne s’est pas passé comme prévu.
Si vous cherchez d’autres alternatives à STRUCTURE, en voici quelques-unes :
https://www.figma.com/community/plugin/753195897635985866/htmlgenerator
https://www.figma.com/community/plugin/971127575300155852/react-native-styling-inspector
