Importer dans Figma une page derrière un login

La page dont vous avez besoin dans Figma est souvent celle vers laquelle vous ne pouvez pas faire de lien. Pourquoi coller l'URL renvoie un formulaire de connexion, et quoi vérifier sur les outils qui passent outre.

La page dont vous avez vraiment besoin dans Figma est souvent celle vers laquelle vous ne pouvez pas faire de lien. Un outil d'administration interne. Un tableau de bord qui ne se remplit qu'une fois connecté. Une build de préproduction pas encore publique. Vous collez l'URL dans un convertisseur et il vous renvoie l'écran de connexion, parce que c'est bien ce qu'il a vu.

Il existe un contournement, et ce n'est pas une astuce : c'est une architecture différente. Voici pourquoi la conversion par URL échoue ici, ce que font réellement les alternatives, et quoi vérifier avant de faire passer une page privée dans l'une d'entre elles.

Pourquoi coller une URL ne peut pas marcher

Quand un outil demande une URL, quelque chose du côté de l'outil ouvre cette URL. Un serveur, ou un navigateur headless tournant sur un serveur. Cette machine a sa propre position réseau et son propre pot à cookies vide. Ce n'est pas vous.

Elle arrive donc sur votre tableau de bord en visiteuse anonyme et reçoit exactement ce que reçoit un visiteur anonyme : un formulaire de connexion. Réessayer n'y change rien, parce que ce qui manque, c'est votre session, et votre session vit dans votre navigateur.

C'est aussi pour ça que l'échec est si constant. Ce n'est pas un bug que quelqu'un pourrait corriger : un serveur ne peut pas voir une page qui exige d'être vous.

Les contournements qui ne marchent pas

• Coller votre cookie de session dans l'outil. Certains acceptent des en-têtes. Sans parler de l'inconfort à confier un jeton de session à un tiers, l'authentification moderne est le plus souvent de courte durée et ne tient pas qu'à un cookie : ça échoue de toute façon.
• Rendre la page publique un moment. Parfois possible en préproduction. Rarement sur quoi que ce soit de réel, et cela change ce que la page affiche.
• Faire une capture d'écran et la redessiner. Vous obtenez une image. Toute la raison d'importer dans Figma, ce sont des calques modifiables, et une capture n'en a aucun.

Ce qui marche : capturer dans le navigateur où vous êtes déjà

Si la conversion se passe dans votre propre onglet, le problème de session disparaît — non parce qu'il a été résolu, mais parce qu'il ne s'est jamais posé. La page est déjà affichée devant vous, connectée, avec les données chargées et les menus dans l'état où vous les avez laissés. Un convertisseur qui s'exécute là lit ce que vous voyez.

C'est l'approche des importeurs basés sur une extension de navigateur, et plusieurs outils en proposent une désormais. Disons-le clairement : capturer une page en session n'est propre à aucun outil en particulier. html.to.design fournit une extension pour les pages derrière un login ou un VPN. D'autres aussi. Si vous lisez quelque part qu'un outil est seul à en être capable, vérifiez.

Ce qui les distingue, c'est ce qui arrive à la capture ensuite.

La question qui compte vraiment : où va la capture ?

Une fois que votre navigateur a lu la page, ces données doivent parvenir à Figma. Il y a deux chemins, et la différence pèse plus lourd que l'étape de capture.

Par un serveur. L'extension téléverse la capture, le plugin Figma la télécharge. C'est pratique, et cela signifie que le contenu d'une page privée — les textes, les noms de clients, les chiffres du tableau de bord — traverse une infrastructure que vous ne contrôlez pas. Les outils construits ainsi proposent en général aussi une option de fichier local, où vous téléchargez la capture et la donnez vous-même au plugin. Cette option est rarement celle par défaut, et il faut savoir qu'elle existe pour la choisir.

Jamais par un serveur. La capture va dans votre presse-papiers ou sur votre disque, et le plugin Figma la lit de là. Rien n'est téléversé parce qu'il n'y a nulle part où téléverser.

Si vous capturez une page sous NDA, une page avec des données clients, ou quoi que ce soit venant d'un environnement réglementé, c'est cette distinction qui intéressera votre équipe sécurité. Pas « est-ce que ça marche derrière un login », puisque toute cette catégorie le fait, mais « le contenu quitte-t-il la machine, et puis-je le vérifier ».

Comment le vérifier plutôt que de le croire

Deux contrôles, rapides tous les deux.

Lire le manifest du plugin Figma

Chaque plugin Figma déclare son accès réseau dans son manifest, et Figma fait respecter cette déclaration : un plugin qui n'en déclare aucun ne peut pas faire de requête, quoi que tente son code. Snapture Import déclare :

"networkAccess": { "allowedDomains": ["none"] }

C'est une capacité que le plugin n'a pas, et non une règle que quelqu'un promet de respecter. Vous pouvez lire le manifest de n'importe quel plugin installé.

Regarder l'onglet réseau

Ouvrez les DevTools, allez sur Réseau, lancez une capture. Vous voyez les requêtes que fait l'extension. Pour Snapture, ce sont les images de la page elle-même, pour qu'elles atterrissent dans votre fichier, plus une vérification de licence si vous êtes sur une offre payante. Si un outil téléverse le contenu de la page, cela se voit ici.

Ce qui passe et ce qui ne passe pas

Capturer la page affichée signifie que vous obtenez l'état que vous regardez, y compris des choses qu'un outil par URL n'atteindrait pas même sur une page publique.

• Menus, modales et popovers ouverts restent ouverts, parce que la capture lit le DOM tel qu'il est au lieu de recharger.
• Les données qui n'existent qu'après connexion — lignes de tableau, valeurs de graphiques, votre propre nom dans le coin — arrivent en texte réel.
• Les champs de mot de passe doivent être masqués par l'outil au moment de la capture. Snapture remplace la valeur par des points avant que quoi que ce soit ne soit écrit ; vérifiez que le vôtre fait pareil avant de capturer un formulaire que vous avez rempli.

Ce qui n'arrive en calques dans aucun outil : les canvas WebGL, les iframes d'une autre origine et les images vidéo. Rien ne peut en faire des vecteurs, parce que ces pixels ne sont pas décrits par le DOM. Le comportement raisonnable est d'insérer une capture nette de cette zone précise plutôt qu'un rectangle gris, et c'est ce que fait Snapture.

Une marche à suivre pour un tableau de bord interne

1. Connectez-vous et mettez la page dans l'état voulu, avec tout panneau ou modale que vous voulez capturer.
2. Descendez une fois jusqu'en bas et remontez. Les tableaux de bord chargent lignes et graphiques au fil du défilement, et ce qui n'est pas affiché ne peut pas être capturé.
3. Capturez la page entière, ou tracez une région si un seul panneau vous suffit.
4. Collez dans Figma. Si des polices sont substituées, installez celles qu'utilisait la page et réimportez : une police substituée remesure le texte et décale tout ce qui suit.

Si le tableau de bord est très grand, capturez la section dont vous avez besoin plutôt que la page complète. Tout outil a un budget, et une capture de région de la partie qui vous intéresse est plus rapide et plus juste qu'une page entière arrêtée par une limite à mi-chemin.

En bref

Les convertisseurs par URL ne peuvent pas voir derrière un login, et c'est structurel, pas un manque que quelqu'un comblera. La capture par extension de navigateur le résout, et plusieurs outils la proposent. La question qui vaut la peine n'est pas de savoir si un outil peut capturer une page en session, mais si le contenu de cette page quitte ensuite votre machine — et celle-là, vous pouvez y répondre vous-même en une minute.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia