De Webflow à Figma : trois workflows comparés en 2026

Webflow n'a pas d'export natif vers Figma

Il n'existe aucun moyen intégré d'envoyer un site Webflow vers Figma. Chaque workflow capture la page rendue et la reconstruit sous forme de calques Figma. À la date du 2026-10-20, trois types d'outils s'en chargent : des plugins d'import par URL, une extension Chrome et l'import par fichier. Ils s'accordent sur l'essentiel et se distinguent par les entrées acceptées, l'auto layout et le coût.

Ce guide s'adresse aux designers qui héritent d'un site Webflow sans fichier de design et en ont besoin dans Figma sous forme de calques modifiables. Aucun de ces outils ne vous donne un clone exact au pixel près. Vous obtenez des calques que vous pouvez modifier, plus quelques éléments qui se replient ou se perdent. Les sections suivantes précisent lesquels.

L'application officielle va dans l'autre sens

L'application Figma to Webflow de Webflow synchronise composants, variables et styles de Figma vers Webflow. Sa fiche décrit une seule direction, de Figma vers Webflow, et rien dans le sens inverse. Elle est gratuite, mais demande le plugin Figma et l'autorisation de vos workspaces ou sites Webflow.

Le sens inverse est plus difficile, car Webflow n'exporte pas de fichiers source de design. Comme le résume l'équipe de html.to.design dans son guide Webflow, le site en ligne est la seule entrée. C'est pourquoi tous les outils ci-dessous travaillent à partir de la page telle qu'un navigateur la dessine.

Trois façons d'amener une page Webflow dans Figma

Plugins d'import par URL

html.to.design et Vellum fonctionnent dans Figma. Vous collez une URL publiée ou de staging, vous choisissez une largeur, puis vous importez. Le guide de html.to.design mentionne les viewports bureau, tablette et mobile, accepte plusieurs URL à la fois et précise qu'il ne peut importer que des pages publiques. Pour les pages privées, il renvoie à son extension de navigateur. L'article de Vellum de 2026 décrit le même déroulé : publier le site, copier l'URL, choisir l'URL comme source, fixer une largeur.

C'est la voie la plus rapide pour une page marketing publique, et vous ne quittez jamais Figma.

Capture par extension de navigateur

Export to Figma est une extension Chrome. Vous ouvrez la page Webflow, cliquez sur l'extension, choisissez la page entière ou un seul élément, puis collez dans Figma avec Cmd+V ou Ctrl+V. L'éditeur indique qu'une capture prend de 2 à 5 secondes. Comme l'extension lit la page rendue, les pages derrière une connexion fonctionnent si vous êtes connecté dans Chrome, et vous pouvez capturer une seule section au lieu du site entier.

Import par fichier avec UnHTML

UnHTML est l'outil que nous développons, lisez donc cette section en en tenant compte. Le plugin n'accepte pas d'URL. Il importe un fichier .html autonome, un .webarchive Safari ou un scene.json capturé avec la CLI open source ou le bookmarklet. Pour une URL Webflow en ligne, vous lancez d'abord la capture, par exemple node capture/cli/capture.js https://example.com, en enregistrant le résultat sous scene.json, puis vous importez ce fichier. Vous pouvez aussi exporter un fichier HTML autonome depuis Chrome.

C'est une étape de plus que de coller une URL. En échange, vous gardez un fichier de capture que vous pouvez réimporter plus tard ou transmettre à un collègue. Avec les réglages par défaut, l'import n'effectue aucune requête réseau, et le chargement des ressources distantes est une option à activer.

Ce qui passe et ce qui se replie

Les pages des éditeurs s'accordent sur l'essentiel : le texte reste modifiable, les images arrivent comme remplissages et la structure devient des frames. Elles s'accordent aussi sur ce qui se perd. Le tableau reprend ce que chaque éditeur déclare sur sa propre page à la date du 2026-10-20. « Non indiqué » signifie que la page ne dit rien, pas que la fonction est absente.

Interactions et contenu du CMS

