Website to Figma : importez tout le site, pas seulement la page d'accueil

Il existe trois façons d'importer de nombreuses pages d'un site web dans Figma, et elles se combinent bien.

Liens multiples

Collez jusqu'à 10 URL dans l'onglet Multiple. Le plugin les traite l'une après l'autre et place chaque page dans sa propre rangée : la capture Desktop, Tablet et Mobile d'une page reste groupée, et les pages s'empilent les unes sous les autres.

Import linked pages

Après un import, le plugin peut lister les autres pages du même site liées depuis celle-ci. Choisissez celles que vous voulez et elles sont lancées comme un import Multiple. En partant de la page d'accueil, quelques passes suffisent généralement à couvrir la navigation principale.

Dossier de site ou .zip

Si vous disposez du build statique, faites glisser le dossier dans l'onglet Local file ou envoyez un .zip de 30 MB maximum, puis choisissez les pages HTML à importer. Les fichiers sont ouverts depuis la mémoire dans un navigateur isolé et supprimés dès la fin de l'import.

Chaque page compte pour un import, quel que soit le nombre d'écrans. Avec Free, vous disposez de 10 imports par mois ; Pro et Team sont illimités dans la limite d'un usage raisonnable. Voir les tarifs pour le détail.

Un ensemble de frames statiques est utile, mais clients et parties prenantes comprennent un site plus vite lorsqu'ils peuvent le parcourir en cliquant. HTML to Frames conserve la navigation existante :

• Les liens entre pages importées deviennent des interactions Navigate : cliquer sur Tarifs dans le frame de la page d'accueil mène au frame des tarifs.
• Les autres liens conservent une action Open link et s'ouvrent dans le navigateur.
• Les en-têtes fixes et sticky restent en place pendant le défilement en mode Present.
• Les zones de défilement horizontal, comme les carrousels et les barres d'onglets, défilent latéralement.

Avec Pro, les éléments qui ont une apparence au survol deviennent des ensembles de composants avec variantes Default et Hover et une interaction au survol : boutons et éléments de menu réagissent quand vous les survolez.

Le site importé devient ainsi une base que vous pouvez présenter telle quelle. Parcourez l'expérience actuelle, signalez les problèmes avec des commentaires, puis dupliquez les frames et démarrez la refonte à côté de l'original. Comme chaque frame enregistre son URL source, vous pouvez réimporter n'importe quelle page plus tard et comparer le site en ligne à la proposition. Pour en savoir plus sur la structure des pages, voir HTML to frame.

Les connexions de prototype ne sont créées qu'entre les pages faisant partie de l'import : ajouter des pages avec Import linked pages étend donc aussi le parcours cliquable.

Pour une agence de design, la première semaine d'un projet sert souvent à recréer le site existant du client pour avoir quelque chose à refondre. L'importer supprime l'essentiel de ce travail et laisse à l'équipe un fichier déjà organisé.

Un parcours typique ressemble à ceci :

1. Avant la présentation commerciale : importez les gabarits clés du client et activez Styles & variables pour voir le système de couleurs et de typographie réellement utilisé.
2. Pendant la phase de découverte : présentez l'import cliquable au client et annotez les points de friction directement sur les frames.
3. Pendant la refonte : dupliquez les frames et modifiez-les sur place ; les composants extraits des structures répétées accélèrent les changements globaux.
4. Au moment du handoff : réimportez les pages modifiées pour confirmer ce qui a été livré.

Le plan Team offre cinq postes sur une clé de licence partagée, au prix de lancement de $22 par mois, avec jusqu'à quatre écrans par import. Il convient à un petit studio où plusieurs designers importent des sites clients en parallèle.

Les agences qui travaillent pour des clients s'interrogent aussi sur les données. Les pages sont rendues dans un navigateur isolé, les résultats sont livrés une seule fois et ne sont jamais écrits sur disque. Tous les détails figurent sur la page sécurité.