UnHTML frente a una captura de pantalla con trazado de imagen: qué obtienes en realidad

Qué significa en realidad "captura de pantalla más trazado"

"Trazarlo" suele significar una de dos cosas en Figma: la función integrada Vectorize, o un plugin de trazado de la comunidad. Ambos parten del mismo punto, una imagen aplanada. Ambos producen el mismo tipo de resultado: geometría vectorial.

La función Vectorize de Figma convierte una imagen estática en capas vectoriales editables, pero su documentación la enmarca alrededor de símbolos dibujados a mano, letras e ilustraciones, no capturas de pantalla de interfaces. Seleccionas una imagen, abres More en la barra de herramientas secundaria y eliges Vectorize. En ninguna parte de la propia descripción de Figma se menciona que salgan capas de texto o auto layout. La advertencia es explícita: las imágenes complejas o de baja resolución pueden no vectorizarse bien. Una captura de una página web cargada de texto está cerca del peor caso que describe esa advertencia.

Plugins de la comunidad como Image Tracer hacen el mismo trabajo con otra interfaz: metes un mapa de bits, recibes trazados vectoriales escalables. Estas herramientas trabajan solo con datos de píxeles. No tienen concepto del DOM original de la página, de su CSS, ni de qué píxeles eran un párrafo de texto frente a un ícono decorativo. Un encabezado y una sombra se convierten por igual en geometría trazada, y ninguno de los dos es texto que puedas seleccionar, editar o reacomodar.

Qué añaden las herramientas de IA para capturas de pantalla

Una categoría más nueva se ubica entre el trazado simple y una importación real: los plugins de diseño con IA a partir de capturas de pantalla. image.to.design, por ejemplo, toma una captura de pantalla y la pasa por un modelo que extrae texto, nombra las capas con algo más útil que "Rectangle 17", aplica grupos de auto layout e intenta identificar componentes como botones, barras de navegación y tarjetas.

Eso es un avance real frente a un plugin de trazado, y merece una palabra justa: para una maqueta rápida de la interfaz de alguien más, o una referencia que planeas redibujar a mano de todos modos, esa estructura inferida puede ahorrar tiempo real. Pero sigue trabajando a partir de una imagen aplanada de la página, armada después de que cada valor CSS que produjo esa imagen ya desapareció. La herramienta reconstruye el espaciado, el color y el diseño a partir de píxeles y una suposición entrenada, no a partir de los números que el navegador realmente usó. La propia descripción de div.RIOTS lo dice: los diseños complejos o poco comunes pueden necesitar limpieza manual.

La extracción de texto en concreto todavía no es algo que Figma haga de forma nativa. Una solicitud de función de larga data en el propio foro de Figma que pide OCR integrado lleva desde abril de 2024 con una respuesta que se resume en "lo vamos a transmitir al equipo". La actividad más reciente sigue apuntando a plugins de terceros. ¿Quieres sacar texto de una captura de pantalla en Figma hoy? Dependes de que el modelo de un plugin lo adivine correctamente, no de una capacidad integrada.

Esa suposición puede estar mal de formas que importan. El OCR lee cómo se ven los píxeles, no lo que dice el marcado, así que no tiene forma de decirte que un encabezado era en realidad un <h2> dentro de un contenedor flex con un gap de 24px, o que un precio era un valor en vivo tomado de una plantilla en vez de texto estático. El archivo de Figma reconstruido puede verse bien a primera vista, y para una maqueta puntual eso suele bastar. Pero cada número que muestra, espaciado, radio de esquina, interlineado, es una estimación a la que el modelo llegó mirando una imagen, no un valor que leyó de la página.

Qué captura UnHTML en su lugar

UnHTML se salta por completo el paso de la captura de pantalla. Lee el DOM y el CSS en vivo de la página y construye frames, texto, imágenes, vectores y auto layout directamente a partir de lo que el navegador realmente renderizó. El texto llega como texto, porque era texto en la página. El auto layout viene de las reglas reales de flexbox y grid de la página, no de la suposición de un modelo sobre dónde probablemente van los espacios.

El plugin gratuito importa hasta 500 capas por página, usando posicionamiento absoluto. Pro elimina ese límite y añade conversión a auto layout, por $39 de pago único por editor. Studio extiende una licencia Pro a cinco editores por $119 de pago único. Por defecto la importación no hace ninguna solicitud de red, nada sale de tu máquina, y traer recursos remotos es una opción explícita que tienes que activar tú mismo.

Dónde UnHTML todavía recurre a un respaldo

