Collage Web de Figma vs Plugins Capture vers Design vs UnHTML en 2026

Collage web de Figma : que signifie vraiment ca en 2026

Figma n a pas de fonction native qui transforme une page web en direct en calques modifiables. Collez un lien ou une image et vous obtenez un remplissage plat, pas un cadre avec du vrai texte et des vecteurs. Les plugins de capture vers design se rapprochent en capturant une image de la page, mais une image reste differente du balisage propre de la page. Un import conscient du CSS, la categorie dans laquelle se situe UnHTML, fonctionne autrement : il lit le DOM et la feuille de style reels de la page, il peut donc reconstruire de vrais cadres, du texte, des vecteurs et, la ou l auto layout s applique, la structure flex ou grid propre a la page. Voici ce que produit chacune des trois approches, ce que chacune admet honnetement ne pas savoir faire, et comment la mise a jour de l auto layout de Figma en 2026 change la comparaison.

Ce que font vraiment le collage et la copie natifs de Figma

Le copier-coller de Figma est concu pour reutiliser des elements de design a l interieur de Figma, pas pour capturer une page web. Vous pouvez copier et coller des objets entre pages, fichiers et cadres, et le multi-collage applique un ou plusieurs objets sur plusieurs cadres a la fois. Mais apportez quelque chose depuis l exterieur de Figma et les options se restreignent vite : images et videos du presse-papiers, code aux formats CSS, iOS ou Android, et exports PNG d objets selectionnes. La documentation de Figma elle meme est explicite sur le fait que les images et les videos n ont pas de type de calque propre : elles sont traitees comme des remplissages. Ce seul fait explique l essentiel de la confusion autour du "collage d une page web" dans Figma. Il n existe aucun chemin de collage depuis le web qui produise un cadre que vous pouvez selectionner, redimensionner avec des contraintes, ou auquel appliquer l auto layout. Ce qui arrive, c est une image statique posee sur le cadre ou vous l avez collee.

Plugins de capture vers design : ce qu ils capturent et ce qui leur echappe

Les plugins de la Community de Figma elle meme, dont des outils comme Codia AI Design et URL Screenshot, partent d une image de la page plutot que de son balisage. URL Screenshot garde une tache etroite et l assume honnetement : collez un lien, obtenez une capture deposee sur le canevas comme une image. Cette sortie est un remplissage, le meme comportement de remplissage que decrit la documentation copier-coller de Figma pour toute image externe. Codia AI Design va plus loin en reconstruisant des formes et, la ou l OCR s applique, du texte modifiable a partir de cette capture. Mais le point de depart reste une image aplatie, pas le DOM de la page. Le prix de ces plugins tiers n a pas ete verifie independamment au moment de la redaction, cet article ne mentionne donc pas leur cout.

Comme l entree est une capture d ecran, aucun de ces plugins ne peut recuperer l auto layout reel de la page. Il n y a pas de justify-content, pas d align-items, pas de valeur de gap a lire, parce qu une capture ne transporte aucun CSS. Ce que vous obtenez a la place est une approximation visuelle : des boites et du texte positionnes pour paraitre corrects a une taille donnee, sans la structure sous-jacente qui rendait la page d origine responsive. C est suffisant pour une reference rapide ou une page qui ne peut pas etre explorable automatiquement. C est une vraie limite pour qui veut un fichier de design modifiable qu il peut restructurer.

En quoi un import conscient du CSS differe, et pourquoi 2026 reduit l ecart

Un import conscient du CSS fonctionne dans le sens oppose. Il lit le HTML et la feuille de style propres a la page et projette cette structure sur les primitives de Figma. L approche d UnHTML consiste a convertir une page web en vrais cadres, texte, images, vecteurs et auto layout mappe depuis le CSS reel de la page, en nommant les proprietes qu il lit plutot qu en les approximant : justify-content et align-items fixent l alignement de l auto layout, et gap fixe l espace entre les enfants. La propriete gap est un raccourci pour row-gap et column-gap dans les conteneurs flex et grid, donc un importeur qui la lit correctement reproduit le meme espacement que l auto layout de Figma devrait sinon regler a la main.

