UnHTML contre l'import Figma de Builder.io: lequel correspond vraiment à votre besoin

UnHTML et le plugin HTML to Figma de Builder.io affirment tous les deux transformer une page web existante en calques Figma modifiables. Ils ne sont pourtant pas conçus pour la même tâche. UnHTML est un importeur conçu uniquement pour passer d'une page web à Figma. Le plugin de Builder.io est le volet import d'un pipeline design vers code, dont l'activité principale consiste à transformer Figma en code, exécuté ici dans le sens inverse. Cette différence détermine d'où chacun importe, jusqu'où va l'auto layout, et ce qui se passe quand le CSS d'une section ne se traduit pas proprement. Chaque affirmation ci dessous a été vérifiée directement sur la documentation ou la page produit de l'éditeur concerné, datée du 2026-10-03, et non reprise d'un site d'avis ou d'un forum.

Ce que chaque outil importe vraiment

UnHTML accepte un fichier HTML, un .webarchive Safari, une capture scene.json, ou la sortie de sa propre CLI de capture open source et de son marque-page. L'import s'exécute en local. C'est important pour le travail d'analyse d'un concurrent et la reconstruction de pages anciennes, où la page source n'est généralement pas une page que vous contrôlez.

Le plugin de Builder.io fonctionne à partir d'une URL en direct. On la colle, le plugin récupère la page et la convertit. Ou on utilise une extension Chrome associée pour capturer des éléments DOM précis sur une page, y compris derrière une connexion, et importer seulement ces sections. Builder.io présente tout le flux comme un aller-retour: amener une page dans Figma, puis exporter plus tard le résultat sous forme de React, Vue, Tailwind, ou plusieurs autres cibles, à l'aide d'un modèle d'IA associé à un compilateur open source qui reconstruit une vraie hiérarchie de code plutôt qu'un simple vidage à plat. Une fois un frame importé, on peut aussi le retoucher avec des instructions en langage naturel avant cette étape d'export.

Cet aller-retour est tout l'intérêt du produit Builder.io. UnHTML n'a aucun volet d'export vers le code. Il s'arrête une fois les calques dans Figma, et c'est un choix de périmètre délibéré, pas une fonctionnalité manquante. Pour un regard plus approfondi sur la façon dont le sens de la conversion change l'outil à choisir, voir UnHTML vs Anima: dans quel sens va vraiment la conversion.

Fidélité de l'auto layout: CSS flex et grid

Vérifié directement sur unhtml.pro le 2026-10-03, l'offre gratuite d'UnHTML inclut déjà l'auto layout mappé depuis du vrai CSS flex et grid, plafonné à 500 calques par import. Builder.io indique que le support de l'auto layout sur les frames importés est actuellement en bêta, et sa propre documentation du projet recommande de vérifier manuellement quels calques portent l'autolayout avant d'exporter vers le code, plutôt que de supposer que chaque frame importé l'a.

Figma a lui-même publié en 2026 une refonte de l'auto layout alignée sur flexbox, utile à connaître quel que soit l'outil d'import utilisé. Le padding obtient désormais toujours la place dont il a besoin, plus proche du modèle CSS border box: un frame ne peut pas être plus étroit que son padding total. Seuls les contours intérieurs comptent dans le calcul de la mise en page, pas les contours extérieurs ou centrés, et le réglage de contour d'un parent n'affecte plus le calcul du contour d'un enfant. Les piles à auto gap prennent désormais en charge les modes space-between et evenly, qui correspondent exactement à leurs équivalents CSS. Cette version devient la valeur par défaut pour les nouveaux frames à partir de juillet 2026, les deux versions restant permutables jusqu'à la suppression de l'option héritée en janvier 2027.

L'auto layout en grille, un des trois modes d'auto layout de Figma, correspond à CSS Grid d'une façon aussi directe que n'importe quelle fonctionnalité de Figma. Les lignes et les colonnes sont appelées tracks. Les unités fractionnaires (fr) répartissent l'espace disponible proportionnellement, exactement comme en CSS, et le nombre de lignes s'ajuste au contenu de la même façon que grid-auto-rows. Voir la documentation de Figma pour le mapping complet. Pour le détail propriété par propriété de la façon dont flex et grid atterrissent dans Figma, voir CSS Flexbox to Figma Auto Layout: A Property by Property Map et CSS Grid to Figma: What Survives the Conversion to Layers.

Quand la conversion ne peut pas rester propre

Les deux éditeurs reconnaissent ouvertement que ce n'est pas un problème résolu. UnHTML retombe automatiquement sur un positionnement absolu dès que la géométrie d'une section ne peut pas être reproduite en auto layout, et un budget de nœuds protège contre des volumes de calques incontrôlés sur des pages inhabituellement denses. La documentation de Builder.io indique clairement que l'import de HTML vers Figma reste un exercice d'approximation, au mieux. Les iframes et les pseudo éléments ne sont pas convertis du tout. Toutes les propriétés CSS ne sont pas prises en charge, et les vidéos et GIF animés sont exclus. Les polices qui ne sont pas déjà chargées dans Figma sont remplacées.

