Website to Figma : importer un site dans Figma pour une refonte

Toute refonte commence par la même tâche ingrate : faire entrer le site actuel du client dans votre outil de design. Les captures d'écran sont rapides, mais inutilisables d'emblée. Reconstruire les pages à la main est précis, mais dévore des jours que vous préféreriez consacrer à la refonte elle-même.

Ce guide montre comment importer un site web dans Figma (website to Figma) sous forme de vrais calques modifiables avec HTML to Frames, et comment transformer cet import en une proposition de refonte que votre client comprendra en un coup d'œil. Il s'adresse aux agences et aux designers freelances, mais le workflow fonctionne tout aussi bien pour les équipes internes qui auditent le site de leur propre produit.

Pourquoi importer le site actuel dans Figma ?

Une proposition de refonte est une argumentation. Vous dites au client : « voici ce que vous avez, voici ce que ça devrait être, et voici pourquoi ». Cet argument est bien plus convaincant lorsque la partie « ce que vous avez » est exacte et modifiable.

• Vous auditez le vrai site. Espacements, échelle typographique, usage des couleurs et dérive des composants sont visibles dans le panneau des calques, au lieu d'être devinés à partir d'une capture d'écran.
• Vous redessinez sur la structure existante. Changez un hero, remplacez un style de carte, retravaillez la navigation, tandis que le reste de la page reste intact pour le contexte.
• Vous montrez l'avant et l'après côte à côte. Même taille de frame, même contenu, design différent. Les clients comprennent instantanément.
• Vous économisez le temps de reconstruction. Les heures que vous auriez passées à redessiner le site actuel servent à explorer des options.

HTML to Frames convertit une page en vrais frames, textes, vecteurs et images Figma, pas en image plate. Pour comprendre cette distinction, lisez HTML to canvas ou calques modifiables.

Website to Figma ou URL to Figma : quelle différence ?

Les deux expressions sont recherchées et désignent en pratique le même workflow. URL to Figma décrit généralement le mécanisme : collez un lien, obtenez un design. Website to Figma décrit le périmètre : plusieurs pages d'un même site, souvent sur plusieurs tailles d'écran. HTML to Frames couvre les deux, d'un simple import URL to Figma à une capture Website to Figma complète avec les pages liées.

Étape 1 : planifier les pages à capturer

Avant d'ouvrir Figma, listez les pages qui portent le récit de la refonte. Pour la plupart des sites marketing :

1. La page d'accueil
2. Une landing page ou une page produit clé
3. Les tarifs
4. La page à propos ou équipe
5. L'index du blog et un article
6. La page contact ou une page de formulaire clé

Vous avez rarement besoin de tout le plan du site. Il vous faut une page par gabarit, car ce sont les gabarits que vous allez redessiner. Six à dix pages suffisent généralement, ce qui tient parfaitement dans un seul import Multiple.

Étape 2 : importer plusieurs pages d'un coup

Ouvrez le plugin et utilisez la source Multiple. Collez jusqu'à 10 liens ; ils sont traités l'un après l'autre, et chaque page devient une rangée sur le canvas. L'import Multiple est disponible sur tous les plans, Free compris.

Quelques détails comptent pour le travail en agence :

• Un site = une largeur. Desktop utilise la Site width : le plugin mesure la largeur de design réelle de la page au moment de l'import. Les designs pleine largeur arrivent en 1920 avec le contenu centré, les sites centrés dans un conteneur à la largeur de ce conteneur (par exemple 1200, 1280 ou 1440), les sites fluides en 1440. Dans un import multipage, toutes les pages du site partagent cette largeur : vos rangées s'alignent.
• Les noms de frames sont lisibles. Les frames sont nommés comme domain/path — Desktop (1920), sans protocole ni www, pour distinguer facilement les pages dans le panneau des calques.
• Les bannières de cookies et popups peuvent être masqués sur demande, et les animations sont figées pour obtenir un frame propre. Le site est capturé tel que le voit un visiteur normal.

