UnHTML frente a la importación a Figma de Builder.io: cuál encaja realmente con tu trabajo

UnHTML y el plugin HTML to Figma de Builder.io afirman convertir una página web existente en capas editables de Figma. Sin embargo, no están hechos para el mismo trabajo. UnHTML es un importador de página web a Figma de propósito único. El plugin de Builder.io es la pata de importación de un proceso de diseño a código cuyo negocio principal es convertir Figma en código, aplicado en sentido inverso. Esa diferencia determina de dónde importa cada uno, hasta dónde llega el auto layout y qué pasa cuando el CSS de una sección no se traduce de forma limpia. Cada afirmación de este artículo se verificó directamente en la documentación o la página de producto de cada proveedor, con fecha 2026-10-03, no en un sitio de reseñas ni en un foro.

De dónde importa realmente cada herramienta

UnHTML toma un archivo HTML, un .webarchive de Safari, una captura scene.json, o el resultado de su propia CLI de captura y bookmarklet de código abierto. La importación se ejecuta localmente. Eso importa en trabajos de desmontaje de la competencia y en reconstrucciones de páginas antiguas, donde normalmente la página de origen no es una que controles.

El plugin de Builder.io funciona a partir de una URL en vivo. La pegas, el plugin trae la página y la convierte. O usas una extensión de Chrome complementaria para capturar elementos DOM específicos de una página, incluidas páginas detrás de un inicio de sesión, e importar solo esas secciones. Builder.io plantea todo el flujo de trabajo como un ciclo completo: llevar una página a Figma y luego exportar el resultado de vuelta como React, Vue, Tailwind, u otros varios destinos, usando un modelo de IA junto con un compilador de código abierto para reconstruir una jerarquía de código adecuada en lugar de un volcado plano. Una vez importado un frame, quien diseña también puede retocarlo con instrucciones en lenguaje natural antes de ese paso de exportación.

Ese ciclo completo es el punto central del producto de Builder.io. UnHTML no tiene ninguna pata de exportación a código. Se detiene en cuanto las capas están en Figma, y esa es una decisión de alcance deliberada, no una función faltante. Para profundizar en cómo la dirección de la conversión cambia cuál herramienta es la indicada, consulta UnHTML vs Anima: en qué dirección va realmente la conversión.

Fidelidad del auto layout: CSS flex y grid

Verificado directamente en unhtml.pro el 2026-10-03, el plan gratuito de UnHTML ya incluye auto layout mapeado desde CSS flex y grid reales, con un límite de 500 capas por importación. Builder.io afirma que el soporte de auto layout en los frames importados está actualmente en beta, y su propia documentación del proyecto recomienda confirmar manualmente qué capas llevan autolayout antes de exportar de vuelta a código, en lugar de asumir que todo frame importado lo tiene.

Figma lanzó en 2026 una revisión de auto layout alineada con flexbox, y vale la pena conocerla sin importar qué herramienta de importación uses. El padding ahora siempre recibe el espacio que necesita, más cercano al modelo CSS de border box: un frame no puede ser más estrecho que su padding total. Solo los trazos internos cuentan en el cálculo del layout, no los externos ni los centrados, y la configuración de trazo de un padre ya no afecta cómo se calcula el trazo de un hijo. Los stacks de auto gap ahora admiten los modos space-between y evenly, que coinciden con sus equivalentes en CSS. Esa versión se convierte en la predeterminada para los frames nuevos en julio de 2026, y ambas versiones se podrán alternar hasta que se elimine la opción heredada en enero de 2027.

El auto layout de grid, uno de los tres flujos de auto layout de Figma, se corresponde con CSS Grid de forma tan directa como cualquier función de Figma. Las filas y columnas se llaman tracks. Las unidades fraccionarias (fr) distribuyen el espacio de forma proporcional, igual que en CSS, y el número de filas se ajusta al contenido igual que grid-auto-rows. Consulta la documentación de Figma para ver el mapeo completo. Para el detalle a nivel de propiedad de cómo aterrizan en Figma las propiedades individuales de flex y grid, consulta CSS Flexbox to Figma Auto Layout: A Property by Property Map y CSS Grid to Figma: What Survives the Conversion to Layers.

Cuando la conversión no puede mantenerse limpia

Ambos proveedores admiten abiertamente que esto no es un problema resuelto. UnHTML cae automáticamente a posicionamiento absoluto siempre que la geometría de una sección no se pueda reproducir como auto layout, y un presupuesto de nodos protege contra volcados de capas descontrolados en páginas inusualmente densas. La propia documentación de Builder.io afirma claramente que importar HTML a Figma es un proceso de mejor esfuerzo. Los iframes y los pseudo elementos no se convierten en absoluto. No todas las propiedades CSS son compatibles, y se excluyen los videos y los GIF animados. Las fuentes que no están ya subidas a Figma se sustituyen.

