Introduction
Le redesign d'un site web est souvent un projet courant pour les designers. Cependant, sans les assets de design dans Figma, il peut être chronophage de les créer à partir de zéro. Avec "html.to.design", les assets de design existants peuvent être importés automatiquement sur Figma, donnant aux designers des couches modifiables pour leur permettre de déplacer, modifier et redesigner leur site web avec facilité.
Le plugin Figma "html.to.design" facilite grandement le processus de conversion d'une maquette HTML en un design graphique pour les designers web. Ce plugin permet d'importer automatiquement une maquette HTML sur Figma, offrant une solution plus efficace pour la création de design.
Comment l’utiliser
IMPORT VIA URL
Cette fonctionnalité, permet aux utilisateurs de convertir rapidement une page web en design graphique en utilisant simplement son URL. Les utilisateurs peuvent copier et coller l'URL de la page web dans le plugin pour convertir automatiquement la page en design graphique modifiable sur Figma, économisant ainsi du temps et de l'effort par rapport à la création de design à partir de zéro.
SETTINGS
Les paramètres du plugin vous permettent de choisir parmi une liste prédéfinie de types d'écrans tels que les Macbook Pro ou les iPhone avec la résolution d'écran associée. En outre, les utilisateurs peuvent également définir une résolution personnalisée s'ils souhaitent un format différent.
Vous pouvez choisir entre les versions "Light" ou "Dark", en fonction des options disponibles sur le site que l'on souhaite convertir. Enfin, pour les écrans mobiles, les utilisateurs peuvent choisir entre l'orientation portrait et paysage. Cette option est uniquement disponible pour les écrans mobiles proposés par le plugin.
IMPORT VIA CHROME EXTENSION
Le plugin offre également la possibilité d'utiliser une extension Chrome pour importer un site web. Avec l'extension Chrome, vous pouvez convertir n'importe quel site en utilisant le fichier .h2d généré par l'extension. Vous pouvez également convertir des sites en local, non publiés, ce qui est pratique pour les sites en développement.
De plus, l'extension Chrome permet de convertir des comportements particuliers tels que l'affichage d'une modale, d'un élément actif ou d'un onglet d'une page, ce qui vous donne une image plus complète du site.
CAPTURE FULL SCREEN
La fonction "Capture full screen" de l'extension Google Chrome permet de capturer la totalité d'une page web. Cependant, si vous n'avez besoin que d'un composant ou d'un bloc spécifique pour vos designs, vous pouvez également importer uniquement une section de la page. Pour ce faire, cliquez sur "Capture selection".
Conclusion
Pour résumer, le plugin "html.to.design" est un allié précieux pour les designers web. Il convertit facilement les sites en maquette Figma en prenant en compte leur structure. Bien qu'il ne soit pas toujours capable de capturer tous les comportements, l'extension Chrome peut venir en complément. Ce plugin est très utile avec ses nombreuses options et permet de gagner du temps, mais il est limité à 20 captures gratuites par jour. Nous le recommandons pour les designers qui cherchent une solution simple et efficace pour convertir leurs sites en maquette Figma.
