De Webflow a Figma: comparamos tres flujos de trabajo en 2026

Webflow no tiene exportación nativa a Figma

No existe una forma integrada de enviar un sitio de Webflow a Figma. Todos los flujos capturan la página ya renderizada y la reconstruyen como capas de Figma. A fecha de 2026-10-20, tres tipos de herramienta lo hacen: plugins de importación por URL, una extensión de Chrome y la importación por archivo. Coinciden en lo esencial y se diferencian en las entradas que aceptan, en el auto layout y en el costo.

Esta guía es para diseñadores que heredan un sitio de Webflow sin archivo de diseño y lo necesitan dentro de Figma como capas editables. Ninguna de estas herramientas te da un clon exacto al píxel. Obtienes capas que puedes editar, más unas cuantas cosas que se simplifican o se pierden. Las secciones siguientes detallan cuáles.

La app oficial solo funciona en el otro sentido

La app Figma to Webflow de Webflow sincroniza componentes, variables y estilos de Figma hacia Webflow. Su ficha describe una sola dirección, de Figma a Webflow, y nada en sentido inverso. Es gratuita, y requiere el plugin de Figma y la autorización de tus workspaces o sitios de Webflow.

El camino inverso es más difícil porque Webflow no exporta archivos fuente de diseño. Como lo plantea el equipo de html.to.design en su guía de Webflow, el sitio publicado es la única entrada. Por eso todas las herramientas de abajo trabajan con la página tal como la dibuja un navegador.

Tres formas de llevar una página de Webflow a Figma

Plugins de importación por URL

html.to.design y Vellum funcionan dentro de Figma. Pegas una URL publicada o de staging, eliges un ancho e importas. La guía de html.to.design menciona los viewports de escritorio, tableta y móvil, admite varias URL a la vez y dice que solo puede importar páginas públicas. Para páginas privadas remite a su extensión del navegador. La publicación de Vellum de 2026 describe el mismo flujo: publicar el sitio, copiar la URL, elegir URL como fuente y escoger un ancho.

Es la ruta más rápida para una página de marketing pública, y nunca sales de Figma.

Captura con extensión del navegador

Export to Figma es una extensión de Chrome. Abres la página de Webflow, haces clic en la extensión, eliges la página completa o un solo elemento y pegas en Figma con Cmd+V o Ctrl+V. El proveedor indica que una captura tarda de 2 a 5 segundos. Como lee la página renderizada, las páginas con inicio de sesión funcionan si tienes la sesión abierta en Chrome, y puedes capturar una sola sección en lugar del sitio completo.

Importación por archivo con UnHTML

UnHTML es la herramienta que desarrollamos nosotros, así que lee esta sección con eso en mente. El plugin no acepta una URL. Importa un archivo .html autocontenido, un .webarchive de Safari o un scene.json capturado con la CLI de código abierto o el bookmarklet. Para una URL activa de Webflow primero ejecutas la captura, por ejemplo node capture/cli/capture.js https://example.com, guardando el resultado como scene.json, y luego importas ese archivo. También puedes exportar un HTML autocontenido desde Chrome.

Es un paso más que pegar una URL. A cambio, conservas un archivo de captura que puedes volver a importar o pasar a un compañero. Con la configuración por defecto, la importación no hace ninguna solicitud de red, y la descarga de recursos remotos es opcional.

Qué se conserva y qué se simplifica

Las páginas de los proveedores coinciden en lo principal: el texto sigue siendo editable, las imágenes llegan como rellenos y la estructura se convierte en frames. También coinciden en lo que se pierde. La tabla usa lo que cada proveedor declara en su propia página a fecha de 2026-10-20. "No indicado" significa que la página no dice nada, no que la función no exista.

Interacciones y contenido del CMS

Las Interactions de Webflow son comportamiento en tiempo de ejecución, así que ninguna herramienta las trae. Vellum dice que obtienes "el estado de reposo en el que se asienta la página, no el movimiento". Export to Figma sugiere activar un estado en Chrome antes, como un desplegable abierto, y luego capturar. Una lista de colección del CMS llega como los elementos presentes en el momento de la captura, no como una plantilla repetible que puedas rellenar de nuevo.

En la descripción de Vellum, el video y Lottie se convierten en un solo fotograma fijo, y las imágenes de carga diferida pueden aparecer vacías si la página no las carga primero. Desplázate por la página antes de capturar.

Auto layout

La guía de auto layout de Figma define tres modos de redimensionado: hug contents, fill container y fixed. Las constraints, en general, no se aplican a los hijos de un frame con auto layout. Una importación fiel tiene que elegir uno de esos modos para cada hijo, y ahí es donde las herramientas se distinguen.

UnHTML convierte el CSS de la página en auto layout, por ejemplo flex-direction, gap y justify-content. Cuando un frame no puede igualar la geometría capturada, vuelve por su cuenta al posicionamiento absoluto. El informe de importación enumera cada fuente sustituida, cada frame que volvió a absoluto y cada imagen omitida, para que veas qué cambió. La conversión a auto layout requiere el plan Pro. Mira cómo se traduce CSS Grid a capas para el caso más difícil. Export to Figma dice que su flex y grid se traducen a auto layout cuando es posible, y que las cuadrículas complejas con áreas de plantilla con nombre pueden necesitar limpieza manual. Las páginas de html.to.design y Vellum no indican cómo lo gestionan.

Si tu página de Webflow es una pila de secciones flex sencillas, espera que cualquiera de estas herramientas te dé un buen punto de partida. Una cuadrícula densa es otra cosa: cuenta con limpieza manual en todas. Una captura de pantalla más vectorización de imagen no te daría ni lo uno ni lo otro.

Costo, comprobado el 2026-10-20

Los precios salen de la página de cada proveedor el día de la redacción y pueden cambiar.

• UnHTML: gratis hasta 500 capas por importación. Pro cuesta $39 de pago único por editor, sin límite de capas. Studio cuesta $119 de pago único para hasta cinco editores. La página dice "por página" en un lugar y "por importación" en otro, así que el alcance exacto del límite de 500 capas no está claro.
• Export to Figma: gratis con 10 capturas al mes. Pro cuesta $1 al mes durante una promoción de lanzamiento, con capturas ilimitadas. La página advierte que el precio promocional puede no mantenerse.
• html.to.design y Vellum: no verificamos sus precios actuales, así que no los citamos. La publicación de Vellum muestra un botón "Add to Figma, free" y ninguna lista de precios.

El pago único y el pago mensual sirven para trabajos distintos. Un solo rediseño favorece la compra única. Un flujo constante de capturas favorece el plan mensual más barato el día en que lo leas, así que revisa la página del proveedor otra vez antes de comprar.

Qué flujo encaja con cada trabajo

• Una página pública de Webflow y un vistazo rápido: un plugin por URL o la extensión. Pegar, importar, editar.
• Una página tras un inicio de sesión: la extensión, porque usa tu navegador con la sesión abierta, o la extensión de html.to.design para páginas privadas.
• Una captura que conservas, con un informe de lo que se simplificó: la importación por archivo, aceptando el paso extra de captura.
• Enviar un diseño a Webflow: la app Figma to Webflow de Webflow.

Prueba una página antes de decidir

Ningún flujo de Webflow a Figma es perfecto. Las interacciones y las plantillas del CMS no llegan en ninguno, y las cuadrículas densas necesitan limpieza en todos. Elige una página representativa, impórtala con dos herramientas y compara las capas que de verdad tienes que corregir. Si quieres probar la ruta por archivo, UnHTML está en unhtml.pro.