Aller au contenu

Collez un lien

URL to Figma : collez un lien, obtenez des calques modifiables

Le moyen le plus rapide d'entrer dans Figma. Collez n'importe quelle URL publique et HTML to Frames rend, mesure et reconstruit la page sur votre canvas.

  • Rendu dans un navigateur isolé et cloisonné (sandbox)
  • Bannières de cookies et popups masqués sur demande
  • Résultat livré une seule fois, jamais écrit sur disque

Bientôt sur la Figma Community

URL to Figma : collez un lien, obtenez des calques modifiables

URL to Figma est le chemin le plus court entre une page en ligne et un design modifiable : copiez l'adresse, collez-la dans le plugin HTML to Frames, choisissez un écran et importez. Aucune extension à installer, aucun code à exporter, aucun fichier à envoyer. C'est le bon choix dès que la page est publique, ce qui couvre la veille concurrentielle, l'analyse de sites inspirants, les sites clients avant une refonte et vos propres pages de production.

Beaucoup de choses se passent entre le collage et le résultat. La page est chargée par le service de capture HTML to Frames dans un navigateur isolé et cloisonné, telle que la verrait un visiteur normal. Si vous le demandez, les bannières de cookies et popups sont d'abord masqués. La page défile pour laisser le contenu à chargement différé apparaître, les animations sont figées pour obtenir un frame propre, et la largeur de design réelle est mesurée pour que le frame Desktop corresponde à la façon dont le site a été construit.

Le plugin lit ensuite la mise en page et les styles calculés et construit des calques Figma natifs sur votre canvas, avec l'Auto Layout appliqué partout où il peut être vérifié. Le texte est modifiable, les SVG deviennent des vecteurs et les images conservent leur cadrage.

La confidentialité fait partie de la conception. Le résultat est livré une seule fois à votre plugin, puis supprimé de la mémoire. Il n'est jamais écrit sur disque, et la trace de la tâche est oubliée au bout de 15 minutes. La page sécurité détaille toute l'architecture.

Pour les pages protégées par une connexion ou en localhost, utilisez plutôt l'extension Chrome. Pour de nombreuses pages, voir Website to Figma. Et pour une première prise en main, le guide Comment convertir HTML en Figma passe en revue chaque option.

URL to Figma en trois étapes

  1. 01

    Copiez l'adresse de la page

    Toute URL publique fonctionne : une page d'accueil, une fiche produit, un article de blog ou un tableau de tarifs.

  2. 02

    Collez-la dans l'onglet Link

    Ouvrez HTML to Frames dans Figma, collez l'URL et choisissez un écran, par exemple Desktop ou Mobile.

  3. 03

    Importez

    La page est rendue, mesurée et reconstruite en calques modifiables sur votre page Figma actuelle.

Ce qui se passe derrière le collage

Navigateur isolé

Les pages se chargent dans un navigateur en sandbox, dans son propre conteneur, séparé de l'API et du décodage des images.

Les popups hors du chemin

Hide cookie banners & popups supprime les fenêtres de consentement avant la capture.

Contenu différé chargé

La page défile pour que le contenu chargé au défilement soit présent, et les animations sont figées.

Largeur mesurée

Le frame Desktop utilise la largeur de design réelle du site au lieu d'une valeur fixe devinée.

Extra wait pour les pages lentes

Avec Pro, laissez plus de temps aux pages lourdes pour finir de se charger avant la capture.

Re-import en un clic

L'URL source est enregistrée sur le frame : vous pouvez l'actualiser après une modification de la page.

Les coulisses d'un import d'URL

Coller un lien semble instantané, mais le service de capture effectue plusieurs opérations pour que le résultat corresponde à ce que voit un visiteur.

  1. Chargement isolé. La page s'ouvre dans un navigateur Chromium en sandbox, qui s'exécute dans son propre conteneur avec des restrictions seccomp. Chaque requête passe par une protection SSRF : une URL ne peut pas servir à atteindre des adresses internes.
  2. Nettoyage. Avec Hide cookie banners & popups activé, les bannières de consentement et les surcouches sont supprimées avant la capture.
  3. Contenu différé. La page défile pour que les images et sections chargées au défilement soient présentes au moment de la capture.
  4. Immobilité. Les animations sont figées, et le WebGL est figé après quelques images : rien n'est capturé en pleine transition.
  5. Mesure. La largeur de design réelle est mesurée : 1920 pour les designs pleine largeur, la largeur du conteneur pour les sites centrés, 1440 pour les sites fluides.
  6. Livraison. La structure capturée est livrée une seule fois à votre plugin, puis supprimée de la mémoire.

Les images sont traitées par un conteneur de décodage séparé, sans accès à Internet. Le plugin construit ensuite les calques localement dans Figma et applique un Auto Layout vérifié. Pour les sites multilingues, l'option Page language vous permet de choisir l'une des 15 langues proposées. La documentation explique chaque option.