Importer les pages liées au lieu de chercher les URL

Si vous n'avez pas encore de liste de pages, importez d'abord la page d'accueil. Après l'import, utilisez Import linked pages : choisissez d'autres pages du même site dans une liste, et elles sont importées comme un import Multiple. C'est le moyen le plus rapide de récupérer les principales cibles de la navigation sans copier les URL depuis le navigateur.

Étape 3 : capturer le Responsive set

Les clients demandent de plus en plus « à quoi ça ressemble sur mon téléphone ? » avant toute autre question. Répondez-y avec de vrais frames.

Activez le Responsive set pour capturer Desktop + Tablet + Mobile en un clic. Tablet fait 768, Mobile 390, et il existe aussi Laptop en 1280. Avec Pro et Team, vous pouvez capturer jusqu'à 4 écrans par import et définir une largeur personnalisée si les statistiques du client révèlent un breakpoint inhabituel. Les écrans d'une même page sont capturés en parallèle.

La facturation reste simple : 1 import = 1 page avec tous ses écrans. Desktop, Tablet et Mobile de la page d'accueil comptent pour un seul import.

Étape 4 : ajouter Light + Dark si le site le permet

Si le site du client réagit à prefers-color-scheme, l'option Light + Dark (Pro) capture la page dans les deux modes. Vous obtenez une collection de variables avec les modes Light et Dark, plus une copie sombre de chaque écran. C'est un excellent point de départ si le mode sombre fait partie du brief de refonte, et cela vous montre immédiatement quels composants n'ont jamais été conçus pour des fonds sombres.

Notez que les fichiers Figma Free n'autorisent qu'un mode par collection : dans un fichier Free, le mode sombre est donc ignoré, avec une note.

Étape 5 : transformer l'import en audit

L'import devient alors un fichier de travail. Avant de redessiner quoi que ce soit, consacrez une heure à l'audit.

Lire le design system qui existe déjà

Avec Styles & variables (Pro), le plugin crée des variables de couleur à partir des couleurs utilisées au moins deux fois et des propriétés personnalisées CSS du site : --brand-primary devient brand/primary. Vous obtenez aussi des styles de texte et d'ombre. Importez deux fois le même site et rien de nouveau n'est créé, car les variables et styles existants sont réutilisés lorsque les valeurs correspondent.

Cette collection est un inventaire honnête. Trente gris presque identiques ou onze tailles de texte courant racontent leur propre histoire dans votre proposition.

Repérer les composants répétés

Avec Components & hover states (Pro), les structures répétées comme les cartes, boutons et éléments de menu deviennent des composants et des instances, et les éléments qui ont une apparence au survol deviennent des ensembles de composants avec variantes Default et Hover. Les composants principaux sont placés dans un frame « Components · site ». Pour un audit, ce frame est un inventaire tout prêt de ce que le site actuel utilise réellement.

Vérifier la structure de la mise en page

La plupart des frames arrivent avec de l'Auto Layout : vous pouvez les redimensionner et les réorganiser. Le plugin construit d'abord la page au pixel près, puis déduit piles, espacements, padding et alignement, et vérifie la position de chaque enfant avant de conserver le résultat. Si un frame ne peut pas être exprimé proprement, il conserve ses positions absolues avec des contraintes adaptées, et l'écran de résultat vous dit pourquoi. Le mécanisme complet est décrit dans L'Auto Layout expliqué.

Garder un calque de référence

Activez Reference screenshot pour ajouter un calque masqué et verrouillé que vous pouvez afficher pour comparer l'import à la page en ligne. Pratique quand un client demande : « c'est vraiment ce que nous avons aujourd'hui ? »

Étape 6 : construire la proposition de refonte

Avec un « avant » exact et modifiable, la proposition se construit presque toute seule.

Dupliquer, puis redessiner

