Import Figma ou reconstruction manuelle : ce que chaque approche coûte en temps et en précision

Qu'est-ce qui va plus vite : importer une page ou la reconstruire à la main ?

L'import prend en charge la construction calque par calque, si bien que votre temps se déplace vers la vérification et le nettoyage du résultat. Pourtant, personne n'a publié de comparaison chronométrée fiable, et nous n'en inventerons pas. Le site d'UnHTML lui-même n'annonce ni gain de temps ni chiffre de précision.

Nous comparons donc le travail étape par étape, puis nous vous montrons comment mesurer votre propre page de façon équitable. La réponse dépend de votre page, et c'est pourquoi la méthode compte plus que n'importe quelle moyenne.

Ce que suppose une reconstruction manuelle

Reconstruire une page dans Figma fait de vous le moteur de mise en page. Chaque décision que le navigateur a prise à partir du CSS, vous la reprenez à la souris.

Frames, texte et images, un par un

Dans Figma, l'auto layout se configure frame par frame. Vous sélectionnez des calques, appuyez sur Shift A ou choisissez Add auto layout, puis vous choisissez un flux (vertical, horizontal ou grid). Ensuite, vous réglez le padding, le gap et le mode de redimensionnement de chaque enfant : Hug contents, Fill container ou Fixed, avec des tailles minimale et maximale en option. Une page de plusieurs dizaines de sections imbriquées représente autant de passes.

Le texte ajoute sa propre corvée. Chaque titre et chaque paragraphe doit reprendre la famille de police, la graisse, la taille, la hauteur de ligne et l'interlettrage de la feuille de style, et les éléments répétés, comme les cartes ou les entrées de navigation, doivent être copiés puis gardés cohérents. Rien de tout cela n'est difficile. Ce sont beaucoup de petites décisions répétitives, et chacune est une occasion de se tromper légèrement sur une valeur. Plus la page est longue, plus ces occasions s'accumulent.

Traduire les valeurs par défaut du CSS

La page d'origine s'appuie aussi sur des valeurs par défaut du CSS que l'on ne voit pas dans le navigateur. La référence flexbox de MDN les énumère : flex-direction vaut row par défaut, flex-wrap vaut nowrap, flex-grow vaut 0, flex-shrink vaut 1 et align-items vaut stretch. Si vous en oubliez un, votre reconstruction s'écarte de la source d'une manière difficile à repérer à l'œil nu. Vous finissez par lire DevTools presque autant que vous travaillez dans Figma.

Flexbox et grid sont deux modèles différents

Flexbox est unidimensionnel. CSS Grid est bidimensionnel, avec des pistes fr, un gap et un placement par numéro de ligne ou par nom de zone. L'auto layout de Figma propose désormais un flux grid, mais vous traduisez toujours à la main entre les deux modèles : un grid-template-columns: 2fr 1fr 1fr devient un ensemble de largeurs de colonnes et de réglages de remplissage que vous choisissez vous-même.

Ce que fait un import, étape par étape

UnHTML lit un fichier HTML autonome, un .webarchive de Safari ou un scene.json issu de sa CLI open source. Il convertit les mises en page flex, grid et block de la page en auto layout à partir du CSS, y compris l'espacement, le padding, le wrap et le stretch. Le texte reste modifiable, avec famille, graisse, taille, couleur, letter-spacing et line-height conservés. Le SVG devient des vecteurs natifs et les dégradés sont repris.

Il n'y parvient pas toujours, et il le dit. Quand une frame ne peut pas reproduire la géométrie capturée, elle retombe sur le positionnement absolu. Vous pouvez aussi désactiver entièrement la conversion en auto layout. Le rapport d'import liste les polices remplacées, les frames revenues en absolu et les images ignorées.

Le travail restant est un travail de vérification. Comptez nettoyer un import en supprimant les calques inutiles et en aplatissant ce que vous ne modifierez pas. Ce temps fait partie de votre mesure.