Vitesse : choisir les bonnes options

La plupart du temps, un import d'URL ne nécessite que les options par défaut. Si vous voulez l'ajuster, quelques réglages font la plus grande différence :

Écrans

Chaque écran supplémentaire est une capture de plus. Les écrans d'une même page sont capturés en parallèle, et un Responsive set complet compte toujours pour un seul import. Free capture un écran par import ; Pro et Team en permettent jusqu'à quatre.

Full page

Capturer toute la page défilante vous donne le design complet. Désactivez l'option si vous n'avez besoin que du haut de la page.

Images

Laissez les images activées pour un rendu fini, ou désactivez-les si seuls la mise en page et la typographie vous intéressent.

Extra wait (Pro)

Certaines pages continuent de charger du contenu après avoir semblé prêtes. Extra wait leur laisse plus de temps pour que les sections tardives soient incluses.

Detailed layers (Pro)

Une option pour obtenir une arborescence de calques plus détaillée à inspecter, au lieu de la structure par défaut.

Si une page est coupée par une limite de plan, le résultat affiche une bande violette Capture limit bien visible : vous savez toujours si vous voyez la page entière. Pour les différences entre plans, voir les tarifs.

Confidentialité des imports d'URL

Coller une URL signifie que notre service de capture visite cette page en votre nom : il est légitime de se demander ce que deviennent les données.

  • Le rendu a lieu dans un navigateur isolé et cloisonné (sandbox).
  • Le résultat est livré une seule fois à votre plugin, puis supprimé de la mémoire. Il n'est jamais écrit sur disque.
  • La trace de la tâche est oubliée au bout de 15 minutes.
  • Les journaux sont limités : le journal des imports est conservé 180 jours, l'adresse IP en étant supprimée au bout de 30 jours, et le journal de sécurité 90 jours.
  • Aucun suivi : ni cookies, ni analytics, ni pixels de suivi dans le plugin, l'extension ou le site web, et les données ne sont jamais vendues.

Votre identité reste elle aussi réduite au minimum. L'identifiant de compte est dérivé de votre identifiant utilisateur Figma, et nous ne recevons jamais votre nom ni votre e-mail de la part de Figma. Le plugin ne lit pas le contenu de votre fichier Figma. Il écrit de nouveaux calques et ne lit que les métadonnées de ses propres frames, comme l'URL source et la largeur.

Un import d'URL ne fonctionne que pour les pages que le service de capture peut atteindre en tant que visiteur anonyme. Pour tout ce qui est protégé par une connexion, l'extension Chrome capture plutôt depuis votre propre navigateur. Tous les détails figurent sur la page sécurité.

Questions fréquentes

Contacter le support

N'importe quelle page web publique que le service de capture peut ouvrir en tant que visiteur anonyme. Les pages qui nécessitent une connexion, les serveurs de développement locaux en localhost et les adresses de réseaux privés ne sont pas accessibles de cette façon ; utilisez pour celles-ci l'extension Chrome gratuite, qui capture depuis votre propre navigateur.

Seulement si vous le souhaitez. Activez Hide cookie banners & popups et les bannières de consentement et surcouches sont masquées avant la capture, pour ne pas recouvrir la page sur votre canvas. Laissez l'option désactivée si c'est justement la bannière que vous concevez.

Le frame Desktop utilise la largeur de design mesurée, pas celle de votre moniteur. Les designs pleine largeur reçoivent 1920 avec le contenu centré, les sites centrés dans un conteneur reçoivent la largeur de ce conteneur et les sites fluides 1440. Tablet 768, Mobile 390 et Laptop 1280 sont fixes, et Pro ajoute une largeur personnalisée.

Le contenu qui se charge tardivement peut être manqué sur les pages très lentes. Avec Pro, Extra wait laisse plus de temps à la page avant la capture. Si une page a été coupée par une limite de plan, une bande violette Capture limit le signale. L'écran de résultat liste aussi les avertissements.

Non. Les pages sont rendues dans un navigateur isolé et le résultat est livré une seule fois à votre plugin, puis supprimé de la mémoire. Il n'est jamais écrit sur disque, et la trace de la tâche est oubliée au bout de 15 minutes. Aucun cookie, analytics ni suivi n'est utilisé.

Oui. L'URL source est enregistrée sur chaque frame : vous pouvez le réimporter en un clic. C'est utile pour suivre une page au fil des mises en production ou actualiser une référence avant une revue de design, sans recoller l'adresse ni refaire vos réglages d'import.

Arrêtez de redessiner le web.

Collez un lien et obtenez en quelques secondes de vrais calques Figma, modifiables et responsive. Gratuit pour commencer — 10 imports par mois.

Sans carte bancaire. Pro s'achète directement dans Figma.

Bientôt sur la Figma Community