HTML to frame : comment un DOM devient de l'Auto Layout Figma

Convertir une page web en image, c'est facile. La convertir en frames Figma qui se comportent comme si un designer les avait construits, c'est là que ça se complique. Un frame qui a l'air juste mais s'effondre dès que vous modifiez un titre ne vaut guère mieux qu'une capture d'écran.

Cet article explique, étape par étape, comment HTML to Frames transforme un DOM en frames Figma imbriqués, comment son moteur Auto Layout décide de ce qui devient une pile, et pourquoi il vérifie son propre travail avant de le conserver.

Du DOM à l'arbre de frames

Une page web est un arbre : body contient des sections, les sections des conteneurs, les conteneurs des cartes, les cartes des titres et des boutons. Un fichier Figma est aussi un arbre : des frames contiennent des frames, du texte et des vecteurs.

L'idée de base de la conversion HTML to frame est de faire correspondre un arbre à l'autre :

• Chaque page et chaque écran deviennent un frame de premier niveau. Un import Desktop, Tablet et Mobile d'une page produit trois frames côte à côte.
• Les éléments qui jouent le rôle de blocs deviennent des frames imbriqués. Leurs arrière-plans, bordures, rayons, ombres et rognages deviennent des propriétés du frame.
• Le texte devient des calques de texte en conservant les styles mixtes : une phrase contenant un lien en gras reste un seul calque de texte.
• Les SVG deviennent des vecteurs modifiables, et les images des remplissages d'image.
• Les pseudo-éléments (::before, ::after), le contenu du shadow DOM et l'ordre du z-index sont repris, pour que l'empilement corresponde à ce que le navigateur a dessiné.

L'objectif est un panneau des calques lisible par un designer, pas un déversement de chaque nœud du DOM. Si vous avez besoin d'une structure de calques plus fine pour l'inspection, l'option Detailed layers (Pro) est là pour ça.

Nommage des frames

Les frames de premier niveau sont nommés pour être faciles à retrouver dans un gros fichier :

example.com/pricing — Desktop (1920)

Le nom contient le domaine et le chemin (plus la requête, le cas échéant), sans protocole ni www, suivis de l'écran et de sa largeur, et il est limité à 60 caractères. L'URL source est aussi enregistrée sur le frame, ce qui rend possible le Re-import en un clic.

Étape 1 : tout construire d'abord au pixel près

Le moteur ne commence pas par deviner l'Auto Layout. Il commence par une version garantie fidèle :

1. La page est rendue dans un vrai navigateur à la largeur choisie. Pour Desktop, c'est la Site width — une largeur que le plugin mesure à partir du design réel de la page (1920 en pleine largeur, la largeur du conteneur pour les sites centrés, 1440 pour les sites fluides).
2. La géométrie et les styles calculés de chaque élément sont mesurés.
3. L'arbre de frames est construit avec des positions absolues : chaque calque se trouve exactement là où le navigateur l'a placé.

Cette version absolue est le filet de sécurité. Tout ce qui suit est une amélioration qui doit faire ses preuves.

Étape 2 : déduire l'Auto Layout, de l'intérieur vers l'extérieur

Ensuite, le moteur parcourt les frames des plus internes vers l'extérieur. Pour chaque frame, il examine la géométrie mesurée de ses enfants et se demande : peuvent-ils être décrits comme une pile Auto Layout ?

Il déduit :

• La direction — les enfants sont-ils disposés en pile verticale ou horizontale ?
• Le passage à la ligne — forment-ils des rangées qui passent à la ligne, comme une grille CSS de cartes ou un flex-wrap ?
• L'espacement — l'écart entre les enfants est-il assez régulier pour tenir en une seule valeur ?
• Le padding — à quelle distance des bords du frame se trouvent les enfants, de chaque côté ?
• L'alignement — sont-ils alignés au début, au centre ou à la fin sur chaque axe ?

