UnHTML contre Locofy : convertir une page web en design et convertir un design en code ne sont pas le même travail

Le travail que fait vraiment chaque outil

UnHTML et Locofy sont souvent comparés, mais ils résolvent des problèmes différents. UnHTML prend une page web en direct et l'importe dans Figma sous forme de calques natifs et modifiables. Locofy prend un design Figma que vous avez déjà construit et l'exporte en code. L'un capture, l'autre livre. Si vous n'avez besoin que de l'une de ces deux étapes, l'autre outil ne la couvre pas.

UnHTML accepte un fichier HTML autonome, une archive .webarchive de Safari, ou un scene.json capturé via sa CLI, et convertit la page en véritables frames, textes, images, vecteurs et auto layout Figma, calqués directement sur le CSS propre de la page. Par défaut, il n'effectue aucune requête réseau : l'importation s'exécute entièrement sur votre machine. Récupérer des ressources distantes et exécuter des scripts de page, ce qui compte pour les pages rendues en JavaScript, est une option unique que vous devez activer vous-même et qui reste désactivée par défaut. Le seul appel qu'UnHTML effectue de lui-même est une vérification de licence hebdomadaire qui transmet la clé de licence et un identifiant utilisateur Figma. Le réglage des requêtes optionnelles régit tout le reste.

Locofy part de l'autre bout du processus. Il lit un fichier Figma existant, qu'il ait été créé à la main ou produit par un outil de capture, et l'exporte vers React, React Native, HTML et CSS, Flutter, Vue, Angular ou Next.js, via un mode automatique appelé Lightning ou un mode pas à pas appelé Classic avec étiquetage manuel. Locofy Lightning est vraiment rapide pour transformer un fichier Figma étiqueté en code de framework fonctionnel, et sa liste de frameworks, sept options en 2026, est plus large que celle de la plupart des outils de design vers code. Ce que Locofy ne peut pas faire, c'est partir d'une URL en direct. Il n'existe aucun chemin de capture dans le produit : un fichier Figma doit déjà exister avant que Locofy ait quoi que ce soit à exporter.

Où les deux flux de travail se rejoignent

Le chevauchement apparaît dans une situation précise : une équipe veut refondre une page et n'a aucun fichier Figma dont partir. Cela arrive avec des sites hérités antérieurs à tout système de design, et cela arrive quand une équipe étudie comment un concurrent a construit sa page avant de concevoir sa propre version.

Ici, l'ordre compte. Un outil de capture doit s'exécuter en premier, car il n'y a encore rien qu'un exportateur de code puisse lire. Une fois que la page existe sous forme de calques modifiables, avec un véritable auto layout au lieu d'une image plate, l'équipe peut refondre le design dans Figma puis remettre le fichier terminé à un outil de design vers code.

Étudier la page d'un concurrent de cette manière signifie analyser sa structure, les limites de ses composants, ses choix d'espacement, afin que votre propre équipe puisse prendre des décisions éclairées. Cela ne signifie pas republier le design de quelqu'un d'autre comme s'il s'agissait de votre propre travail fini. Le but de cette analyse est de comprendre, pas de dupliquer.

La même séquence s'applique à une page que vous possédez déjà mais pour laquelle il n'y a jamais eu de fichier de design. De nombreux sites en production ont été construits directement en code des années avant que quiconque ne mette en place un espace de travail Figma pour eux. Capturer cette page telle qu'elle s'affiche réellement aujourd'hui, avec son vrai CSS plutôt qu'une approximation visuelle, donne à la refonte un point de départ fonctionnel plutôt qu'une page blanche.

Prix et offres, côte à côte

Les deux produits ont des tarifications différentes parce qu'ils résolvent des problèmes différents. L'un est un outil de capture par import. L'autre est un abonnement récurrent d'export vers le code.

Les chiffres d'UnHTML ci-dessus proviennent directement d'unhtml.pro, vérifiés le 2026-09-29. Les chiffres de Locofy n'ont pas cette même assise : locofy.ai/pricing affiche son tableau de prix côté client, et deux avis indépendants sur la page ont rapporté les mêmes chiffres, mais aucun n'est la page statique propre du fournisseur. Considérez les chiffres de Locofy comme non vérifiés tant que vous n'avez pas vous-même contrôlé la page en direct avant de prendre une décision d'achat.

La différence structurelle compte plus que les montants exacts. UnHTML facture une seule fois par éditeur et la licence vous appartient. Locofy facture mensuellement pour un accès continu à ses frameworks d'export.

