De Framer a Figma: UnHTML frente a la importación web de Framer para diseñadores

Respuesta corta: van en direcciones opuestas

La importación web de Framer y UnHTML no compiten de frente, porque mueven el contenido en direcciones opuestas. La extensión de navegador de Framer copia partes de una página web y las pega en Framer. UnHTML es un plugin de Figma que reconstruye una página web como capas dentro de Figma.

Si buscaste "framer a figma", probablemente tienes un sitio publicado en Framer y necesitas llevarlo a Figma como algo editable. En la documentación de Framer que encontramos no hay nada que cubra ese sentido. Este artículo explica qué hace cada herramienta, muestra una ruta práctica desde una página publicada en Framer hasta Figma y pone las dos lado a lado. Los precios y las funciones se revisaron el 2026-10-13.

En qué dirección va cada herramienta

Framer documenta dos formas de traer material externo a un proyecto de Framer. Una es una extensión de navegador que copia secciones de una página web en vivo para que las pegues en un proyecto de Framer. La otra es un plugin oficial de Figma, aparte, que importa a Framer las capas de Figma que selecciones. Las dos terminan dentro de Framer.

UnHTML termina dentro de Figma. Es un plugin que convierte una página web en marcos, texto, imágenes, vectores y auto layout nativos. Por eso la pregunta útil no es "cuál es mejor", sino "dónde quieres que viva el resultado".

Si ya leíste sobre la dirección en la que realmente va una conversión en otras herramientas, aquí aplica la misma lógica. Comprueba el destino antes de comparar funciones.

Qué hace la importación web de Framer

La herramienta de Framer es una extensión de Chrome llamada HTML to Framer. Instálala, abre tu sitio, pasa el cursor sobre un elemento y cópialo. Mantén Shift para copiar varios elementos a la vez, o pulsa Esc mientras pasas el cursor para seleccionar el elemento padre. En Framer pegas con Cmd+V en Mac o Ctrl+V en Windows.

Framer indica que, al pegar una sección con varios elementos, los div vacíos se descartan y queda una jerarquía de capas limpia. Cuando los elementos están en el lienzo puedes editarlos, añadir breakpoints y publicar.

Framer también es sincero sobre lo que viene después. Su lección aconseja usar lo pegado como punto de partida y luego revisar el diseño, los recursos y el comportamiento responsive en el lienzo. Es una expectativa razonable para cualquier conversión.

Dos salvedades sobre las fuentes. La página de la extensión tiene fecha del 5 de septiembre de 2023 y no indica límites ni precios. La lección de Framer avisa de que es anterior a la actualización del 16 de junio de 2026 (Agents, Branching y el CMS), así que parte de la interfaz puede haber cambiado. No hemos verificado los requisitos de plan actuales de Framer, por eso este artículo no los menciona.

Para un equipo que quiere construir en Framer, es una forma rápida de traer secciones de un sitio existente. No está pensada para entregarte capas de Figma.

Qué obtienes en Figma

UnHTML traduce el CSS de la propia página a estructura de Figma. El espaciado, el padding, el wrap y el stretch salen del CSS flex y grid de la página y se convierten en auto layout. El centro de ayuda de Figma define las piezas que verás: dirección (vertical, horizontal o grid), gap, padding, wrap y los modos de redimensionado Hug contents, Fill container y Fixed. Figma documenta estas propiedades de auto layout con detalle, y nuestra referencia sobre cómo se asigna flexbox a auto layout cubre la parte de CSS.

Cuando un marco no puede reproducir la geometría capturada, el plugin recurre al posicionamiento absoluto. Las fuentes que no están instaladas en tu equipo se sustituyen, y cada cambio aparece en el informe de importación. Es un punto de partida editable, no un clon exacto al píxel.

Métodos de captura y privacidad

Puedes arrastrar al plugin un archivo .html autónomo o un .webarchive de Safari. Para sitios en vivo, recursos remotos o páginas construidas con JavaScript, primero capturas un scene.json con la CLI o con un bookmarklet. Con la configuración por defecto la importación no hace ninguna petición de red, y la descarga de recursos remotos es una opción que hay que activar.

Precios a 2026-10-13

La página del propio plugin lista tres precios únicos, sin suscripción:

La página señala que los precios de lanzamiento pueden cambiar, y que una compra completada conserva el precio pagado.

Cómo llevar un sitio publicado de Framer a Figma

Esta ruta trata tu página publicada en Framer como cualquier otro sitio web. El requisito previo es que la página esté publicada, porque capturas lo que ve un navegador.

1. Abre la página publicada en Chrome o Safari.
2. Guárdala como archivo HTML autónomo (consulta cómo exportar un HTML autónomo desde Chrome), o captura un scene.json con la CLI si la página depende de scripts o de recursos remotos.
3. Abre Figma, ejecuta el plugin y suelta el archivo.
4. Lee el informe de importación. Busca fuentes sustituidas y marcos que recurrieron al posicionamiento absoluto.
5. Limpia y convierte en componentes lo que vayas a seguir editando.

Espera diferencias. Los sitios de Framer suelen tener animaciones y ser muy responsive, y una captura registra el estado de un solo viewport. Revisa los breakpoints que te importan y reconstruye las interacciones a mano, ya que una captura estática no lleva comportamiento.

Hay otras herramientas en esta categoría. Si estás valorando otro plugin de web a Figma, compara precios, límites de capas y resultado en la misma página antes de elegir. Para este artículo no verificamos ninguna herramienta de exportación del lado de Framer, así que no las tratamos.

Lado a lado

La tabla muestra una diferencia de destino, no de calidad. La herramienta de Framer es el camino más corto si el sitio terminado va a vivir en Framer. El plugin de Figma es el camino más corto si el trabajo terminado vive en Figma, donde las capas son nativas y el auto layout es real.

Cuál usar

Elige según el destino. Si llevas una página a un proyecto de Framer, usa la extensión de Framer y revisa el resultado en el lienzo, como aconseja Framer. Si llevas una página publicada de Framer a Figma, captura la página e impórtala con una herramienta del lado de Figma, y lee el informe de importación antes de fiarte de las capas. En cualquier caso, trata el resultado como un punto de partida y reserva tiempo para la limpieza.

Preguntas frecuentes

¿Puede Framer exportar un sitio a Figma?

La documentación de Framer que encontramos cubre el sentido contrario: un plugin de Figma para llevar capas de Figma a Framer, y una extensión de navegador para llevar secciones de páginas web a Framer. No encontramos una exportación oficial de Framer a Figma, así que la ruta práctica es capturar la página publicada e importarla en Figma.

¿La importación web de Framer produce capas de Figma?

No. La extensión copia elementos de una página en vivo y los pegas en un proyecto de Framer, así que el resultado son capas de Framer.

¿Cuánto cuesta UnHTML?

Según unhtml.pro el 2026-10-13: Free a $0 con un límite de 500 capas por importación, Pro a $39 por editor con pago único, y Studio a $119 para hasta cinco editores.

¿El resultado en Figma coincidirá exactamente con la página de Framer?

No. Las fuentes que no están instaladas se sustituyen, y la geometría compleja puede recurrir al posicionamiento absoluto. Trata la importación como un punto de partida editable, no como un clon.