Comment importer un site React ou Vue dans Figma

Un site React ou Vue ressemble à une page terminée dans le navigateur, mais le HTML que son serveur envoie réellement est presque vide. Importez-le de la même façon qu'une page statique et vous ne capturerez que cette coquille vide, pas la page qu'une vraie visite voit. C'est là qu'intervient la CLI d'UnHTML : elle fait tourner l'application d'abord, attend que le JavaScript termine de construire la page, puis capture le résultat. Ce guide explique pourquoi ce problème de coquille vide se produit, comment la CLI le résout étape par étape, et ce qui atterrit dans Figma une fois la capture terminée.

Pourquoi les sites React et Vue ont besoin d'une autre méthode de capture

La plupart des applications React et Vue utilisent le rendu côté client. Le travail du serveur est réduit : il envoie un document HTML minimal et un bundle JavaScript, puis s'efface. Comme l'explique l'entrée du glossaire de MDN sur le rendu côté client, une réponse purement rendue côté client ne contient guère plus qu'un conteneur racine vide et une seule référence à un script. Le contenu réel se construit ensuite, dans le navigateur, par manipulation du DOM. Toute la logique, la récupération des données, le templating et le routage se font côté client, comme l'explique l'aperçu du rendu sur le web de web.dev.

Vous pouvez le vérifier vous-même : désactivez JavaScript sur une application rendue côté client et rechargez-la. La page devient largement inerte, parce qu'il n'y avait jamais grand-chose dans la réponse initiale. C'est exactement le problème pour tout outil de capture qui se contente de lire ce que le serveur a envoyé. Il récupère la coquille, et la coquille ne dit presque rien sur la mise en page, les espacements ou le contenu.

Pour un outil de capture, cela signifie qu'une application React ou Vue a besoin que son JavaScript s'exécute avant la capture, pas à sa place. Lisez le code source brut et il n'y a rien qui vaille la peine d'être importé. Laissez d'abord l'application se rendre et une page complète de cadres, de texte et d'images attend d'entrer dans Figma.

C'est différent de l'import d'un site vitrine construit en HTML et CSS simples, où la réponse du serveur contient déjà la page terminée. Un outil de capture ciblant uniquement le HTML du serveur fonctionne bien dans ce cas, et échoue silencieusement sur une application React ou Vue, renvoyant une page de divs presque vides plutôt qu'une erreur. Cet échec silencieux est le vrai risque : vous ne découvrez que la capture était fausse qu'en ouvrant Figma et en n'y trouvant rien à concevoir.

Comment la CLI d'UnHTML capture une URL en direct

La CLI existe précisément pour ce cas, et c'est une seule commande. Aucune configuration de projet n'est requise de votre côté :

1. Installez et lancez la commande de capture sur l'URL en direct.

   node capture/cli/capture.js https://votre-app.exemple.com --out scene.json
   

   Cela pointe la CLI vers la page voulue, avec un chemin de sortie pour le résultat.
2. Elle ouvre un navigateur headless contre cette URL. Elle analyse le HTML, puis exécute les scripts de la page, la même technique fondamentale que le flag dump-dom de Chrome :

   chrome --headless --dump-dom https://example.com
   

   Chrome for Developers documente cela comme analysant le HTML en DOM, exécutant tout script qui le modifie, puis sérialisant ce résultat en HTML. La CLI applique cette idée à un pipeline de capture complet plutôt qu'à un simple dump.
3. Elle attend que le comportement de la page se stabilise. Un défilement complet de la page s'exécute pour que le contenu chargé au scroll ait une chance de se monter, et les ressources distantes sont récupérées sans se heurter aux limitations CORS qui bloqueraient une capture depuis l'intérieur du navigateur lui-même.
4. Elle écrit le résultat dans scene.json. Ce fichier contient l'état du DOM entièrement rendu, sa structure, ses styles et ses références de ressources, prêt à être lu par le plugin.
5. Importez scene.json depuis le plugin Figma. Comme la capture a déjà eu lieu en ligne de commande, le plugin n'a pas besoin d'accès réseau en direct au moment de l'import. Vous importez un fichier, pas une page à récupérer à nouveau.

Pour une petite page vitrine, toute cette séquence prend quelques secondes. Pour un grand tableau de bord Vue ou une application React avec de nombreuses routes, ce sont toujours les cinq mêmes étapes, avec simplement plus de contenu à faire défiler et plus de ressources à récupérer.