Le mappage du CSS vers l'auto layout, propriété par propriété

Convertir une page web en un fichier Figma utilisable signifie lire les styles calculés réels de la page et les reproduire comme propriétés d'auto layout Figma, sans deviner une approximation visuelle.

Le mappage principal, d'après la référence flexbox de MDN :

• flex-direction en CSS (row ou column) se traduit par le flux horizontal ou vertical d'un frame auto layout Figma.
• justify-content en CSS se traduit par l'alignement le long de l'axe principal de Figma.
• align-items en CSS se traduit par l'alignement le long de l'axe secondaire de Figma.
• gap en CSS se traduit directement par la valeur de gap entre les objets dans le frame Figma.
• padding en CSS sur le conteneur se traduit par le padding du frame auto layout.

Le mode grille de Figma fonctionne différemment de son auto layout horizontal et vertical. Il regroupe les objets en colonnes et en lignes avec des spans, plus proche de CSS Grid que de flexbox. Une page construite avec grid en CSS se traduit dans ce mode grille plutôt que dans un frame de type flex, ce qui explique pourquoi un outil de capture doit détecter quel modèle de mise en page un conteneur utilise réellement avant de pouvoir choisir la bonne structure Figma.

UnHTML lit les mises en page flex, grid et block directement à partir du vrai CSS de la page et construit la structure auto layout correspondante. Quand une mise en page ne peut pas être reproduite fidèlement, le frame revient à un positionnement absolu plutôt qu'à une approximation qui aurait bonne allure mais se comporterait mal au redimensionnement. Ce n'est pas un clone au pixel près de la page source, et le rapport d'importation liste précisément ce qui est retombé en positionnement absolu et quelles polices ont été substituées, Inter par défaut quand une police n'est pas installée localement.

Cela compte pour le flux de travail décrit plus haut. Un outil de design vers code comme Locofy exporte exactement la structure que possède déjà le fichier Figma. Si cette structure consiste en calques plats et positionnés de façon absolue, le code exporté le sera aussi. Un fichier avec un auto layout bien mappé, du type que produit un outil de capture qui lit le vrai CSS, donne à un exportateur de code quelque chose qui vaut vraiment la peine d'être exporté.

Quand se tourner d'abord vers UnHTML, puis vers Locofy

Pour une page sans fichier Figma existant, capturez la avant de concevoir quoi que ce soit. Cela couvre trois situations courantes : un site hérité sans aucune source de design, une analyse de concurrent faite à titre de référence, et la refonte de votre propre page vieillissante. Dans chaque cas, faire passer la page en direct par UnHTML vous donne des calques réels et modifiables avec un auto layout fonctionnel, pas une capture d'écran plate recopiée à la main.

Connaissez les limites dès le départ. L'offre gratuite plafonne à 500 calques par import ; les pages complexes aux composants profondément imbriqués peuvent atteindre ce plafond avant que Pro ne le supprime. Les polices non installées localement sont substituées, et chaque substitution apparaît dans le rapport d'importation, donc rien ne reste caché. Les grilles CSS complexes qui ne se mappent pas proprement retombent en positionnement absolu. Rien de tout cela ne rend le résultat inutilisable. Cela le rend honnête sur l'endroit où l'automatisation s'arrête et où le nettoyage manuel commence.

Une fois le fichier redessiné prêt, c'est là qu'un outil de design vers code prend le relais. Locofy, ou tout exportateur comparable, lit le fichier Figma que vous avez désormais et le transforme en code de framework. Les deux outils sont des étapes sur la même chaîne, pas deux versions de la même étape.

Conclusion

UnHTML et Locofy répondent à des questions différentes. UnHTML répond à « comment faire passer cette page web existante dans Figma sous forme de calques réels ». Locofy répond à « comment transformer ce design Figma en code fonctionnel ». Aucun des deux ne remplace l'autre, et un projet qui démarre sans aucun fichier de design a besoin de l'étape de capture avant que l'étape d'export n'ait quoi que ce soit sur quoi travailler.

À mesure que les outils de design vers code continuent d'ajouter des frameworks et de gagner en rapidité, la qualité du fichier Figma qui les alimente cesse d'être un détail mineur. Une étape de capture qui lit le vrai CSS d'une page et construit un véritable auto layout, au lieu de tout aplatir en positions absolues, est ce qui rend l'étape d'export en aval réellement utile.