De Framer à Figma : UnHTML face à l'import web de Framer pour les designers

Réponse courte : ils vont dans des sens opposés

L'import web de Framer et UnHTML ne sont pas des concurrents directs, car ils déplacent le contenu dans des sens opposés. L'extension de navigateur de Framer copie des parties d'une page web et les colle dans Framer. UnHTML est un plugin Figma qui reconstruit une page web sous forme de calques dans Figma.

Si vous avez cherché "framer vers figma", vous avez probablement un site publié sur Framer et vous avez besoin de l'avoir dans Figma sous une forme modifiable. Dans la documentation de Framer que nous avons trouvée, rien ne couvre ce sens. Cet article explique ce que fait chaque outil, montre un chemin pratique depuis une page Framer publiée jusqu'à Figma, et met les deux côte à côte. Les prix et les fonctions ont été vérifiés le 2026-10-13.

Dans quel sens va chaque outil

Framer documente deux façons d'amener du contenu extérieur dans un projet Framer. La première est une extension de navigateur qui copie des sections d'une page web en ligne pour que vous les colliez dans un projet Framer. La seconde est un plugin Figma officiel, distinct, qui importe dans Framer les calques Figma sélectionnés. Les deux se terminent dans Framer.

UnHTML se termine dans Figma. C'est un plugin qui convertit une page web en frames, texte, images, vecteurs et auto layout natifs. La bonne question n'est donc pas "lequel est meilleur", mais "où voulez-vous que le résultat vive ?"

Si vous avez déjà lu à propos de la direction dans laquelle une conversion va réellement pour d'autres outils, la même logique s'applique ici. Vérifiez la destination avant de comparer les fonctions.

Ce que fait l'import web de Framer

L'outil de Framer est une extension Chrome appelée HTML to Framer. Installez-la, ouvrez votre site, survolez un élément et copiez-le. Maintenez Maj pour copier plusieurs éléments à la fois, ou appuyez sur Échap pendant le survol pour sélectionner l'élément parent. Dans Framer, vous collez avec Cmd+V sur Mac ou Ctrl+V sous Windows.

Framer indique que, lorsque vous collez une section contenant plusieurs éléments, les div vides sont supprimés, ce qui donne une hiérarchie de calques propre. Une fois les éléments sur le canevas, vous pouvez les modifier, ajouter des breakpoints et publier.

Framer est aussi franc sur la suite. Sa leçon conseille d'utiliser ce qui a été collé comme point de départ, puis de vérifier la mise en page, les ressources et le comportement responsive sur le canevas. C'est une attente raisonnable pour toute conversion.

Deux réserves sur les sources. La page de l'extension date du 5 septembre 2023 et n'indique ni limites ni prix. La leçon de Framer précise qu'elle est antérieure à la mise à jour du 16 juin 2026 (Agents, Branching et le CMS), donc une partie de l'interface peut avoir changé. Nous n'avons pas vérifié les conditions de forfait actuelles de Framer, c'est pourquoi cet article ne les donne pas.

Pour une équipe qui veut construire dans Framer, c'est un moyen rapide de rapatrier des sections d'un site existant. Il n'est pas conçu pour vous fournir des calques Figma.

Ce n'est pas un défaut de l'outil, c'est une question d'usage. Qui veut poursuivre une page dans Framer n'a pas besoin de calques Figma, et qui travaille dans Figma n'a pas besoin de calques Framer. L'essentiel est de connaître la destination avant d'investir du temps dans un import.

Ce que vous obtenez dans Figma

UnHTML traduit le CSS de la page en structure Figma. L'espacement, le padding, le wrap et le stretch viennent du CSS flex et grid de la page et deviennent de l'auto layout. Le centre d'aide de Figma définit les éléments que vous verrez : direction (verticale, horizontale ou grid), gap, padding, wrap, et les modes de redimensionnement Hug contents, Fill container et Fixed. Figma documente ces propriétés d'auto layout en détail, et notre référence sur la correspondance entre flexbox et auto layout couvre le côté CSS.

