Des frames qui ont du sens
HTML to frame : chaque page et chaque écran deviennent un frame Figma
Des frames de premier niveau nommés d'après la page et l'écran, des frames imbriqués qui suivent le DOM, et un Auto Layout vérifié avant d'être appliqué.
- Largeur du frame mesurée à partir du vrai design
- Les frames imbriqués reflètent la structure de la page
- Frames Desktop, Tablet et Mobile en un seul import (Pro)
Bientôt sur la Figma Community
HTML to frame désigne le résultat que les designers attendent vraiment d'un import : pas une image unique, mais un frame Figma par page et par écran, avec à l'intérieur une hiérarchie de frames imbriqués qui a du sens quand vous ouvrez le panneau des calques. C'est ainsi que HTML to Frames, le plugin Figma créé par EUREKA!, structure chaque import.
Chaque écran capturé devient un frame de premier niveau au nom prévisible, comme example.com/pricing — Desktop (1920). Le protocole et le www sont supprimés et les noms ne dépassent pas 60 caractères : un import multipage se parcourt facilement. À l'intérieur, les conteneurs de la page deviennent des frames, et ces frames suivent le DOM. Un frame d'en-tête contient un frame de navigation, qui contient lui-même des frames de liens, à l'image du balisage d'origine.
La largeur du frame n'est pas devinée. Le plugin mesure la largeur de design réelle de la page au moment de l'import. Les designs pleine largeur reçoivent un frame de 1920 avec le contenu centré, les sites réellement centrés dans un conteneur reçoivent la largeur de ce conteneur, par exemple 1200, 1280 ou 1440, et les sites fluides reçoivent 1440. La même largeur est utilisée pour toutes les pages d'un site dans un import multipage : les frames restent alignés.
Là où la mise en page le permet, les frames deviennent des frames Auto Layout. Le plugin déduit la direction, les espacements, le padding, l'alignement et le passage à la ligne à partir de la géométrie mesurée par le navigateur, applique le plan et vérifie chaque enfant à 2 px près. Les frames pour lesquels cela ne tient pas conservent leurs positions absolues avec des contraintes : rien ne bouge de façon inattendue.
Pour le détail de ce moteur, lisez L'Auto Layout expliqué. Pour la conversion dans son ensemble, voir HTML to Figma, et pour de nombreuses pages à la fois, Website to Figma.
Comment une page se transforme en frames
- 01
Mesurer la largeur du site
Le plugin détecte si le design est pleine largeur, centré dans un conteneur ou fluide, et choisit la largeur du frame Desktop en conséquence.
- 02
Construire des frames au pixel près
Chaque conteneur devient un frame à sa position mesurée, en reflétant la hiérarchie du DOM.
- 03
Déduire l'Auto Layout de l'intérieur vers l'extérieur
En partant des frames les plus internes, piles, passages à la ligne, espacements, padding et alignement sont déduits et appliqués.
- 04
Vérifier ou se replier
Chaque enfant est vérifié à 2 px près ; les frames qui ne tiennent pas essaient un plan plus simple ou conservent leurs positions absolues avec des contraintes.
Des détails au niveau du frame qui font gagner du temps
Largeur de site mesurée
Les frames Desktop utilisent la vraie largeur du design : 1920 en pleine largeur, la largeur du conteneur pour les sites centrés, 1440 pour les sites fluides.
Une hiérarchie calquée sur le DOM
Les frames imbriqués suivent la structure de la page : sections, cartes et boutons se retrouvent facilement dans le panneau des calques.
Frames Auto Layout
Piles horizontales et verticales, rangées qui passent à la ligne, espacements et padding, vérifiés enfant par enfant.
Intention responsive
Le contenu centré reste centré, les cartes de même taille passent en Fill, et l'espace entre un logo et un menu devient un élément Fill.
Responsive set
Les frames Desktop, Tablet 768 et Mobile 390 d'une même page, capturés en parallèle et comptés comme un seul import (Pro).
Réimporter un frame
Chaque frame enregistre son URL source et sa largeur : vous pouvez l'actualiser en un clic.
Nommage des frames et largeur du site
Quand vous importez dix pages sur trois écrans, les noms de frames comptent. HTML to Frames utilise un modèle unique et cohérent :
domain/path?query — Screen (width)
Par exemple, shop.example.com/products?sort=new — Mobile (390). Pas de protocole ni de www, et les noms sont limités à 60 caractères pour rester lisibles sur le canvas.
Comment la largeur Desktop est choisie
L'écran Desktop s'appelle Site width parce qu'il est mesuré, pas deviné :
| Type de site | Largeur du frame Desktop |
|---|---|
| Design pleine largeur | 1920, contenu centré |
| Site réellement centré dans un conteneur | La largeur du conteneur, par exemple 1200, 1280 ou 1440 |
| Mise en page fluide | 1440 |
Un site reçoit une seule largeur dans un import multipage : tous les frames Desktop s'alignent sur une même rangée. Les autres écrans utilisent des largeurs fixes : Laptop 1280, Tablet 768 et Mobile 390. Avec Pro, vous pouvez aussi saisir une largeur personnalisée lorsque vous avez besoin d'un breakpoint précis.
Chaque frame enregistre aussi son URL source et sa largeur, ce qui rend possible le Re-import en un clic par la suite.
Des noms cohérents sont utiles aussi en dehors de Figma. Quand vous partagez un lien vers un frame ou l'exportez, son nom indique précisément au développeur quelle page et quel breakpoint il a sous les yeux.
Frames imbriqués et Auto Layout, vérifiés
À l'intérieur de chaque frame de premier niveau, la hiérarchie reflète le DOM. Le panneau des calques paraît ainsi familier à quiconque connaît le balisage, et l'Auto Layout dispose de vrais conteneurs sur lesquels travailler.
Le moteur procède dans un ordre fixe :
- Construire la page au pixel près avec des positions absolues.
- Parcourir les frames de l'intérieur vers l'extérieur et déduire piles verticales ou horizontales, rangées qui passent à la ligne, espacements, padding et alignement à partir de la géométrie mesurée.
- Traduire le sens responsive : le contenu centré devient Center, les conteneurs à largeur maximale restent centrés, les cartes de même taille et les éléments flex-grow deviennent Fill, et l'espace entre un logo et un menu devient un élément Fill.
- Appliquer le plan et vérifier la position de chaque enfant à 2 px près.
- Si cela ne tient pas, essayer un plan plus simple ; sinon conserver les positions absolues.
Les frames qui restent en position absolue reçoivent des contraintes comme Stretch, Scale, Center, Min ou Max, pour continuer à se comporter correctement lors du redimensionnement. L'écran de résultat indique pourquoi chacun est resté en position absolue.
Dans nos tests sur de vrais sites, l'Auto Layout a été déduit sur environ 86 à 97 % des frames. L'essentiel n'est pas ce chiffre, mais la garantie qui l'accompagne : le design ne casse jamais. Pour en savoir plus sur la correspondance entre CSS et frames, lisez CSS Flexbox et Grid vers Auto Layout.
Une page, plusieurs écrans : le Responsive set
Un frame unique montre un seul breakpoint. Un vrai travail de design en demande généralement au moins trois. Avec l'option Responsive set, HTML to Frames capture Desktop, Tablet et Mobile d'une même page en un clic.
Quelques détails pratiques :
- Les écrans d'une même page sont capturés en parallèle, et non l'un après l'autre.
- Une page avec tous ses écrans compte pour un seul import, et non trois.
- Pro et Team permettent jusqu'à quatre écrans par import ; le plan Free capture un écran par import.
- Chaque écran est son propre frame de premier niveau, nommé avec l'écran et la largeur pour les distinguer d'un coup d'œil.
Comme chaque écran est capturé à sa vraie largeur, vous obtenez la véritable mise en page mobile du site, et non un frame Desktop rétréci. La navigation qui se replie en bouton de menu, les grilles qui passent de quatre colonnes à une et la typographie qui se réduit apparaissent telles que le site les affiche à cette largeur : le Responsive set constitue ainsi une base fiable pour les revues de design responsive.
Combinez les Responsive sets avec l'import Multiple pour capturer plusieurs pages sur plusieurs breakpoints, et consultez les limites sur la page des tarifs.
Questions fréquentes
Cela signifie que chaque page web et chaque écran deviennent un frame Figma, avec à l'intérieur des frames imbriqués qui reflètent la structure DOM de la page. HTML to Frames crée un frame de premier niveau par page et par écran, et convertit les frames internes en Auto Layout partout où le résultat peut être vérifié.
Les frames de premier niveau suivent le modèle domain/path?query — Screen (width), par exemple example.com/pricing — Desktop (1920). Le protocole et le www sont supprimés et les noms limités à 60 caractères : les grands imports multipages restent faciles à parcourir sur le canvas et dans le panneau des calques.
La largeur Desktop est mesurée à partir du vrai design. Les designs pleine largeur reçoivent 1920 avec le contenu centré, les sites réellement centrés dans un conteneur reçoivent la largeur de ce conteneur, par exemple 1200 ou 1440, et les sites fluides reçoivent 1440. Un site garde une seule largeur dans un import multipage.
Pas forcément. L'Auto Layout n'est appliqué que là où chaque enfant reste à moins de 2 px de sa position d'origine. Sinon, un plan plus simple est essayé, et s'il échoue, le frame conserve ses positions absolues avec des contraintes. L'écran de résultat explique pourquoi chaque frame est resté en position absolue.
Free capture un écran par import. Pro et Team capturent jusqu'à quatre écrans par import, y compris le Responsive set Desktop, Tablet et Mobile en un clic. Tous les écrans d'une même page comptent pour un seul import et sont capturés en parallèle plutôt que l'un après l'autre.
Oui. Chaque frame importé enregistre son URL source et sa largeur : vous pouvez le réimporter en un clic quand la page en ligne change. Le fichier de design reste ainsi synchronisé avec la production, sans relancer un nouvel import de zéro ni renommer à nouveau les frames.
Voir aussi
Arrêtez de redessiner le web.
Collez un lien et obtenez en quelques secondes de vrais calques Figma, modifiables et responsive. Gratuit pour commencer — 10 imports par mois.
Sans carte bancaire. Pro s'achète directement dans Figma.
Bientôt sur la Figma Community