Cette comparaison se resserre pour une raison precise liee a 2026. L auto layout de Figma a ete mis a jour pour refleter plus fidelement le CSS flexbox : gap correspond desormais directement a la propriete gap de flexbox, le padding est traite en border-box et ne peut plus etre compresse sous sa valeur definie, et les traits se comportent comme un border ou un outline CSS selon leur position. Les nouveaux cadres utilisent par defaut cette version mise a jour a partir de juillet 2026, et le bouton bascule manuel devient un bouton Mettre a jour, le support de l ancienne version prenant fin pour les nouveaux cadres en janvier 2027. En pratique, un import conscient du CSS construit sur ce modele d auto layout mis a jour a moins de travail de traduction a faire qu il y a un an. Le gap qu il ecrit et le gap qu attend Figma sont desormais le meme concept.

Le prix et l acces suivent une repartition simple. Le forfait gratuit d UnHTML importe jusqu a 500 calques par import en utilisant un positionnement absolu plutot que l auto layout. Le forfait Pro, un achat unique de 39 dollars par editeur, supprime cette limite de calques et ajoute la vraie conversion en auto layout decrite plus haut, ainsi que des composants et des styles de texte partages. Studio, a 119 dollars en paiement unique, couvre jusqu a cinq editeurs. Cote reseau, le comportement par defaut est zero requete. Rien ne quitte la machine qui execute l import a moins que vous n activiez la recuperation de ressources distantes, qui s execute dans un environnement isole et uniquement pour cette action optionnelle. Le seul appel que le plugin fait de lui meme est une verification de licence hebdomadaire qui ne transporte que la cle de licence et un identifiant d utilisateur Figma. Les fichiers HTML autonomes et les archives web n ont besoin de rien de l exterieur, puisqu ils transportent deja leurs propres ressources. Vous pouvez consulter les details tarifaires actuels sur la page du plugin lui meme.

Ou chaque approche montre ses limites

Aucune des trois approches ne devrait etre consideree comme capable de produire une copie pixel exacte, et les plus honnetes le disent clairement plutot que de l esquiver. Les polices non installees localement sont substituees, couramment par Inter, et un bon rapport d import liste chaque substitution afin que vous puissiez la corriger avant de vous fier au fichier. Les grilles complexes peuvent retomber sur un positionnement absolu plutot que sur une reconstruction complete de l auto layout : un compromis raisonnable, mais qui change le comportement du cadre si vous le redimensionnez ensuite. Le contenu dynamique ou genere par script est une limite pour chacun de ces outils quand ce contenu n apparait qu apres que JavaScript a fini de s executer sur la page en direct. Un fichier HTML autonome ou une capture d archive web evite ce probleme, puisque les ressources sont deja integrees au moment de la capture. Et la limite de 500 calques par import du forfait gratuit est specifique a un importeur conscient du CSS comme UnHTML. Les plugins de capture ne se heurtent pas au meme mur, parce qu ils ne produisent pas de calques structurels individuels au depart, seulement une image aplatie ou une approximation reconstruite de celle ci.

Quelle approche convient a la tache

Vous avez seulement besoin d une reference visuelle d une page ? Le collage natif de Figma ou un plugin de capture vous y amenent en quelques secondes, avec pour compromis que ce qui arrive est une image, pas une structure que vous pouvez modifier comme un cadre Figma natif. Refaire le design d un site qui n a jamais eu de fichier de design, demonter la page d un concurrent pour en comprendre la mise en page, ou reconstruire une ancienne page section par section, c est une tache differente. Le DOM et le CSS transportent une information qu une capture ne peut pas fournir : l espacement reel, l alignement reel et, a jour en 2026, un modele d auto layout cote Figma qui correspond a ces valeurs CSS de facon plus directe qu avant. Choisissez selon ce que vous voulez vraiment obtenir : une image a decalquer, ou un fichier que vous pouvez restructurer de la meme facon que vous restructureriez le CSS de la page d origine.