⚙️ Plugins

STRUCTURE : Figma to HTML

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/917838882021857002/figma-to-html-android-ios-react-xamarin-wordpress-javafx

https://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui

https://www.figma.com/community/plugin/753195897635985866/htmlgenerator

https://www.figma.com/community/plugin/971127575300155852/react-native-styling-inspector

Laisser un commentaire

En savoir plus sur Clement MONDARY

Abonnez-vous pour poursuivre la lecture et avoir accès à l’ensemble des archives.

Continue reading