La respuesta corta
Si solo vas a leer una sección, que sea esta.
- Herramienta: el plugin oficial Figma to Webflow, que se ejecuta en Figma, junto con la app de Webflow, que recibe el diseño dentro del Designer.
- Requisito clave: solo se transfieren las capas con Auto Layout. Un frame sin Auto Layout no se puede sincronizar ni copiar.
- Dos modos: Sync to Webflow crea componentes de Webflow; Copy copia elementos para pegarlos directamente en el lienzo.
- Lo que no hace: no transfiere variantes (responsive, de estado o de estilo) ni conecta el CMS, los formularios o las interacciones. Eso se termina en Webflow.
4 formas de pasar un diseño de Figma a Webflow
El plugin oficial es la opción por defecto, pero no la única. Elige según lo que necesites tener en Webflow después.
| Método | Qué obtienes en Webflow | Ideal para | Ten en cuenta |
|---|---|---|---|
| Plugin: Sync to Webflow | Componentes, variables y estilos que importas desde la app de Webflow. | Sistemas de diseño y secciones que reutilizarás en varias páginas. | Requiere Auto Layout; una colección y un modo de variables por sincronización. |
| Plugin: Copy (copiar y pegar) | Elementos y clases pegados en el lienzo del Designer. | Secciones puntuales y arranques rápidos de maquetación. | Si una clase ya existe, el tipo de pegado decide si se duplica, se reutiliza o se actualiza. |
| Webflow MCP + agente de IA | Tokens, clases, componentes y assets creados por un agente con los servidores MCP de Figma y Webflow. | Primeros borradores rápidos de una página o plantilla. | Es un borrador: en el ejemplo de Webflow tardó algo más de diez minutos y aun así necesitó QA. |
| Desarrollo manual | Un sitio construido sobre el diseño, con clases acordadas, CMS e interacciones. | Sitios de producción y archivos sin Auto Layout. | Cuesta más que hacerlo tú; consulta el servicio de Figma a Webflow. |
Cómo preparar el archivo de Figma antes de exportar a Webflow
La calidad de la transferencia depende sobre todo del archivo de origen.
Auto Layout en todo lo que se transfiere
El plugin solo transfiere capas con Auto Layout. Decide qué se estira (fill), qué se ajusta al contenido (hug) y qué es fijo.
Nombres de capa que sirvan como clases
Cada nombre de capa se convierte en una clase de Webflow. Usa nombres claros y coherentes, como hero-title o card-image, en lugar de “Frame 427”. Nombres como button, paragraph o heading además definen la etiqueta HTML.
Fuentes antes que nada
Sube las fuentes personalizadas al sitio de Webflow antes de transferir; si no, el texto llega con otra tipografía.
Componentes y contenido, por separado
Agrupa los patrones repetidos como componentes. El contenido que se publica a menudo (blog, casos de estudio) será una colección del CMS en Webflow.
Variables preparadas
Define colores, tamaños y tipografía como variables. El plugin sincroniza una colección y un modo cada vez, en unidades px, em o rem.
Cómo usar el plugin Figma to Webflow paso a paso
Los nombres de los botones aparecen en inglés porque así están en la interfaz del plugin. El flujo sigue la documentación oficial del plugin y la app de Webflow.
1. Instala el plugin y elige una sección
Instala Figma to Webflow desde Figma Community y abre el archivo en Chrome o en la app de escritorio de Figma. Empieza por una sección con contenido real, no por el sitio entero.
2. Prepara el sitio de destino
Elige el sitio de Webflow, sube las fuentes y acuerda nombres de clases y variables para que lo nuevo encaje con lo existente.
3. Conecta tu cuenta de Webflow
Autoriza el sitio de destino desde el plugin. Las imágenes y los iconos vectoriales se añadirán al panel Assets de ese sitio.
4. Sincroniza o copia
En la pestaña Layers selecciona un frame o componente y elige Continue → Sync to Webflow. En la app de Webflow, abre la sincronización más reciente, marca los elementos y pulsa Import selected items. Para copiar y pegar, elige Continue → Copy y pega en el lienzo.
5. Revisa componentes y clases
Sync crea componentes; Copy crea elementos. Revisa los conflictos con clases existentes antes de aceptar cambios y comprueba las etiquetas de encabezado generadas.
6. Prueba el layout con contenido real
Revisa anchos intermedios, no solo los del diseño. Prueba títulos más largos y más tarjetas, y corrige desbordamientos y textos cortados.
7. Conecta contenido y comportamiento
Vincula las colecciones del CMS, configura los formularios con sus estados de éxito y error y añade las interacciones que pida el proyecto. Después pasa la checklist de lanzamiento.
Límites del plugin de Figma a Webflow
Revisados con el artículo del Centro de ayuda de Webflow el 21 de octubre de 2026.
- Navegador: Safari no es compatible; usa Chrome o la app de escritorio de Figma.
- Auto Layout: solo las capas con Auto Layout se pueden sincronizar o copiar.
- Variantes: no se admiten variantes responsive, de estado ni de estilo; los estados se recrean en Webflow.
- Variables: una colección y un modo por sincronización, en px, em o rem, con un tamaño de fuente base definido en los ajustes del plugin.
- Clases y etiquetas: cada nombre de capa se convierte en clase; button, paragraph o heading definen la etiqueta HTML, que también puedes elegir manualmente.
- Páginas largas: sincroniza unas pocas secciones cada vez en lugar de una página entera.
- Apilado responsive: puedes elegir cuándo se apila una capa: Tablet (991–767 px), Mobile landscape (767–478 px) o Mobile portrait (478–0 px).
- Capas estrechas: el apilado no se puede configurar en capas de menos de 250 px de ancho ni en capas que ya están apiladas en vertical.
El plugin de Figma a Webflow no funciona: causas y soluciones
Antes de rehacer una sección entera, revisa el ajuste concreto que falla.
| Síntoma | Causa probable | Solución |
|---|---|---|
| No se puede transferir nada | Navegador o falta de Auto Layout | Usa Chrome o la app de escritorio de Figma y aplica Auto Layout a las capas. |
| Faltan imágenes o fuentes | Sitio de destino o fuentes sin subir | Comprueba que el sitio seleccionado es el correcto y sube las fuentes antes de sincronizar. |
| El componente llegó como elementos sueltos | Se usó Copy en lugar de Sync | Usa Sync to Webflow cuando necesites un componente reutilizable. |
| Estilos duplicados o modificados | Conflicto con una clase existente | El pegado normal crea una clase nueva; los comandos de pegado alternativos conservan o actualizan la existente. Elige a propósito. |
| El control responsive está desactivado | Tamaño u orientación de la capa | No está disponible por debajo de 250 px ni en capas ya apiladas en vertical. |
| Nivel de encabezado incorrecto | Nombre de capa y etiqueta HTML | Revisa las etiquetas generadas y asigna H1, H2 o H3 manualmente. |
Checklist de QA responsive y lanzamiento
Una transferencia correcta es el inicio de la validación, no el final.
- Detalle visual: tipografía, colores, espaciados e imágenes comparados con el diseño aprobado.
- Estructura: clases, componentes y variables revisados antes de duplicar secciones.
- Responsive: anchos estrechos e intermedios, textos largos, navegación e imágenes en cada breakpoint.
- Contenido: colecciones del CMS, enlaces, interacciones e integraciones conectadas.
- Formularios: los envíos llegan al destino correcto y los estados de éxito y error funcionan.
- SEO: títulos, descripciones, canonical, orden de encabezados y textos alternativos de imágenes.
- URLs publicadas: redirecciones 301, sitemap, indexación y enlaces internos en el dominio real.
- Entrega: foco de teclado, contraste y quién edita el sitio después.
Cuándo contratar a un desarrollador Webflow y cuánto cuesta
El plugin basta para secciones sueltas y sistemas de diseño bien preparados. Un desarrollador compensa cuando el sitio va a producción y tiene que posicionar, crecer y ser editable.
Hazlo tú con el plugin si…
el archivo usa Auto Layout de forma coherente, son pocas páginas, no necesitas un CMS complejo y tienes tiempo para revisar cada breakpoint.
Contrata a un desarrollador si…
el diseño no tiene Auto Layout, depende de variantes e interacciones o necesitas CMS, migración o SEO técnico.
Cuánto cuesta el desarrollo
En marektomas.com los proyectos de Figma a Webflow empiezan en 2.400 USD; el precio final depende del número de páginas, el CMS y las interacciones. Desglose por alcance: coste de Figma a Webflow (en inglés).
Cuánto cuesta Webflow después
Según webflow.com/pricing (consultado el 4 de noviembre de 2026): Starter es gratis con dominio webflow.io y 2 páginas estáticas; Basic cuesta 15 USD al mes con facturación anual, sin CMS; Premium, 25 USD al mes con facturación anual e incluye el CMS.
Guías relacionadas
Estas guías están en inglés.
Alternativas al plugin
Conversores de Figma a Webflow: herramientas, planes gratuitos y límites comparados.
De Webflow a Figma
Cómo llevar un sitio publicado de vuelta a Figma: guía de Webflow a Figma.
Figma vs Webflow
Qué herramienta debe alojar tu sitio, incluida Figma Sites: comparativa Figma vs Webflow.
Desarrollo a partir de tu diseño
Si prefieres delegar la construcción: servicio de Figma a Webflow.
Preguntas frecuentes sobre pasar de Figma a Webflow
¿Cómo se pasa un diseño de Figma a Webflow?
Aplica Auto Layout a los frames, nombra bien las capas, sube las fuentes a Webflow y usa el plugin oficial Figma to Webflow: Sync to Webflow para crear componentes o Copy para pegar elementos. Después revisa responsive, CMS y formularios en Webflow.
¿Existe un plugin oficial de Figma a Webflow?
Sí. Se llama Figma to Webflow, lo publica Webflow en Figma Community y trabaja junto con la app de Webflow dentro del Designer.
¿Por qué no funciona el plugin de Figma a Webflow?
Las causas más habituales son usar Safari (no es compatible; usa Chrome o la app de escritorio de Figma), capas sin Auto Layout, fuentes personalizadas que no se subieron antes o un sitio de destino equivocado. Las variantes tampoco se transfieren.
¿El plugin mantiene el diseño responsive?
Solo en parte. No admite variantes responsive, pero permite elegir en qué breakpoint se apila una capa: Tablet, Mobile landscape o Mobile portrait. El resto del comportamiento responsive se revisa y ajusta en Webflow.
¿Se puede pasar de Figma a Webflow con IA?
Sí. Webflow publicó un ejemplo en el que un agente de IA, con los servidores MCP de Figma y Webflow, creó tokens, clases, componentes y assets a partir de un diseño. Trátalo como un borrador que hay que revisar.
¿Cuánto cuesta pasar un diseño de Figma a Webflow?
Si lo haces tú, pagas el plan de Webflow: Starter es gratis con dominio webflow.io, Basic cuesta 15 USD al mes y Premium 25 USD al mes, ambos con facturación anual. Si contratas el desarrollo en marektomas.com, los proyectos empiezan en 2.400 USD.
¿Tienes el diseño en Figma y quieres pasarlo a Webflow?
Envíame el enlace de Figma y las páginas que necesitas; te respondo con un presupuesto cerrado. Trabajo en inglés y en checo, así que escríbeme en inglés.