Quand un frame ne peut pas reproduire la géométrie capturée, le plugin se rabat sur le positionnement absolu. Les polices non installées sur votre machine sont remplacées, et chaque remplacement figure dans le rapport d'import. C'est un point de départ modifiable, pas un clone au pixel près.

Méthodes de capture et confidentialité

Vous pouvez glisser dans le plugin un fichier .html autonome ou un .webarchive Safari. Pour les sites en ligne, les ressources distantes ou les pages construites avec JavaScript, vous capturez d'abord un scene.json avec la CLI ou un bookmarklet. Avec les réglages par défaut, l'import ne fait aucune requête réseau, et la récupération de ressources distantes est une option à activer.

Tarifs au 2026-10-13

La page du plugin lui-même liste trois prix uniques, sans abonnement :

La page précise que les prix de lancement peuvent changer, et qu'un achat finalisé conserve le prix payé.

Amener un site Framer publié dans Figma

Ce chemin traite votre page Framer publiée comme n'importe quel autre site web. Le prérequis est que la page soit publiée, car vous capturez ce que voit un navigateur.

1. Ouvrez la page publiée dans Chrome ou Safari.
2. Enregistrez-la en fichier HTML autonome (voir comment exporter du HTML autonome depuis Chrome), ou capturez un scene.json avec la CLI si la page dépend de scripts ou de ressources distantes.
3. Ouvrez Figma, lancez le plugin et déposez le fichier.
4. Lisez le rapport d'import. Repérez les polices remplacées et les frames qui sont revenus au positionnement absolu.
5. Nettoyez et transformez en composants ce que vous comptez continuer à modifier.

Attendez-vous à des différences. Les sites Framer sont souvent animés et très responsives, et une capture enregistre l'état d'un seul viewport. Vérifiez les breakpoints qui comptent pour vous et reconstruisez les interactions à la main, car une capture statique ne contient aucun comportement.

Il existe d'autres outils dans cette catégorie. Si vous comparez un autre plugin du web vers Figma, comparez les prix, les limites de calques et le résultat sur la même page avant de choisir. Pour cet article, nous n'avons vérifié aucun outil d'export côté Framer, nous ne les traitons donc pas.

Côte à côte

Le tableau montre une différence de destination, pas de qualité. L'outil de Framer est le chemin le plus court si le site terminé doit vivre dans Framer. Le plugin Figma est le chemin le plus court si le travail terminé vit dans Figma, où les calques sont natifs et l'auto layout est réel.

Lequel utiliser

Choisissez selon la destination. Si vous amenez une page dans un projet Framer, utilisez l'extension de Framer et vérifiez le résultat sur le canevas, comme le conseille Framer. Si vous amenez une page Framer publiée dans Figma, capturez la page et importez-la avec un outil côté Figma, puis lisez le rapport d'import avant de vous fier aux calques. Dans les deux cas, considérez le résultat comme un point de départ et prévoyez du temps pour le nettoyage. C'est vrai même pour une page qui semble propre au premier regard : comparez l'import à l'original avant de construire dessus.

Questions fréquentes

Framer peut-il exporter un site vers Figma ?

La documentation de Framer que nous avons trouvée couvre le sens inverse : un plugin Figma pour amener des calques Figma dans Framer, et une extension de navigateur pour amener des sections de pages web dans Framer. Nous n'avons pas trouvé d'export officiel de Framer vers Figma, donc le chemin pratique consiste à capturer la page publiée et à l'importer dans Figma.

L'import web de Framer produit-il des calques Figma ?

Non. L'extension copie des éléments depuis une page en ligne et vous les collez dans un projet Framer, le résultat est donc fait de calques Framer.

Combien coûte UnHTML ?

Selon unhtml.pro au 2026-10-13 : Free à $0 avec une limite de 500 calques par import, Pro à $39 par éditeur en paiement unique, et Studio à $119 pour jusqu'à cinq éditeurs.

Le résultat dans Figma sera-t-il identique à la page Framer ?

Non. Les polices non installées sont remplacées, et une géométrie complexe peut revenir au positionnement absolu. Considérez l'import comme un point de départ modifiable, pas comme un clone.