Capturer une page derrière une connexion pour l'importer dans Figma

Pour importer une page protégée par une connexion, connectez-vous vous-même, enregistrez la page depuis ce navigateur sous forme de fichier, puis déposez le fichier dans le plugin. Ne donnez pas une URL au plugin en espérant qu'il saura se connecter. Un Web Archive Safari ou un fichier HTML autonome contient la page telle que votre navigateur l'a affichée, donc l'import n'a rien à authentifier.

Ce guide s'adresse aux designers et aux développeurs qui ont un tableau de bord, un écran d'administration ou une version de staging, mais aucun fichier de design. Il couvre les pages que vous avez le droit de consulter, comme votre propre produit, l'application de staging d'un client ou un compte que vous payez. Ce n'est pas un moyen de contourner un mur de connexion, et rien ici n'y aide.

Prérequis : un compte qui peut déjà voir la page, et soit Safari sur un Mac, soit un moyen d'enregistrer du HTML autonome depuis votre navigateur.

Pourquoi un import par URL ne peut pas voir la page

Une requête neuve vers une URL connectée ne transporte aucun cookie, donc le serveur répond par l'écran de connexion ou par une redirection. Un outil qui part de cette requête convertirait l'écran de connexion. Ce n'est pas ce que vous vouliez.

La CLI de capture documentée d'UnHTML prend une URL et une option de sortie, et lance un vrai navigateur headless qui récupère les ressources sans limites CORS et avec un défilement de la page entière. La documentation publiée ne mentionne ni cookies, ni en-têtes, ni état de connexion. Cet article ne suppose donc pas que la CLI ou le bookmarklet puissent porter une session, et vous ne devriez pas le supposer non plus. La voie fiable est celle où votre propre navigateur se charge de la connexion.

Un serveur de développement local est un cas voisin, avec ses propres étapes. Si c'est votre situation, voyez importer une application Next.js qui tourne sur localhost.

Enregistrez la page depuis votre propre Safari connecté

Le format Web Archive de Safari enregistre une page complète, avec les images, le CSS et le JavaScript liés, dans un seul fichier, comme le décrit Wikipedia. Comme vous l'enregistrez depuis l'onglet déjà ouvert, le fichier contient ce que cet onglet affichait. Pour un guide plus détaillé, voyez enregistrer une page en Web Archive Safari.

Les étapes sur Mac

1. Connectez-vous et ouvrez la page dans Safari.
2. Attendez la fin du chargement, y compris du contenu qui se charge au défilement. Descendez une fois jusqu'en bas.
3. Ouvrez le menu Fichier et choisissez Enregistrer sous.
4. Réglez le Format sur Web Archive. Les formats Source de la page et Page web, HTML uniquement n'empaquettent pas les ressources liées de la même façon.
5. Enregistrez le fichier et notez où il a été placé.

Ce que contient l'archive

L'archive se compose d'une ressource principale, de ses sous-ressources et des archives de ses sous-frames, donc les iframes imbriquées gardent leurs propres ressources. C'est un instantané de la page telle qu'elle était affichée au moment de l'enregistrement. C'est l'atout face à une connexion : le contenu enregistré ne dépend plus de votre session.

Sur iPhone ou iPad

Safari sous iOS ou iPadOS 13 et suivants peut enregistrer le même format. Ouvrez la page, touchez l'icône de partage, choisissez Enregistrer dans Fichiers et un emplacement accessible depuis un Mac, comme iCloud Drive. Déplacez le fichier sur votre Mac avant d'importer.

Que faire si vous travaillez dans Chrome

Si Chrome est votre navigateur de tous les jours, utilisez plutôt un enregistrement en HTML autonome. Les étapes sont dans exporter du HTML autonome depuis Chrome. Un fichier autonome emporte ses images, ses styles et ses polices, ce dont le plugin a besoin.

Vous croiserez peut-être aussi l'API d'extensions pageCapture de Chrome, qui enregistre un onglet en MHTML. C'est une API pour les auteurs d'extensions, pas une entrée de menu. Elle exige l'autorisation pageCapture dans le manifeste, et la documentation indique qu'un fichier MHTML ne peut être chargé que depuis le système de fichiers et seulement dans le frame principal. De plus, MHTML ne figure pas parmi les types de fichiers que le plugin documente. Considérez-le donc comme une expérience, pas comme une étape de ce flux.

Préparez la page avant de l'enregistrer

L'instantané conserve ce qui est à l'écran, alors préparez d'abord l'écran.

• Mettez l'application dans l'état que vous voulez concevoir. Ouvrez le menu, développez le tableau, changez d'onglet. Une liste déroulante fermée est un calque que vous n'obtiendrez jamais.
• Remplacez les vraies données par des données de test. Utilisez un compte de test ou des données de staging. Les noms, e-mails et chiffres de clients d'un fichier enregistré voyagent avec lui jusque dans votre fichier de design et partout où vous le partagez.
• Laissez les animations se terminer. Un contenu qui continue de s'afficher après le chargement peut se figer à mi-rendu dans un instantané enregistré, ou perdre entièrement son contenu d'autres origines (cross-origin). Si un graphique s'anime à l'arrivée, attendez la fin avant d'enregistrer.
• Vérifiez que vous avez le droit de la copier. Consultez les conditions applicables au produit avant de transférer ses écrans dans un fichier de design.

Pourquoi l'import reste sur votre machine

Une page connectée contient souvent des données que vous ne voudriez envoyer nulle part. Avec les imports de fichiers, rien n'est envoyé. Les imports par défaut ne font aucune requête réseau et rien ne quitte votre machine, selon le site d'UnHTML. Récupérer des ressources distantes et exécuter les scripts de la page est une option unique, désactivée tant que vous ne l'activez pas. Lorsqu'elle est activée, les scripts ne s'exécutent que dans un frame isolé (sandbox) et le balisage est d'abord assaini : les scripts, les gestionnaires d'événements en ligne et les URL javascript: sont supprimés.

C'est pourquoi ce flux convient à une page protégée par une connexion. La session n'arrive jamais chez un tiers, et le fichier que vous avez enregistré est la seule entrée.

Que vérifier après l'import

Un import est fidèle, pas exact au pixel, et le rapport d'import vous indique où il a dû se rabattre sur une solution de repli. En 2026, trois points reviennent le plus souvent sur les écrans d'application :

• Polices. Toute police non installée localement est remplacée, par Inter par défaut, et chaque remplacement figure dans le rapport. Les interfaces de produit utilisent souvent une police sous licence, attendez-vous donc à des remplacements.
• Calques. L'offre gratuite plafonne un import à 500 calques et bascule ensuite en positionnement absolu. Un tableau de données dense peut atteindre la limite très vite.
• Grilles. Les grilles CSS complexes qui ne se laissent pas convertir en auto layout basculent en positionnement absolu.

Les liens de la page enregistrée ne fonctionnent que tant que leurs pages de destination restent en ligne, et ces destinations peuvent vous redemander de vous connecter.

Conclusion

Connectez-vous vous-même, enregistrez un instantané de la page que vous pouvez utiliser, puis importez le fichier en local. La connexion reste dans votre navigateur, les données restent sur votre machine, et l'import reçoit une page figée à convertir. Commencez avec un compte de test, attendez que la page se stabilise et lisez le rapport d'import avant de vous fier au résultat.