Deutsch 
Français 
日本語 
한국어 
Polski 
Português 
Weblify vs CSS Scan
Alternativa a CSS Scan. Lleva la referencia web a un archivo de Figma editable.
Weblify es una alternativa a CSS Scan cuando la tarea es copiar una referencia web en Figma como capas editables. Copia una página completa o selecciona un elemento con la extensión gratuita de Chrome y pega el resultado en el archivo de diseño.
Extensión gratuita de Weblify para Google Chrome
Thanks so much, Adam!... saved me many, many hours of manual work.
¿CSS Scan o Weblify?
Compara el flujo de trabajo y elige la herramienta que encaja con tu próximo proyecto.
| CSS Scan |  Con Weblify |
|---|---|
| Inspección del CSS de sitios web CSS Scan ofrece herramientas para inspeccionar los estilos de una página web. | Extensión de Chrome de sitio web a Figma Copia una página web completa o elige un elemento en Chrome y, después, pégalo en Figma como capas editables con la extensión gratuita de Weblify. Lee la guía de Weblify |
| Copia de CSS El producto se centra en obtener CSS de elementos de páginas existentes. | De Figma a HTML, Tailwind, React y Vue Selecciona una capa de Figma e inspecciona el HTML, Tailwind, React o Vue generado junto al diseño y, después, copia o descarga la implementación. Lee la guía de Weblify |
| Flujo de trabajo orientado a desarrolladores Su flujo de trabajo sirve para inspeccionar sitios web implementados. | Vista previa de código en vivo en Figma Renderiza el código web generado en distintos tamaños de viewport dentro de Weblify y comprueba el resultado antes de la entrega o la descarga. Lee la guía de Weblify |
Extensión gratuita para Google Chrome. Copia tu primera página o elemento en Figma.
Consigue la extensión gratuita para ChromeElige tu flujo de trabajo
Elige la herramienta adecuada para cada trabajo.
Míralo en acción
Lo que puedes hacer con Weblify.
Descubre las funciones que hay detrás del flujo de trabajo, con demostraciones y guías de configuración.
Copia cualquier web a Figma con la extensión gratuita para Chrome.
Copia una página web entera o elige un solo elemento en Chrome y pégalo en Figma como capas editables con la extensión gratuita de Weblify.
- Copia de páginas web enteras
- Selección de un solo elemento
- Capas de Figma editables
Inspecciona cualquier capa de Figma como HTML, Tailwind, React o Vue.
Selecciona una capa de Figma e inspecciona el código HTML, Tailwind, React o Vue generado junto al diseño; después, copia o descarga la implementación.
- Inspección de HTML y CSS
- Salida en Tailwind
- Salida en React y Vue
Mira el resultado renderizado mientras inspeccionas el código en Figma.
Renderiza el código web generado con distintos tamaños de viewport dentro de Weblify y comprueba el resultado antes de la entrega o la descarga.
- Renderizado en vivo en el navegador
- Vistas previas responsive
- Vista previa junto al diseño de Figma
Prueba con un proyecto real
Lleva el flujo de trabajo a Weblify.
Empieza con un archivo representativo antes de cambiar el proceso del equipo.
Weblify ProQué comprobar antes de cambiar.
La inspección de CSS y la captura editable de sitios web son tareas distintas. La extensión gratuita de Chrome de Weblify es independiente de la inspección de código Pro, y las capas capturadas no recuperan los componentes originales de Figma ni la lógica de la aplicación del sitio web.
Lee la guía del flujo de trabajo- Empieza con una sección de una página web pública que necesites como referencia de diseño editable. Abre en Chrome el sitio web que quieres copiar.
- Copia la página o elige un elemento.
- Pega el resultado en un archivo de Figma nuevo o existente. La inspección de CSS y la captura editable de sitios web son tareas distintas.
Preguntas frecuentes
Lo que debes saber antes de empezar.
¿Cuándo debería elegir Weblify en lugar de CSS Scan?
Diseñadores que necesitan una referencia web editable en Figma, no solo el CSS inspeccionado.
¿Cuándo encaja mejor CSS Scan?
Desarrolladores que necesitan inspeccionar y copiar CSS de una página web implementada.
¿Qué debo comprobar antes de cambiar?
La inspección de CSS y la captura editable de sitios web son tareas distintas. La extensión gratuita de Chrome de Weblify es independiente de la inspección de código Pro, y las capas capturadas no recuperan los componentes originales de Figma ni la lógica de la aplicación del sitio web.
¿Copiar un sitio web recupera su sistema de diseño original?
No. Weblify reconstruye capas editables compatibles a partir de la página. Revisa el resultado y reconstruye la estructura reutilizable del sistema de diseño donde haga falta; la lógica de la aplicación y los componentes originales del código fuente son algo aparte.
¿Puedo probar Weblify antes de pasarme a Pro?
Extensión gratuita de Weblify para Google Chrome. La extensión de Chrome es independiente de la inspección de código de Weblify Pro.
Presupuesto en PDF ↗ 