UnHTML fait la même chose avec les polices: ce qui n'est pas installé retombe sur un remplacement (Inter par défaut), et chaque substitution apparaît dans le rapport d'import, donc rien ne change en silence. Aucun des deux outils ne revendique un résultat exact au pixel. Pour UnHTML, c'est une limite délibérée: le rapport d'import existe précisément parce que certaines choses retombent sur une alternative, et la description honnête est "des calques fidèles et modifiables", pas un clone exact.

Confidentialité: où va vraiment le contenu de votre page

Pour analyser la page d'un concurrent, ou toute page que vous ne contrôlez pas, l'endroit où va le contenu pendant le traitement compte. Le comportement par défaut déclaré d'UnHTML est zéro requête réseau. Rien ne quitte la machine, sauf si l'utilisateur active la récupération à distance, et ce chemin optionnel exécute la requête dans un cadre isolé (bac à sable), avec les scripts et les gestionnaires d'événements en ligne retirés avant que quoi que ce soit s'affiche. Le seul appel que fait UnHTML de lui-même, quels que soient les réglages, est une vérification de licence hebdomadaire qui ne transporte que la clé de licence et un identifiant utilisateur Figma. Pas le contenu de la page.

Le fonctionnement de Builder.io repose sur la récupération d'URL ou la capture DOM par construction, puisque c'est ainsi que le plugin place la page devant son moteur de conversion. Si un traitement strictement local est une exigence incontournable pour une analyse donnée, c'est une différence réelle entre les deux, pas un détail mineur.

Tarifs et limites

Vérifié directement sur unhtml.pro le 2026-10-03: l'offre gratuite inclut l'auto layout depuis CSS flex et grid, des outils de capture open source, et un support communautaire, plafonnée à 500 calques par import. Pro coûte 39 USD, en paiement unique, par éditeur, et supprime ce plafond, en ajoutant la promotion des éléments répétés en composants et des styles de texte répétés en styles partagés, plusieurs préréglages de viewport, un rapport d'import avec journal de substitution de polices, et un an de mises à jour. Studio étend Pro à cinq éditeurs pour 119 USD.

Builder.io propose des offres gratuites et premium sans carte bancaire pour utiliser les fonctionnalités gratuites. Les tarifs précis des offres premium de Builder.io n'étaient pas publiés sur les pages consultées pour cet article, donc aucun chiffre n'est avancé ici. Si le prix est un critère décisif, consultez directement la page de tarifs actuelle de Builder.io avant de budgétiser un déploiement en équipe. Les chiffres de chaque éditeur peuvent changer entre la date de rédaction et la date où vous lisez ceci.

Lequel correspond vraiment à votre besoin

Pour refaire le design d'un site sans fichier de conception, analyser la page d'un concurrent, ou reconstruire une page ancienne avec seulement son CSS comme référence, un outil conçu uniquement pour passer d'une page web à Figma et qui s'exécute en local correspond directement à cette tâche. C'est tout le périmètre d'UnHTML: faire entrer les calques, garder la structure modifiable, et laisser le reste du processus de conception à Figma lui-même. Pour une équipe déjà standardisée sur un pipeline Figma vers code, qui veut l'étape HTML vers Figma comme un volet supplémentaire d'un aller-retour plus long vers React, Vue, ou un autre framework, l'offre combinée de Builder.io correspond à cette autre tâche. Surtout si cette équipe paie déjà pour le volet export de code de Builder.io et que le plugin d'import n'est que la pièce qui leur donne un point de départ.

Un dernier point pratique. Un prix unique par éditeur sans abonnement est une discussion budgétaire différente d'un tarif de plateforme qui regroupe import, génération de code, retouche par IA et hébergement. Aucune des deux structures n'est mauvaise, mais elles conviennent à des tailles d'équipe et des cycles de revue différents. Décidez laquelle correspond à votre équipe avant de comparer les listes de fonctionnalités ligne par ligne.

En résumé

UnHTML et Builder.io ne se disputent pas vraiment la même tâche. L'un est un importeur conçu uniquement pour passer d'une page web à Figma, qui s'exécute en local et qui est explicite sur l'endroit où il retombe sur un positionnement absolu. L'autre est une plateforme design vers code dont le plugin HTML vers Figma est le volet inverse d'un pipeline destiné à revenir vers le code. La fidélité de l'auto layout, la posture de confidentialité et le prix découlent tous de cette différence. Les deux éditeurs reconnaissent honnêtement qu'aucun des deux n'atteint l'exactitude au pixel, donc vérifiez l'affirmation précise qui compte le plus pour votre flux de travail directement sur la page de chaque éditeur avant de construire un processus autour.