Nada de esto hace que la importación sea exacta al píxel, y no pretende serlo. Si una fuente usada en la página no está instalada localmente, UnHTML la sustituye, Inter por defecto, y registra cada sustitución en el informe de importación para que sepas exactamente qué cambió. Si el diseño de una sección es demasiado complejo para reproducirse como auto layout limpio, recurre por su cuenta al posicionamiento absoluto en vez de forzar una estructura rota. Los límites de fidelidad son el intercambio honesto por trabajar a partir de la estructura real de la página en lugar de una imagen de ella. Consulta cómo se reemplazan y registran las fuentes faltantes para ver ese lado del intercambio con más detalle.

Lo que importa es qué conserva el respaldo en comparación con el trabajo de limpieza de una herramienta de captura de pantalla. Cuando UnHTML recurre al posicionamiento absoluto, el texto sigue siendo texto real, los colores siguen siendo los valores CSS reales de la página, y el informe de importación te dice exactamente qué frame recurrió al respaldo y por qué. La limpieza de una herramienta de captura de pantalla, en cambio, es manual: eres tú quien tiene que notar que el padding de un botón se ve mal y corregirlo a ojo, porque nunca hubo un valor CSS detrás que leer en primer lugar.

Cómo elegir la herramienta adecuada para el trabajo

Los dos enfoques en realidad no compiten por el mismo trabajo. Vectorize y los plugins de trazado son para arte de referencia estático: una imagen de moodboard, una captura anotada de un competidor, arte que nunca piensas reconstruir funcionalmente. Las herramientas de IA para capturas de pantalla van un paso más allá, útiles para una maqueta rápida cuando no necesitas que el resultado coincida con el CSS real de la fuente.

Una estructura editable que de verdad piensas rediseñar o reconstruir es un trabajo distinto, y es el que UnHTML y otras herramientas que leen estructura están hechas para resolver. La distinción se vuelve más clara al comparar herramientas específicas: consulta en qué dirección corre realmente la conversión para ver cómo se juega eso frente a Anima, y diseño a código y web a diseño no son el mismo trabajo para entender por qué una herramienta hecha para ir de diseño a código no funciona bien automáticamente a la inversa.

Preguntas frecuentes

¿Puede la función Vectorize integrada de Figma convertir una captura de pantalla en un diseño de interfaz funcional?

Vectorize está hecha para arte estático como símbolos dibujados a mano, letras e ilustraciones. Convierte una imagen en trazados vectoriales, pero la propia documentación de Figma no describe que produzca capas de texto, frames o auto layout, y advierte que las imágenes complejas o de baja resolución pueden no vectorizarse bien. Una captura de una página web es exactamente el caso complejo y cargado de texto para el que no está pensada.

¿Los plugins de IA para capturas de pantalla producen texto real y editable?

Algunos sí, dentro de ciertos límites. Plugins como image.to.design ejecutan OCR e inferencia de diseño sobre la imagen aplanada y pueden extraer texto y adivinar grupos de auto layout, lo cual es un avance real frente al trazado simple. Pero es una reconstrucción a partir de píxeles, armada después de que los valores CSS reales de la página ya desaparecieron, así que el espaciado, los tokens de color exactos y los metadatos de fuente son aproximaciones que el propio proveedor dice que pueden necesitar limpieza manual en diseños complejos.

¿Qué hace UnHTML de forma distinta a una herramienta basada en capturas de pantalla?

UnHTML lee el DOM y el CSS en vivo de la página en lugar de una imagen aplanada, así que las capas de texto vienen del texto real de la página, el auto layout viene de las reglas reales de flexbox y grid de la página, y los colores y espaciados vienen de los valores CSS reales de la página. El nivel gratuito tiene un límite de 500 capas con posicionamiento absoluto; Pro elimina el límite y añade conversión a auto layout por $39 de pago único por editor.

¿Es la importación de UnHTML exacta al píxel?

No, y no pretende serlo. Las fuentes que no están instaladas localmente se sustituyen, Inter por defecto, y cada sustitución queda registrada en el informe de importación. Un frame que no puede reproducir la geometría capturada recurre por su cuenta al posicionamiento absoluto en vez de producir en silencio un diseño peor.

Conclusión

Una captura de pantalla con trazado, ya sea el Vectorize nativo de Figma, un plugin de trazado o una reconstrucción con IA, te da geometría vectorial y, en el mejor de los casos, una aproximación inferida de la estructura. UnHTML te da la estructura real de la página mapeada desde su CSS, con los respaldos registrados en vez de ocultos. Cuál es el adecuado depende de si necesitas arte de referencia o una estructura que de verdad piensas editar y reconstruir.