UnHTML frente a Locofy: convertir una web en diseño y convertir un diseño en código no son el mismo trabajo

Qué trabajo hace realmente cada herramienta

UnHTML y Locofy se comparan a menudo, pero resuelven problemas distintos. UnHTML toma una página web en vivo y la importa a Figma como capas nativas y editables. Locofy toma un diseño de Figma que ya construiste y lo exporta a código. Una captura, la otra entrega. Si solo necesitas uno de esos dos pasos, la otra herramienta no lo cubre.

UnHTML acepta un archivo HTML autocontenido, un .webarchive de Safari, o un scene.json capturado mediante su CLI, y convierte la página en frames, texto, imágenes, vectores y auto layout reales de Figma, tomados directamente del CSS de la propia página. Por defecto no hace ninguna petición de red: la importación se ejecuta por completo en tu máquina. Obtener recursos remotos y ejecutar scripts de la página, algo que importa en páginas renderizadas con JavaScript, es una única opción que debes activar tú mismo y que está desactivada por defecto. La única llamada que UnHTML hace por su cuenta es una comprobación de licencia semanal que lleva la clave de licencia y un ID de usuario de Figma. El ajuste de peticiones opcionales controla todo lo demás.

Locofy parte del otro extremo del proceso. Lee un archivo de Figma existente, ya sea creado a mano o producido por una herramienta de captura, y lo exporta a React, React Native, HTML y CSS, Flutter, Vue, Angular o Next.js, mediante un modo automático llamado Lightning o un modo paso a paso llamado Classic con etiquetado manual. Locofy Lightning es realmente rápido para convertir un archivo de Figma etiquetado en código funcional, y su lista de frameworks, siete opciones a partir de 2026, es más amplia que la de la mayoría de herramientas de diseño a código. Lo que no puede hacer es partir de una URL en vivo. No existe una ruta de captura en el producto: primero tiene que existir un archivo de Figma antes de que Locofy tenga algo que exportar.

Dónde se encuentran los dos flujos de trabajo

La superposición aparece en una situación concreta: un equipo quiere rediseñar una página y no tiene ningún archivo de Figma del que partir. Eso ocurre con sitios heredados anteriores a cualquier sistema de diseño, y ocurre cuando un equipo estudia cómo construyó un competidor su página antes de diseñar su propia versión.

Aquí el orden importa. Una herramienta de captura tiene que ejecutarse primero, porque todavía no hay nada que una herramienta de exportación de código pueda leer. Una vez que la página existe como capas editables, con auto layout real en lugar de una imagen plana, el equipo puede rediseñar dentro de Figma y después entregar el archivo terminado a una herramienta de diseño a código.

Estudiar la página de un competidor de esta forma significa analizar su estructura, los límites de sus componentes, sus decisiones de espaciado, para que tu propio equipo pueda tomar decisiones informadas. No significa republicar el diseño de otra persona como si fuera tu trabajo terminado. El objetivo de este tipo de análisis es entender, no duplicar.

La misma secuencia se aplica a una página que ya tienes pero para la que nunca hubo un archivo de diseño. Muchos sitios en producción se construyeron directamente en código años antes de que nadie creara un espacio de trabajo de Figma para ellos. Capturar esa página tal como se renderiza hoy, con su CSS real en lugar de una aproximación visual, le da al rediseño un punto de partida funcional en vez de un lienzo en blanco.

Precios y planes lado a lado

Los dos productos tienen precios distintos porque resuelven problemas distintos. Uno es una herramienta de captura por importación. El otro es una suscripción recurrente de exportación a código.

Las cifras de UnHTML anteriores proceden directamente de unhtml.pro, verificadas el 2026-09-29. Las cifras de Locofy no tienen ese mismo respaldo: locofy.ai/pricing renderiza su tabla de precios en el lado del cliente, y dos reseñas independientes de la página reportaron las mismas cifras, pero ninguna es la página estática propia del proveedor. Trata las cifras de Locofy como no verificadas hasta que revises tú mismo la página en vivo antes de tomar una decisión de compra.

La diferencia estructural importa más que las cifras exactas. UnHTML cobra una única vez por editor y la licencia es tuya. Locofy cobra mensualmente por el acceso continuo a sus frameworks de exportación.