Travailler de l'intérieur vers l'extérieur est essentiel : une fois que le contenu d'une carte forme une pile verticale propre, la carte elle-même peut être traitée comme un seul élément dans la rangée de cartes qui l'entoure.

Point crucial : la déduction repose sur ce que le navigateur a réellement rendu, pas sur l'analyse du CSS. Qu'une rangée ait été construite en Flexbox, en Grid, avec des floats ou en inline-block, le résultat mesuré est le même, et c'est sur lui que travaille le moteur.

Étape 3 : ajouter le sens responsive

Une pile avec le bon espacement et le bon padding est un début, mais elle ne se comporte pas encore comme un design responsive. Le moteur déduit aussi l'intention :

• Contenu centré → Center. Si un contenu est centré dans son parent, il est aligné en Center et reste centré quand le frame est redimensionné.
• Les conteneurs à largeur maximale restent centrés. Un conteneur de contenu à largeur maximale dans une section pleine largeur conserve sa largeur et reste au milieu.
• Cartes égales et flex-grow → Fill. Les cartes qui se partagent équitablement une rangée, ou les éléments qui s'agrandissent pour occuper l'espace, passent en Fill container.
• Logo … menu … icônes → l'élément d'espacement devient Fill. Dans un en-tête typique, c'est l'espace entre les groupes qui s'étire. Le moteur passe cet élément d'espacement en Fill : le logo reste à gauche et les icônes à droite quand l'en-tête s'élargit.

C'est toute la différence entre un frame qui correspond à la page à une seule largeur et un frame que vous pouvez réellement redimensionner.

Étape 4 : vérifier chaque enfant (tolérance de 2 px)

Voici l'étape qui préserve le design. Après avoir appliqué un plan d'Auto Layout à un frame, le moteur vérifie la position de chaque enfant par rapport à la mise en page d'origine au pixel près. Chacun doit se trouver à 2 px maximum de l'endroit où le navigateur l'a placé.

• Si tous les enfants tiennent, le plan est conservé.
• Sinon, un plan plus simple est essayé — par exemple une pile unique, sans les réglages d'alignement ou de Fill plus ambitieux.
• Si aucun plan ne tient, le frame conserve ses positions absolues.

La règle est simple : le design ne casse jamais. Vous obtiendrez peut-être moins de frames Auto Layout sur une section délicate, mais jamais une mise en page qui se décale en silence.

À quelle fréquence cela réussit-il ? Dans nos tests sur de vrais sites, l'Auto Layout a été déduit sur environ 86 à 97 % des frames — par exemple 93 % sur un site produit et 88 % sur Linear et Stripe. Les résultats dépendent de la façon dont la page est construite : considérez ces chiffres comme des mesures, pas comme une garantie.

Étape 5 : des contraintes pour les frames restés en position absolue

Les frames qui conservent des positions absolues ne sont pas laissés pour compte. Le moteur leur attribue des contraintes adaptées :

• Stretch — pour les éléments qui couvrent leur parent, comme un calque d'arrière-plan pleine largeur.
• Scale — pour les éléments qui doivent se redimensionner proportionnellement.
• Center — pour les éléments centrés dans leur parent.
• Min — épinglés à gauche ou en haut.
• Max — épinglés à droite ou en bas.

Ainsi, même un frame absolu se comporte raisonnablement quand vous redimensionnez son parent.

Étape 6 : diagnostics — pourquoi un frame est resté en position absolue

L'écran de résultat indique les frames, les calques et la part d'Auto Layout de l'import, ainsi que les polices manquantes et les avertissements. Il indique aussi pourquoi certains frames sont restés en position absolue. En pratique, les sections qui restent absolues sont généralement celles où les enfants se chevauchent, sortent du flux normal ou sont espacés trop irrégulièrement pour former une seule pile.

Ces diagnostics sont utiles de deux façons :

• Pour les designers — vous savez quelles sections convertir à la main si vous les voulez entièrement responsive.
• Pour les développeurs — ils signalent souvent un code de mise en page plus complexe que nécessaire.