On peut voir l'import comme un déplacement de l'effort, et non sa disparition. Vous cessez de construire la structure à partir de rien. Vous inspectez une structure qui existe déjà. Pour quelqu'un qui connaît bien Figma, inspecter est en général la tâche la plus facile, mais seul votre propre test dira si c'est plus rapide sur votre page. Une page longue et dense atteint aussi plus vite la limite de 500 calques de l'offre gratuite, ce qui change le calcul, comme expliqué plus bas.

Où la précision se perd dans les deux cas

Aucune des deux voies n'est exacte. Elles échouent simplement à des endroits différents.

À la main, les erreurs sont silencieuses. Personne ne vous remet la liste de ce que vous avez mal fait. Avec un import, les écarts sont consignés et vous pouvez les auditer. C'est un vrai avantage de précision, mais ce n'est pas de la fidélité au pixel : le résultat est fidèle et modifiable, pas un clone exact au pixel. Pour les polices, voyez comment fonctionne le remplacement de polices.

Comment mesurer votre propre page équitablement

Faites un petit test. Ne vous fiez à aucune moyenne, la nôtre comprise.

1. Choisissez une vraie section de votre page, par exemple un en-tête et une grille de cartes.
2. Fixez d'abord le viewport. UnHTML propose Desktop 1440, Mobile 390 et des largeurs personnalisées ; utilisez la même largeur pour les deux essais.
3. Chronométrez la reconstruction manuelle, d'une frame vide jusqu'à « correspond à la source » à cette largeur.
4. Chronométrez l'exécution de l'import, puis la vérification et le nettoyage, comme un seul chiffre.
5. Comptez les écarts que chaque version garde par rapport à la source, pas seulement les minutes.

Notez les deux chiffres et le nombre d'écarts. Notez aussi par rapport à quoi vous avez comparé. Si votre référence est la page en ligne à une seule largeur, dites-le, car une reconstruction qui correspond à 1440 px peut encore différer à 390 px. Une courte note à côté de chaque résultat rend la comparaison reproductible quand un collègue la refait sur une autre page. Si vous reconstruisez deux fois la même section, la deuxième passe est plus rapide parce que vous connaissez déjà la page ; importez donc d'abord, ou prenez deux sections différentes de taille comparable.

Quand la reconstruction manuelle reste préférable

Parfois, l'import n'est pas le bon outil. Une toute petite page peut prendre autant de temps à construire qu'à vérifier. Une refonte où vous ne conserverez pas la structure ne tire aucun profit d'une copie fidèle. Et si vous n'avez besoin que de quelques éléments, copier des éléments depuis Chrome DevTools ou le tracé de captures d'écran peut suffire.

La taille compte aussi. D'après la page de tarifs datée du 16 septembre 2026, l'offre gratuite limite un import à 500 calques. Pro, un achat unique de $39 par éditeur, supprime cette limite. Consultez la page pour connaître les prix en vigueur avant de décider.

Ce qu'il faut retenir

Un import change la forme du travail : moins de construction, plus de vérification, et un rapport qui indique où il a échoué. Une reconstruction manuelle vous donne un contrôle total et aucune trace d'audit. Savoir laquelle est la plus rapide est une question sur votre page, et un test de dix minutes sur une section y répond mieux que n'importe quelle moyenne.

Questions fréquentes

Importer une page dans Figma est-il plus rapide que la reconstruire à la main ?

Les sources publiées ne donnent aucun temps mesuré, et UnHTML n'en revendique pas non plus. Un import remplace la construction calque par calque par une seule exécution, de sorte que le travail se déplace vers la vérification et le nettoyage. Le gain dépend de votre page : chronométrez donc une section des deux façons.

Une page importée est-elle exacte au pixel ?

Non. UnHTML produit des calques fidèles et modifiables, pas un clone exact. Les polices remplacées, les frames qui retombent sur le positionnement absolu et les images ignorées figurent dans le rapport d'import afin que vous puissiez les vérifier.

Que se passe-t-il avec une page plus grande que ce que permet l'offre gratuite ?

L'offre gratuite limite un import à 500 calques. Pro, un achat unique de $39 par éditeur, supprime la limite. Pour une très petite page, l'offre gratuite suffit souvent.