Export to Figma par Shoun Eftikharul Alam

Convertissez n'importe quel site web en Figma. Capturez l'interface réelle d'une page et transformez-la en calques Figma propres et structurés. Sans captures d'écran, sans tout refaire à la main.

🚀 CE QU'IL FAIT
• Convertit n'importe quel site en calques Figma, la page entière ou des sections précises
• Copie des landing pages, des dashboards ou des designs concurrents dans Figma
• Inspecte typographie, couleurs, espacements, padding, marges et CSS sans code
• Extrait logos, SVG, images et assets en un clic
• Audite les palettes de couleurs, les familles de polices et le contraste WCAG
• Construit des références de design system à partir de produits réels
• Génère des spécifications DESIGN.md et SKILL.md pour alimenter les agents de code IA et les développeurs
• Prélève n'importe quelle couleur sur la page avec la pipette intégrée (HEX au pixel près)
• Clic droit sur une page ou un élément pour l'envoyer directement dans Figma
• Capture les iframes intégrées, le contenu multi-origines, localhost et les fichiers HTML locaux

🎯 IDÉAL POUR LES DESIGNERS ET LES DÉVELOPPEURS
• Copiez un site dans Figma sans le reconstruire à la main
• Refondez ou modernisez des sites existants
• Convertissez le HTML et le CSS en Figma
• Utilisez les landing pages concurrentes comme références modifiables
• Extrayez couleurs de marque, polices et assets en quelques secondes
• Travaillez directement sur le produit réel plutôt que sur des captures
• Générez documentation de design system et tokens pour les outils IA comme Cursor, Claude, GitHub Copilot et Windsurf
• Transmettez des specs précises issues d'une UI réelle à votre workflow de dev ou d'IA

⚡ COMMENT ÇA MARCHE
1. Installez l'extension Firefox
2. Ouvrez n'importe quelle page web
3. Cliquez sur "Export to Figma" et capturez la page entière ou un élément
4. Collez directement dans Figma (Cmd/Ctrl + V), aucun plugin Figma supplémentaire requis

Vous obtenez un vrai frame Figma avec texte, polices, couleurs et images modifiables et une structure de calques propre, pas une image aplatie.

✨ FONCTIONNALITÉS
• Capture de la page entière et au niveau de l'élément
• Structure de calques modifiable et organisée
• Préserve mises en page, styles, polices et texte
• Collez directement dans Figma, sans plugin compagnon
• Mode Inspection avec superpositions d'espacements, padding et marges
• Extracteur de couleurs (HEX, RGB, HSL, OKLCH, Tailwind)
• Scanner typographique avec le détail d'usage de chaque police
• Téléchargez images, SVG, vidéos, GIF et fichiers Lottie
• Vérificateur de contraste WCAG
• Fonctionne avec les sites générés par IA (v0, Lovable, Bolt, Replit, Framer, etc.)
• Préréglages ordinateur, tablette, mobile et largeur personnalisée
• Pipette avec loupe de pixel agrandie (HEX)
• Générateur DESIGN.md + SKILL.md : tokens, marque, espacements, accessibilité et règles en Markdown prêt pour l'IA
• Capture depuis le menu contextuel
• Capture des iframes multi-origines et intégrées

💡 CAS D'USAGE COURANTS
• Refontes de sites clients
• Recherche et analyse concurrentielle
• Migration de sites existants vers Figma
• Extraction de design systems depuis des sites en production
• Prototypage rapide et maquettes
• Création de guides de style à partir de sites réels
• Étude des patterns UI et UX en production
• Génération de contexte DESIGN.md pour les agents de code IA et les workflows design-to-code
• Documentation des tokens et des chartes de marque depuis des sites en ligne
• Capture de prototypes localhost et de sites générés par IA