Convertir n’importe quel site en maquettes Figma avec le plugin “Html.To.Design”

October 10, 2023
Convertir n’importe quel site en maquettes Figma avec le plugin “Html.To.Design”

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.

LIENS PRATIQUES

Plugin Figma

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Utilisez le plugin "Insert Big Image" pour importer de grandes images depuis FigmaUtilisez le plugin "Insert Big Image" pour importer de grandes images depuis Figma
Le plugin Figma "Insert Big Image" permet d'importer des images de grande taille sans perte de qualité. Il découpe l'image en plusieurs images plus petites, chacune respectant la limite de 4096 pixels de Figma.
Lignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans FigmaLignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans Figma
Le plugin Autoflow pour Figma simplifie la création de connexions entre les frames, offrant des lignes intelligentes, esthétiques, et évitant intelligemment les obstacles. Il est idéal pour les concepteurs d'applications mobiles, d'interfaces web, et d'autres projets de conception.
Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”
Le plugin Material Design Icon pour Figma vous permet d'intégrer facilement des icônes Material Design dans vos créations. Il propose une interface intuitive, une large sélection d'icônes, et des fonctionnalités de personnalisation avancées.