Les Interactions Webflow relèvent du comportement à l'exécution, donc aucun outil ne les transporte. Vellum dit que vous obtenez « l'état de repos dans lequel la page se stabilise, pas le mouvement ». Export to Figma suggère de déclencher d'abord un état dans Chrome, comme un menu déroulant ouvert, puis de capturer. Une liste de collection du CMS arrive sous la forme des éléments présents au moment de la capture, pas comme un modèle répétable que vous pourriez réalimenter.

D'après la description de Vellum, la vidéo et Lottie deviennent une seule image fixe, et les images à chargement différé peuvent apparaître vides si la page ne les charge pas d'abord. Faites défiler la page avant de capturer.

Auto layout

Le guide de l'auto layout de Figma définit trois modes de redimensionnement : hug contents, fill container et fixed. Les constraints ne s'appliquent en général pas aux enfants d'un frame en auto layout. Un import fidèle doit choisir l'un de ces modes pour chaque enfant, et c'est là que les outils se distinguent.

UnHTML fait correspondre le CSS de la page à l'auto layout, par exemple flex-direction, gap et justify-content. Quand un frame ne peut pas reproduire la géométrie capturée, il revient de lui-même au positionnement absolu. Le rapport d'import liste chaque police remplacée, chaque frame revenu en absolu et chaque image ignorée, pour que vous voyiez ce qui a changé. La conversion en auto layout demande le plan Pro. Voyez comment le CSS Grid se traduit en calques pour le cas le plus difficile. Export to Figma dit que son flex et son grid deviennent de l'auto layout quand c'est possible, et que les grilles complexes avec zones de gabarit nommées peuvent demander un nettoyage manuel. Les pages de html.to.design et de Vellum n'indiquent pas comment elles traitent ce point.

Si votre page Webflow est un empilement de sections flex simples, attendez-vous à un point de départ exploitable avec n'importe lequel de ces outils. Une grille dense, c'est autre chose : prévoyez un nettoyage manuel avec chacun d'eux. Une capture d'écran suivie d'une vectorisation d'image ne vous donnerait ni l'un ni l'autre.

Coût, vérifié le 2026-10-20

Les prix proviennent de la page de chaque éditeur le jour de la rédaction et peuvent changer.

• UnHTML : gratuit jusqu'à 500 calques par import. Pro coûte $39 en paiement unique par éditeur, sans limite de calques. Studio coûte $119 en paiement unique pour un maximum de cinq éditeurs. La page dit « par page » à un endroit et « par import » à un autre, la portée exacte de la limite de 500 calques n'est donc pas claire.
• Export to Figma : gratuit avec 10 captures par mois. Pro coûte $1 par mois pendant une promotion de lancement, avec des captures illimitées. La page précise que le prix promotionnel peut ne pas durer.
• html.to.design et Vellum : nous n'avons pas vérifié leurs tarifs actuels, nous ne les citons donc pas. L'article de Vellum affiche un bouton « Add to Figma, free » et aucune grille de prix.

Le paiement unique et le paiement mensuel conviennent à des tâches différentes. Une refonte isolée favorise l'achat unique. Un flux régulier de captures favorise le forfait mensuel le moins cher le jour où vous lisez ceci, alors revérifiez la page de l'éditeur avant d'acheter.

Quel workflow pour quelle tâche

• Une page Webflow publique et un coup d'œil rapide : un plugin par URL ou l'extension. Coller, importer, modifier.
• Une page derrière une connexion : l'extension, puisqu'elle utilise votre navigateur connecté, ou l'extension de html.to.design pour les pages privées.
• Une capture à conserver, avec un rapport de ce qui s'est replié : l'import par fichier, en acceptant l'étape de capture supplémentaire.
• Envoyer un design vers Webflow : l'application Figma to Webflow de Webflow.

Testez une page avant de vous engager

Aucun workflow de Webflow vers Figma n'est sans perte. Les interactions et les modèles du CMS ne passent dans aucun, et les grilles denses demandent un nettoyage dans tous. Choisissez une page représentative, importez-la avec deux outils et comparez les calques que vous devez réellement corriger. Si vous voulez essayer la voie par fichier, UnHTML se trouve sur unhtml.pro.