UnHTML hace lo mismo con las fuentes: lo que no está instalado cae a un sustituto (Inter, por defecto), y cada sustitución aparece en el informe de importación, así que nada cambia en silencio. Ninguna de las dos herramientas afirma un resultado exacto a nivel de píxel. Para UnHTML esa es una línea deliberada: el informe de importación existe precisamente porque algunas cosas sí caen a una alternativa, y el planteamiento honesto es "capas fieles y editables", no un clon exacto.

Privacidad: a dónde va realmente el contenido de tu página

Para un desmontaje de la competencia, o cualquier página que no controles, importa a dónde va el contenido mientras se procesa. El valor por defecto declarado de UnHTML es cero solicitudes de red. Nada sale de la máquina a menos que el usuario active la obtención remota, y esa ruta opcional ejecuta la solicitud en un marco aislado (sandbox), con los scripts y los manejadores de eventos en línea eliminados antes de que se renderice nada. La única llamada que UnHTML hace por sí mismo, sin importar la configuración, es una verificación semanal de licencia que lleva solo la clave de licencia y un id de usuario de Figma. No el contenido de la página.

El flujo de trabajo de Builder.io se basa en obtener la URL o capturar el DOM por diseño, ya que así es como el plugin pone la página frente a su motor de conversión. Si el procesamiento solo local es un requisito indispensable para un desmontaje concreto, esa es una diferencia real entre ambas, no un detalle menor.

Precios y límites

Verificado directamente en unhtml.pro el 2026-10-03: el plan gratuito incluye auto layout desde CSS flex y grid, herramientas de captura de código abierto y soporte comunitario, con un límite de 500 capas por importación. Pro cuesta 39 USD, pago único, por editor, y elimina ese límite, además de añadir la promoción de elementos repetidos a componentes y de tipografía repetida a estilos de texto compartidos, previsualizaciones de escritorio, móvil y personalizadas, un informe de importación con registro de sustitución de fuentes, y un año de actualizaciones. Studio extiende Pro a cinco editores por 119 USD.

Builder.io ofrece planes gratuitos y premium sin necesidad de tarjeta de crédito para usar las funciones gratuitas. El precio específico de los planes premium de Builder.io no estaba publicado en las páginas revisadas para este artículo, así que aquí no se indica ninguna cifra. Si el precio es un factor decisivo, revisa la página de precios actual de Builder.io directamente antes de presupuestar la adopción de un equipo. Las cifras de cualquiera de los dos proveedores pueden cambiar entre la fecha en que se escribió esto y la fecha en que lo lees.

Cuál encaja realmente con tu trabajo

Para rediseñar un sitio sin archivo de diseño, desmontar la página de un competidor, o reconstruir una página antigua con solo su CSS como referencia, una herramienta de propósito único para pasar de página web a Figma que se ejecuta localmente encaja directamente con ese trabajo. Ese es todo el alcance de UnHTML: meter las capas, mantener la estructura editable, y dejar el resto del proceso de diseño a Figma. Para un equipo ya estandarizado en un pipeline de Figma a código, que quiere el paso de HTML a Figma como una pata más de un ciclo más largo de vuelta a React, Vue, u otro framework, la oferta combinada de Builder.io encaja con ese trabajo distinto. Sobre todo si ese equipo ya paga por el lado de exportación a código de Builder.io y el plugin de importación es simplemente la pieza que les da el punto de partida.

Un punto práctico más. Un precio único por editor sin suscripción es una conversación de presupuesto distinta a la de un plan de plataforma que agrupa importación junto con generación de código, retoque con IA y hospedaje. Ninguna de las dos estructuras está mal, pero se ajustan a tamaños de equipo y ciclos de revisión distintos. Decide cuál se ajusta a tu equipo antes de comparar listas de funciones línea por línea.

La conclusión

UnHTML y Builder.io no compiten realmente por la misma tarea. Una es un importador de propósito único de página web a Figma que se ejecuta localmente y es explícito sobre dónde cae a posicionamiento absoluto. La otra es una plataforma de diseño a código cuyo plugin de HTML a Figma es la pata inversa de un pipeline orientado a volver al código. La fidelidad del auto layout, la postura de privacidad y el precio se derivan de esa diferencia. Ambos proveedores son honestos en que nada de esto llega a la exactitud a nivel de píxel, así que verifica la afirmación concreta que más te importe para tu flujo de trabajo directamente en la página de cada proveedor antes de construir un proceso alrededor de ella.