Dupliquez chaque rangée importée. Gardez l'original comme Avant, nommez la copie Après, et commencez à redessiner sur la copie. Comme le contenu est fait de vrais textes et de vraies images, vous redessinez avec les textes et les photos du client, pas avec du lorem ipsum.

Présenter des planches avant/après

Placez les frames Avant et Après côte à côte, à la même largeur. Pour chaque gabarit, ajoutez deux ou trois annotations expliquant le changement : hiérarchie plus claire, formulaires plus courts, meilleur contraste, composants consolidés.

Prototyper le parcours

Les liens entre pages importées deviennent des interactions Navigate, et les en-têtes fixes ou sticky continuent de fonctionner en mode Present. Vous pouvez donc parcourir le site actuel puis la proposition dans le même prototype, ce qui donne une démonstration convaincante lors d'un appel.

Avant et après : ce qui change dans votre workflow

Plan Team et licences pour les agences

Les agences ont généralement plus d'un designer sur une refonte. Voici comment les plans y répondent :

• Free : $0, 10 imports par mois, 1 écran par import, import Multiple avec 10 liens. Idéal pour tester le workflow sur un petit site.
• Pro : $7 par mois au lancement (prix normal $9), imports illimités dans la limite d'un usage raisonnable, jusqu'à 4 écrans par import, plus styles et variables, Snap, composants et survol, Light + Dark, largeur personnalisée, Detailed layers, Reference screenshot et Extra wait. Acheté via le paiement propre à Figma.
• Team : $22 par mois au lancement (prix normal $29), mêmes fonctionnalités que Pro, 5 postes via une clé de licence partagée.

Pour une agence qui mène quelques refontes par mois, Team donne à tous le même ensemble de fonctionnalités sans que chaque designer ait à acheter séparément. Voir les tarifs pour le détail.

Exemple de planning : un sprint de refonte de deux semaines

Voici à quoi peut ressembler un sprint type une fois l'import pris en charge par le plugin. Adaptez-le à votre processus.

L'étape d'import, qui demandait auparavant un ou deux jours de reconstruction, se réduit à la première matinée.

Astuces pour gagner du temps sur les sites clients

• Utilisez Extra wait (Pro) pour les sites qui chargent leur contenu tardivement, comme les sliders ou les sections différées.
• Choisissez la langue de la page pour les sites multilingues ; le plugin prend en charge 15 langues.
• Réglez d'abord les polices. L'écran Missing fonts propose des remplacements avant la création et mémorise vos choix pour chaque site.
• Réimportez en un clic quand le client livre une modification en cours de projet. L'URL source est enregistrée sur le frame.
• Attention au contenu intégré. Les cartes, vidéos sans image d'aperçu et canvas WebGL arrivent sous forme de capture de leur bloc, car ils ne peuvent pas devenir des calques.
• Les pages avec connexion passent par le navigateur. Pour les portails clients ou tableaux de bord protégés par une connexion, utilisez l'extension Chrome ; voir notre guide localhost et pages avec connexion.

Données client et confidentialité

On demande souvent aux agences comment les contenus des clients sont traités. Les pages sont rendues dans un navigateur isolé et cloisonné (sandbox), livrées une seule fois, puis supprimées de la mémoire, et jamais écrites sur disque. Le plugin ne lit pas le contenu de votre fichier Figma ; il se contente d'écrire des calques. La page sécurité contient les détails que vous pouvez transmettre à un client.

En résumé

Importer le site web d'un client dans Figma sous forme de calques modifiables transforme la première étape, la plus fastidieuse, d'une refonte en un simple import. Vous obtenez un « avant » exact, un audit construit à partir du vrai CSS du site, et un fichier où la proposition grandit naturellement à côté de l'original. Commencez par un gabarit, vérifiez le résultat, puis importez le reste du site avec Multiple et Import linked pages.

Prêt à essayer ? Découvrez toutes les fonctionnalités, lisez la documentation, ou installez le plugin et lancez votre premier import.