Figma est un puissant outil pour concevoir des interfaces de sites web et d’applications. Il permet de créer et partager des prototypes au pixel près.
Avec Adobe XD, c’est un indispensable pour tout concepteur-designer UX/UI.
Découvrez un plugin qui vous fera gagner un temps précieux pour vos créations : html.to.design
Le plugin qui permet d’importer une page web dans Figma en un clic.
Comment importer un site web dans Figma ?
Comment positionner tel CTA ?
Pourquoi utiliser cette couleur avec cette police de caractères ?
Avoir du trafic sur son site c’est très bien. Avoir du trafic qui convertit c’est encore mieux.
Pour les adeptes du SEO par exemple, la combinaison avec une bonne UX est très importante. On parle d’ailleurs souvent de SXO.
Travailler en détail ses maquettes est donc un prérequis indispensable.
Mais ça peut être parfois long… Très long… 
Prototypage dans Figma
Figma est un outil SaaS qui permet de concevoir et prototyper des interfaces utilisateurs (UI design). Il présente l’avantage d’être gratuit, collaboratif, et assez facile d’accès.
Vous avez défini votre offre ? Vous savez vers quelle cible vous tourner ? Vous avez bien défini vos personas ?
« Ok super, yapluka mettre tout ça en ligne et c’est parti ! »
Ben non évidemment.
La phase de prototypage sert de colonne vertébrale pour votre expérience utilisateur.
On passe du simple croquis papier à une mise en situation animée.
L’interface est-elle accessible ?
Ergonomique ?
Les écrans sont-ils liés entre eux de façon cohérente ?
Designer des interfaces sur Figma, c’est super important.
C’est aussi un très bon exercice de méditation :
- Conception du design system.
- Définition de la forme et des couleurs des boutons.
- Concentration optimale pour positionner une icône au pixel près.
- Réflexion sur les écarts, les alignements.
Bref ça peut être aussi prendre énormément de temps !
Importer une page web existante dans Figma en un clic
Ca y est, vous êtes prêt à vous lancer sur la conception de vos maquettes !
Bien souvent, vous ne partez pas de zéro. Quelques cas d’usage :
- Vous avez trouvé de l’inspiration sur un autre site.
- Vous avez trouvé le template de vos rêves sur le site d’un célèbre CMS.
- Vous souhaitez retravailler une page importante de votre propre site et n’avez pas la maquette.
- Vous avez conçu vos maquettes il y a longtemps sur un autre outil qui n’est pas compatible.
- Vous souhaitez collaborer sur un design avec des équipes à distance.
Vous pensez qu’il va falloir passer plusieurs heures à tout reprendre à la main sur un support vierge ?
Et c’est là que la magie du plugin html.to.design opère, littéralement en un clic. La preuve en vidéo sur le site de l’IA juridique Ordalie, un outil SaaS français façonné pour le droit.
Impressionnant, non ?
Deux façons de procéder :
– Soit en tapant l’url directement dans le plugin Figma comme sur la vidéo.
– Soit en utilisant l’extension chrome html.to.design sur le site en question. L’outil vous génère alors un fichier à importer dans Figma.
C’est cher ?
La version freemium permet d’importer dix écrans par mois gratuitement.
Au-delà les premiers forfaits démarrent à 9$ par mois.
On peut importer tous les formats ?
Oui ! Que ce soit en version smartphone, tablette ou desktop. Attention si vous cochez les trois formats en même temps et que vous utilisez la version freemium, cela décompte évidemment trois importations sur les dix gratuites.
Pour en savoir plus : html.to.design | Convert any website into fully editable Figma designs