} @media(min-width : 500px) {.ilfs_responsive_below_title_1 { width : 300px ; } } @media(min-width : 800px) {.ilfs_responsive_below_title_1 { width : 336px ; } }
Desech Studio vous aide à générer du HTML/CSS à partir de Figma, Sketch, XD Designs gratuitement. Il prend un fichier Figma ou un projet Sketch de votre part et génère le code HTML et CSS correspondant. Pour les projets souvent, il ne génère pas vraiment le code frontal précis, car vous devrez encore le modifier un peu. Et c’est pourquoi il vous offre également un puissant éditeur HTML visuel.
Avec cela, vous pouvez rapidement convertir un wireframe en un code HTML/CSS fonctionnel. Il ne prend que le fichier et fait le plus de travail sur lui-même. Lorsqu’il génère le code final, il l’ouvre dans un éditeur, où vous pouvez modifier les éléments HTML en fonction de vos besoins. Vous pouvez configurer chaque élément en mode WYSIWYG et voir un aperçu de la conception finale en mode bureau ainsi qu’en mode mobile.
Il consolide tous les actifs sur l’interface principale et vous pouvez facilement naviguer entre eux. Vous pouvez travailler sur des types d’éléments spécifiques et lorsque vous avez terminé, vous pouvez également exporter n’importe quel projet sous forme de fichier ZIP. Il prend en charge les thèmes clair et sombre et peut simplement modifier n’importe quel fichier et enregistrer les modifications dans le projet.
Générez gratuitement du HTML/CSS à partir de Figma, Sketch, XD Designs : Desech Studio
Vous pouvez télécharger Desech Studio à partir d’ici, puis installez-le. C’est un logiciel multiplateforme, donc peu importe si vous utilisez Linux, MAC ou Windows ; vous pourrez l’utiliser facilement. Après l’avoir téléchargé et installé, vous devrez également créer un compte gratuit sur le site Web principal.
La toute première chose que vous devez faire ici est d’importer un projet. Il prend en charge Adobe XD, Sketch, Figma par défaut et vous pouvez importer n’importe lequel de vos prototypes d’interface utilisateur ou wireframe à partir de n’importe lequel d’entre eux. Pour cet article, j’utiliserai Figma, je viens donc de coller l’URL du fichier Figma pour le télécharger. Attendez qu’il télécharge toutes les ressources et les assemble.
Une fois cela fait, il ouvrira le design dans l’éditeur. Vous pouvez maintenant modifier presque tous les aspects de la conception ici. Le code a été généré et il vous suffit de cliquer sur n’importe quel élément pour l’éditer ou le modifier. Cependant, le HTML final peut ne pas être précis, mais vous pouvez le faire en modifiant quelques éléments manuellement.
Vous pouvez voir le navigateur de fichiers sur le côté gauche. Et l’éditeur dans le volet de droite. Il suffit de sélectionner un fichier dans le navigateur, puis d’apporter des modifications dans le volet de droite. Vous pouvez modifier les aspects HTML de base tels que la largeur, la hauteur, le remplissage, etc.
Enfin, lorsque vous avez fini de peaufiner le design, vous pouvez simplement l’exporter. Utilisez l’option Fichier > Exporter pour enregistrer le projet actuellement ouvert en tant que fichier ZIP. C’est aussi simple que cela.
De cette façon, vous pouvez utiliser ce logiciel simple et puissant pour convertir vos conceptions en code fonctionnel. Il n’est pas parfait et vous fera certainement gagner beaucoup de temps. Aussi, j’espère que dans les futures mises à jour, il s’améliorera et sera capable de générer le code HTML/CSS final avec plus de précision.
Réflexions finales :
Il n’y a pas de si bons outils ici pour convertir les conceptions d’interface utilisateur en code HTML fonctionnel. Desech Studio fait un pas dans cette direction, et je pense qu’il fait du bon travail pour l’instant. Dans les futures mises à jour, j’espère qu’il y aura plus de fonctionnalités et une génération d’ode HTML plus précise.
