Exporter des pages web vers Figma

Comment fonctionne le flux de travail local

CloneWebsite n'envoie pas une page web à un serveur de conversion. L'extension Chrome lit la page rendue dans votre onglet actif, crée une archive .cdesign versionnée en mémoire, puis la télécharge ou la stocke localement. Le plugin Figma de CloneWebsite ouvre ce fichier et crée des calques dans le document Figma actuel.

Page web rendue → Extension Chrome → fichier .cdesign local → plugin Figma → calques modifiables

Le fichier .cdesign est un conteneur ouvert basé sur ZIP. Il contient un manifeste, un fichier de scène JSON par état capturé et des ressources d'image à adressage de contenu.

Capturer une page ou un composant

1. Ouvrez la page web et attendez que son contenu et ses polices web aient terminé le rendu.
2. Ouvrez la barre d'outils CloneWebsite et changez la sortie de Site web à Figma.
3. Choisissez Cloner la page ou Cloner le composant.
4. Ouvrez les options de capture Figma et choisissez les combinaisons de viewport et de thème. Le réglage initial capture le viewport et le thème actuels. Vous pouvez ajouter des viewports de 1440, 768 et 390 pixels et des thèmes clair ou sombre, jusqu'à six combinaisons.
5. Gardez la Capture améliorée activée lorsque vous avez besoin de viewports responsives, d'états d'interaction de composant, de replis de rastérisation d'iframe/filtre ou d'une géométrie de navigateur plus précise.
6. Sélectionnez Démarrer. En mode composant, cliquez sur le composant de la page et confirmez la sélection.
7. Téléchargez le fichier .cdesign résultant ou enregistrez-le dans la liste de projets locale de l'extension pour un téléchargement ultérieur.

Autorisation du débogueur Chrome

Chrome ne permet pas de déclarer l'autorisation debugger comme facultative, elle est donc accordée à l'installation de l'extension. CloneWebsite n'attache le débogueur que lorsque vous lancez une capture Figma avec la Capture améliorée activée. Il est utilisé temporairement pour émuler des combinaisons de viewport/thème, forcer des états pseudo pris en charge des composants et créer des captures d'écran locales pour des sous-arborescences visuelles non prises en charge. L'extension se détache de l'onglet lorsque la capture se termine ou échoue.

Lorsque la Capture améliorée est désactivée, l'extension n'attache pas le débogueur. Le mode de base capture le viewport actuel, le thème actuel et l'état de composant Default. Le rapport de capture explique quelles scènes améliorées ou quels replis ont été ignorés.

Chrome DevTools et un autre client de débogage ne peuvent pas contrôler le même onglet en même temps. Fermez DevTools pour cet onglet si la capture améliorée signale une erreur d'attachement.

Importer dans Figma

Pendant la phase de lancement interne :

1. Compilez le plugin depuis figma_plugin/ avec pnpm install && pnpm build.
2. Dans Figma Desktop, choisissez Plugins → Development → Import plugin from manifest….
3. Sélectionnez figma_plugin/manifest.json.
4. Exécutez CloneWebsite Design Importer.
5. Déposez le fichier .cdesign, sélectionnez les scènes à importer et lancez l'importation.

Le plugin n'a pas d'autorisation réseau. L'analyse de l'archive, la création d'images, la correspondance des polices et la génération des calques se font dans Figma sur votre appareil.

Ce qui reste modifiable

• Cadres, remplissages, bordures, rayons d'angle, ombres et modes de fusion de base
• Contenu textuel, taille de police, hauteur de ligne, alignement, décoration et couleur
• Calques d'image et SVG
• Dispositions Flexbox à haute confiance en tant que Figma Auto Layout
• Composants sélectionnés en tant que composants Figma
• États de composant Default, Hover, Focus, Active et Disabled en tant que variantes lorsque la capture améliorée peut mapper le composant sélectionné

Les régions de page Grid et de forme libre utilisent un positionnement absolu pour préserver la géométrie. Les filtres complexes, masques, iframes, surfaces vidéo et effets de navigateur non pris en charge peuvent devenir des calques de repli de rastérisation locale.

Polices et rapports d'importation

Les plugins Figma ne peuvent pas installer une police web distante de la page dans l'éditeur. L'importateur cherche d'abord la famille et le style demandés parmi les polices disponibles pour Figma. S'il ne peut pas charger une correspondance exacte, il utilise un repli local modifiable et liste la substitution dans le rapport d'importation.

Le rapport liste également les ressources manquantes, les replis de rastérisation, le balisage SVG non sûr ignoré, les limites de nœuds et les avertissements de capture. Révisez-le avant de traiter le fichier importé comme source de conception de production.

Confidentialité et usage responsable

Le contenu de la page n'est pas téléchargé vers CloneWebsite. Les requêtes réseau pendant la capture se limitent au téléchargement des ressources déjà référencées par la page, plus un point de terminaison d'IA BYOK facultatif si vous avez configuré cette fonctionnalité séparément. Voir la politique de confidentialité de l'extension.

Capturez uniquement les pages que vous êtes autorisé à consulter. Les droits d'auteur, marques, données personnelles et droits de conception du site original restent la propriété de leurs détenteurs.