CSS Flexbox et Grid vers Auto Layout : un tableau de correspondance

Comme le moteur travaille à partir de la géométrie mesurée, le tableau ci-dessous décrit le résultat typique, et non une traduction littérale des propriétés CSS. Pour aller plus loin, voir CSS Flexbox et Grid vers l'Auto Layout Figma.

Un exemple concret : une section de tarifs à trois cartes

Pour rendre ces étapes concrètes, imaginez une section courante : un titre et un sous-titre centrés en haut, puis trois cartes de tarifs alignées, chacune avec un nom de plan, un prix, une liste de fonctionnalités et un bouton.

Voici comment le moteur l'aborderait généralement :

1. Construction au pixel près. Chaque élément est placé à sa position mesurée. La section a déjà le bon rendu.
2. Les frames les plus internes d'abord. Chaque liste de fonctionnalités devient une pile verticale avec un espacement régulier. Chaque carte devient une pile verticale — nom, prix, liste, bouton — avec un padding déduit de la distance aux bords de la carte.
3. La rangée de cartes. Les trois cartes sont côte à côte avec des largeurs et des espacements égaux : la rangée devient une pile horizontale avec un seul espacement, et chaque carte passe en Fill pour se partager la largeur équitablement.
4. Le bloc d'en-tête. Le titre et le sous-titre sont centrés : ils deviennent une pile verticale alignée en Center.
5. Vérification. Chaque enfant de chaque frame est comparé à sa position d'origine. Si, par exemple, un badge « Le plus populaire » chevauche le bord supérieur de la carte du milieu, le plan de cette carte peut échouer à la vérification à 2 px. Le moteur essaie un plan plus simple, et si celui-ci ne tient pas non plus, la carte conserve ses positions absolues avec des contraintes — et l'écran de résultat vous indique de quel frame il s'agit.

Le résultat est une section que vous pouvez redimensionner : élargissez le frame et les cartes grandissent ensemble ; modifiez une liste de fonctionnalités et la carte s'agrandit avec elle. Avec Components & hover states (Pro), les trois cartes peuvent aussi arriver comme instances d'un même composant, puisqu'elles partagent une structure.

Ce que cela change en pratique

Quand vous ouvrez une page importée, vous pouvez :

• Modifier un titre : la section s'agrandit et repousse le contenu qui suit.
• Changer une seule valeur d'espacement pour resserrer une grille de cartes.
• Redimensionner le frame et voir les éléments Fill s'étirer tandis que le contenu centré reste en place.
• Remplacer une carte par une instance de composant — et avec Components & hover states (Pro), les cartes répétées sont peut-être déjà des composants.

C'est ce qui distingue un arbre de frames d'une image aplatie. La comparaison HTML to canvas détaille ce contraste.

Conseils pour de meilleurs résultats Auto Layout

1. Importez à la bonne largeur. Laissez Desktop utiliser la Site width, et ajoutez Tablet et Mobile avec le Responsive set pour vérifier chaque breakpoint.
2. Masquez les surcouches. Activez Hide cookie banners & popups pour que les fenêtres fixes ne chevauchent pas les sections et n'imposent pas un positionnement absolu.
3. Capturez des états stables. Les animations sont figées au moment de la capture, mais pour le contenu qui se charge tardivement, Extra wait (Pro) aide.
4. Consultez les diagnostics avant de convertir quoi que ce soit à la main. Ils vous indiquent précisément quels frames examiner.
5. Utilisez Reference screenshot (Pro) lorsque vous devez confirmer que les calques correspondent à la page en ligne.

Pour aller plus loin

• Le parcours d'import complet : Comment convertir HTML en Figma
• Toutes les fonctionnalités de conversion : fonctionnalités
• Chaque option expliquée : documentation
• Plans et limites : tarifs

Installez le plugin et importez une page que vous connaissez bien. Le moyen le plus rapide de comprendre le moteur est de redimensionner le résultat et de voir ce qui tient.