Deutsch 
Español 
日本語 
한국어 
Polski 
Português 
Weblify vs CSS Scan
Alternative à CSS Scan. Importez la référence web dans un fichier Figma modifiable.
Weblify est une alternative à CSS Scan lorsque la tâche consiste à copier une référence web dans Figma sous forme de calques modifiables. Copiez une page entière ou sélectionnez un élément avec l’extension Chrome gratuite, puis collez le résultat dans le fichier de design.
Extension Weblify gratuite pour Google Chrome
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS Scan ou Weblify ?
Comparez les workflows, puis choisissez l’outil adapté à votre prochain projet.
| CSS Scan |  Avec Weblify |
|---|---|
| Inspection du CSS de sites web CSS Scan propose des outils pour inspecter les styles d’une page web. | Extension Chrome du site web vers Figma Copiez une page web entière ou choisissez un élément dans Chrome, puis collez-le dans Figma sous forme de calques modifiables avec l’extension gratuite de Weblify. Lire le guide Weblify |
| Copie de CSS Le produit se concentre sur la récupération du CSS d’éléments de pages existantes. | De Figma à HTML, Tailwind, React et Vue Sélectionnez un calque Figma et inspectez le HTML, Tailwind, React ou Vue généré à côté du design, puis copiez ou téléchargez l’implémentation. Lire le guide Weblify |
| Workflow orienté développeurs Son workflow sert à inspecter des sites web implémentés. | Aperçu du code en direct dans Figma Affichez le rendu du code web généré à différentes tailles de viewport dans Weblify et vérifiez le résultat avant la transmission ou le téléchargement. Lire le guide Weblify |
Extension Google Chrome gratuite. Copiez votre première page ou votre premier élément dans Figma.
Obtenir l’extension Chrome gratuiteChoisissez votre workflow
Choisissez l’outil adapté à chaque tâche.
En pratique
Ce que vous pouvez faire avec Weblify.
Découvrez les fonctionnalités derrière le workflow, avec des démonstrations et des guides de configuration.
Copiez n’importe quel site web dans Figma avec l’extension Chrome gratuite.
Copiez une page web entière ou choisissez un seul élément dans Chrome, puis collez-le dans Figma sous forme de calques modifiables grâce à l’extension gratuite Weblify.
- Copie de pages web entières
- Sélection d’un seul élément
- Calques Figma modifiables
Inspectez n’importe quel calque Figma en HTML, Tailwind, React ou Vue.
Sélectionnez un calque Figma et inspectez le code HTML, Tailwind, React ou Vue généré à côté du design, puis copiez ou téléchargez l’implémentation.
- Inspection HTML et CSS
- Code Tailwind
- Code React et Vue
Voyez le rendu pendant que vous inspectez le code dans Figma.
Affichez le code web généré à différentes tailles de viewport dans Weblify, puis vérifiez le résultat avant la passation ou le téléchargement.
- Rendu en direct dans le navigateur
- Aperçus responsive
- Aperçu à côté du design Figma
Testez sur un vrai projet
Migrez votre workflow vers Weblify.
Commencez par un fichier représentatif avant de changer le processus de l’équipe.
Weblify ProCe qu’il faut vérifier avant de changer.
L’inspection CSS et la capture modifiable de sites web sont des tâches différentes. L’extension Chrome gratuite de Weblify est distincte de l’inspection du code Pro, et les calques capturés ne restituent ni les composants Figma d’origine ni la logique applicative du site web.
Lire le guide du workflow- Partez d’une section de page web publique dont vous avez besoin comme référence de design modifiable. Ouvrez dans Chrome le site web à copier.
- Copiez la page ou choisissez un élément.
- Collez le résultat dans un fichier Figma nouveau ou existant. L’inspection CSS et la capture modifiable de sites web sont des tâches différentes.
Questions fréquentes
Ce qu’il faut savoir avant de commencer.
Quand choisir Weblify plutôt que CSS Scan ?
Designers qui ont besoin d’une référence web modifiable dans Figma, et pas seulement du CSS inspecté.
Dans quels cas vaut-il mieux choisir CSS Scan ?
Développeurs qui doivent inspecter et copier le CSS d’une page web implémentée.
Que dois-je vérifier avant de changer d’outil ?
L’inspection CSS et la capture modifiable de sites web sont des tâches différentes. L’extension Chrome gratuite de Weblify est distincte de l’inspection du code Pro, et les calques capturés ne restituent ni les composants Figma d’origine ni la logique applicative du site web.
Copier un site web permet-il de récupérer son design system d’origine ?
Non. Weblify reconstruit des calques modifiables compatibles à partir de la page. Vérifiez le résultat et reconstruisez la structure réutilisable du design system si nécessaire ; la logique applicative et les composants du code source d’origine sont une autre affaire.
Puis-je essayer Weblify avant de passer à une offre payante ?
Extension Weblify gratuite pour Google Chrome. L’extension Chrome est indépendante de l’inspection de code de Weblify Pro.
Devis PDF ↗ 