Quelques points méritent d'être vérifiés avant de lancer la commande. Assurez-vous que l'URL que vous capturez est bien celle qui rend réellement votre application, pas un portail de connexion ou un écran de chargement placé devant. La CLI capture l'état du DOM tel qu'il existe au moment où elle arrête d'attendre, donc une page encore en cours de chargement produit une scène incomplète. Si votre application dépend d'une authentification, capturez une route accessible sans elle, ou un état que vous pouvez atteindre directement. Et comme les ressources distantes sont récupérées pendant la capture, un hébergeur d'images ou un CDN de polices lents peuvent ajouter un temps réel à l'exécution sur une page riche en contenu.

De la capture CLI aux calques Figma

Une fois scene.json dans Figma, le plugin transforme le DOM capturé en calques natifs : cadres, texte, images et vecteurs, mappés depuis le CSS propre de la page.

L'auto layout est l'endroit où ce mappage se voit le plus. Les contrôles de direction, d'espacement (gap), de marge intérieure (padding) et de redimensionnement de Figma suivent de près le flexbox CSS, comme le détaille le guide de Figma sur l'auto layout : gap distribue les objets de la même façon que justify-content et le gap CSS, padding reflète le padding CSS, et les modes de redimensionnement hug contents et fill container correspondent à un dimensionnement piloté par le contenu et à flex: 1. Vous voulez le mappage propriété par propriété ? Consultez comment le flexbox CSS se mappe à l'auto layout de Figma.

Les polices reçoivent le même traitement honnête. Une police non installée localement est remplacée, par Inter par défaut, et chaque substitution est consignée dans le rapport d'import plutôt que changée silencieusement. Les mécanismes de cette substitution et de sa journalisation sont couverts dans la substitution de polices dans Figma.

Tout ne se mappe pas proprement, cependant. Une grille CSS complexe, ou une mise en page construite sur des astuces de positionnement plutôt que sur flex, peut retomber sur un positionnement absolu plutôt que sur l'auto layout. Ce n'est pas un clone exact au pixel près de la page d'origine, et le rapport d'import le dit directement plutôt que de cacher l'écart.

Capture CLI face au re-rendu intégré au plugin

Le plugin peut aussi re-rendre une page avec les scripts activés, dans un cadre isolé, directement au moment de l'import. Cette voie existe, mais elle est optionnelle, car elle nécessite un accès réseau en direct au moment où vous lancez l'import.

Pour une application React ou Vue lourde, capturer d'abord avec la CLI puis importer scene.json ensuite est la voie la plus fiable. Le travail de rendu se fait une seule fois, en ligne de commande, avec le temps d'attendre le défilement et le chargement des ressources. Le re-rendu intégré au plugin est pratique pour une vérification rapide sur une page légère, mais pour tout ce qui présente une vraie complexité côté client, c'est le flux de travail en deux étapes avec la CLI qui tient la route.

Il y a aussi une raison liée au flux de travail de préférer la CLI, au-delà de la fiabilité. Un fichier scene.json est portable : capturez une route une fois, transmettez le fichier à un membre de l'équipe, ou réimportez-le plus tard sans retoucher à l'URL en direct. Le re-rendu intégré au plugin doit atteindre le réseau à chaque fois, ce qui signifie que chaque nouvel import dépend du fait que le site reste accessible et inchangé entre-temps.

Limites de calques et tarifs pour les captures plus importantes

Une application React ou Vue peut facilement produire plus de calques qu'une page statique, il vaut donc la peine de connaître les limites avant de capturer une grande application. Au 21 septembre 2026, le forfait gratuit applique déjà la conversion en auto layout, avec une limite de 500 calques par import. Pro, un paiement unique de 39 dollars par éditeur, supprime cette limite de calques et ajoute des composants et des styles de texte. Studio, un paiement unique de 119 dollars, accorde la licence Pro à jusqu'à cinq éditeurs. Tous les forfaits incluent un an de mises à jour. Vérifiez les tarifs directement sur unhtml.pro avant d'acheter, car ils peuvent changer.

Conclusion

La raison pour laquelle un site React ou Vue a besoin de la CLI tient à un seul fait : le serveur n'envoie presque rien, et la page réelle n'existe qu'après l'exécution du JavaScript. La CLI résout cela en capturant le DOM en direct et déjà exécuté dans scene.json, afin que le plugin Figma dispose d'une page complète à importer plutôt que d'une coquille vide. À partir de là, le flux de travail est le même que pour toute autre capture : auto layout mappé depuis le CSS, polices substituées et consignées, et un rapport d'import qui indique précisément où la conversion a tenu et où elle n'a pas tenu.