El mapeo de CSS a auto layout, propiedad por propiedad

Convertir una página web en un archivo de Figma utilizable significa leer los estilos computados reales de la página y reproducirlos como propiedades de auto layout de Figma, no adivinar una aproximación visual.

El mapeo principal, según la referencia de flexbox de MDN:

• flex-direction de CSS (row o column) se traduce en el flujo horizontal o vertical de un frame de auto layout en Figma.
• justify-content de CSS se traduce en la alineación a lo largo del eje principal de Figma.
• align-items de CSS se traduce en la alineación a lo largo del eje secundario de Figma.
• gap de CSS se traduce directamente en el valor de gap entre objetos dentro del frame de Figma.
• padding de CSS en el contenedor se traduce en el padding del frame de auto layout.

El flujo de cuadrícula de Figma funciona de forma distinta a su auto layout horizontal y vertical. Agrupa los objetos en columnas y filas con spans, algo más cercano a CSS Grid que a flexbox. Una página construida con grid de CSS se traduce en ese flujo de cuadrícula en lugar de en un frame de tipo flex, por lo que una herramienta de captura tiene que detectar qué modelo de layout usa realmente cada contenedor antes de poder elegir la estructura correcta en Figma.

UnHTML lee los layouts flex, grid y block directamente del CSS real de la página y construye la estructura de auto layout correspondiente. Cuando un layout no se puede reproducir fielmente, el frame vuelve a un posicionamiento absoluto en lugar de una aproximación que se vería bien pero se comportaría mal al redimensionar. No es un clon con precisión de píxel de la página original, y el informe de importación detalla exactamente qué quedó como posicionamiento absoluto y qué fuentes se sustituyeron, Inter por defecto cuando una fuente no está instalada localmente.

Esto importa para el flujo de trabajo descrito antes. Una herramienta de diseño a código como Locofy exporta la estructura que ya tiene el archivo de Figma, tal cual. Si esa estructura son capas planas con posicionamiento absoluto, el código exportado también lo será. Un archivo con auto layout bien mapeado, del tipo que produce una herramienta de captura que lee el CSS real, le da a una herramienta de exportación de código algo que de verdad vale la pena exportar.

Cuándo recurrir primero a UnHTML y después a Locofy

Para una página sin archivo de Figma existente, captúrala antes de diseñar nada. Eso cubre tres situaciones habituales: un sitio heredado sin ningún origen de diseño, un análisis de un competidor hecho como referencia, y el rediseño de tu propia página antigua. En cada caso, pasar la página en vivo por UnHTML te da capas reales y editables con auto layout funcional, no una captura de pantalla plana calcada a mano.

Conoce los límites desde el principio. El plan gratuito tiene un tope de 500 capas por importación; páginas complejas con componentes muy anidados pueden llegar a ese límite antes de que Pro lo elimine. Las fuentes que no están instaladas localmente se sustituyen, y cada sustitución aparece en el informe de importación, así que nada queda oculto. Las cuadrículas CSS complejas que no se mapean con limpieza vuelven a posicionamiento absoluto. Nada de esto hace que el resultado sea inútil. Lo que hace es ser honesto sobre dónde termina la automatización y dónde empieza el ajuste manual.

Una vez que el archivo rediseñado está listo, ahí es donde entra una herramienta de diseño a código. Locofy, o cualquier exportador comparable, lee el archivo de Figma que ahora tienes y lo convierte en código de framework. Las dos herramientas son paradas en la misma línea de trabajo, no dos versiones de la misma parada.

Conclusión

UnHTML y Locofy responden preguntas distintas. UnHTML responde "cómo consigo que esta página web existente pase a Figma como capas reales". Locofy responde "cómo convierto este diseño de Figma en código funcional". Ninguna sustituye a la otra, y un proyecto que empieza sin ningún archivo de diseño necesita el paso de captura antes de que el paso de exportación tenga algo con lo que trabajar.

A medida que las herramientas de diseño a código siguen añadiendo frameworks y volviéndose más rápidas, la calidad del archivo de Figma que las alimenta deja de ser un detalle menor. Un paso de captura que lee el CSS real de una página y construye auto layout de verdad, en lugar de aplanarlo todo a posiciones absolutas, es lo que hace que el paso de exportación posterior merezca la pena.