Cómo crear sitios de marketing SaaS en Webflow usando un sistema de diseño de Figma

Un sitio de marketing SaaS suele empezar en Figma, donde los colores, la escala tipográfica, los estilos de botones y el espaciado ya están definidos. Lo difícil es llevar esas decisiones a un sitio real sin tener que reconstruirlas a mano y evitar que ambas versiones terminen siendo diferentes.

Puedes saltarte ese paso. El plugin oficial de Figma a Webflow sincroniza tus variables, componentes y estilos de Figma directamente en un proyecto de Webflow. Así, el sistema de diseño que ya mantienes se convierte en la base del sitio real, en lugar de ser solo una captura de pantalla de referencia.

Esta guía explora cómo preparar el archivo de Figma, sincronizar tokens y componentes, ensamblar las páginas, configurar un blog gestionado por CMS y realizar el lanzamiento. El objetivo es lograr un sitio que mantenga la coherencia de marca porque esta reside en las variables, no en estilos aislados.

Si primero quieres conocer el contexto general, Webflow tiene una excelente introducción sobre cómo convertir tus diseños estáticos de Figmaen un sitio interactivo de Webflow.

¿Qué necesitas para crear un sitio de marketing SaaS a partir de un sistema de diseño de Figma?

Necesitas un archivo de Figma organizado como sistema de diseño, un proyecto de Webflow con un plan que permita publicar y el plugin de Figma a Webflow para conectarlos. Ambas herramientas ofrecen versiones gratuitas para empezar, y solo necesitarás un plan de sitio de pago cuando llegue el momento de publicar en un dominio personalizado.

Antes de instalar nada, es útil saber exactamente qué espera cada lado de la conexión, ya que la sincronización solo reproduce lo que tu archivo de Figma ya está estructurado para entregar.

Requisitos del archivo de Figma

Tu archivo de Figma debe ser un sistema, no solo un conjunto de pantallas. En la práctica, esto significa cuatro cosas:

• Cada capa que quieras sincronizar debe usar auto layout, ya que el plugin solo copia marcos con auto layout y los convierte a la estructura flexbox de Webflow.
• Tus colores, tipografía y espaciado deben estar en variables organizadas en colecciones, para que se asignen correctamente a las variables de Webflow.
• Tus componentes deben usar nombres separados por barras inclinadas como Button/Primary/Large, lo que mantiene la legibilidad de los componentes resultantes en Webflow.
• Por último, tus estilos de texto y efectos deben estar definidos a nivel de archivo o de equipo para que puedan sincronizarse como clases de Webflow.

Si aún estás decidiendo cómo estructurar todo esto, nuestra guía sobre qué es un sistema de diseño y cómo crear uno es el punto de partida ideal.

Requisitos del espacio de trabajo de Webflow

En Webflow, necesitas un proyecto donde puedas usar variables, componentes y fuentes personalizadas, además de un plan que te permita publicar cuando estés listo. Las variables y los componentes son funciones básicas del Designer, por lo que puedes trabajar con ellos en cualquier plan, incluido el espacio de trabajo Starter gratuito.

Publicar en un dominio personalizado requiere un plan de sitio de pago, y compartir un mismo sistema de diseño en varios sitios requiere un plan de Workspace de pago a través de Bibliotecas compartidas.

Debes subir las fuentes personalizadas a tu sitio de Webflow antes de sincronizar, ya que el plugin no las transfiere y cualquier tipo de letra que no encuentre será sustituido por una fuente del sistema. Sube primero las fuentes de tu marca y la escala tipográfica se mantendrá intacta.

6 pasos para crear un sitio de marketing SaaS a partir de tu sistema de diseño en Figma

El flujo de trabajo es unidireccional: prepara el archivo de Figma para la sincronización, conecta el plugin, sincroniza primero los tokens y después los componentes, ensambla las páginas con esos componentes, añade un CMS para las secciones que cambian con frecuencia y, finalmente, publica.

Es importante sincronizar los tokens antes que los componentes, porque así, cuando los componentes lleguen, podrán hacer referencia a variables existentes en lugar de a valores definidos manualmente.

Sigo este orden en todos mis proyectos. Saltarse pasos y empezar a construir páginas antes de tener las variables listas es la razón más común por la que un sitio termina lleno de colores sueltos por todas partes. Vamos paso a paso.

1. Prepara tu sistema de diseño en Figma para la sincronización

Empieza en Figma, no en Webflow. Selecciona todos los marcos que quieras transferir y confirma que usan auto layout, ya que todo lo que no lo tenga no se sincronizará. Agrupa tus variables en colecciones que reflejen cómo entiendes la marca: una para color, otra para tipografía y otra para espaciado.

Renombra los componentes usando la convención de barras, para que Button/Primary y Button/Secondary aparezcan juntos, y asegúrate de que tus estilos de texto y efectos sean estilos reales y no anulaciones locales independientes.

Esta preparación es la parte que la gente suele hacer a toda prisa, y es la que determina qué tan limpio quedará el resultado en Webflow. Un archivo ordenado se sincroniza en minutos; un archivo con pantallas sueltas se traduce en horas de limpieza después.

Resultado esperado: Un archivo de Figma donde cada capa sincronizable tiene auto layout y cada decisión de diseño es una variable o un estilo.

2. Instala el plugin Figma to Webflow y conecta tu sitio

Instala el plugin Figma to Webflow desde la comunidad de Figma y añade la aplicación complementaria de Webflow a tu espacio de trabajo. Abre el plugin dentro de tu archivo de Figma, haz clic en Ejecutar, luego en Conectar y autoriza el sitio de Webflow al que quieres sincronizar.

Como el plugin no es compatible con Safari actualmente, ejecútalo en Chrome o en la aplicación de escritorio de Figma, o el paso de conexión se quedará bloqueado.

Una vez conectado, elige el sitio de Webflow de destino con cuidado: enviar los recursos al proyecto equivocado es un error común y molesto, ya que dispersa imágenes por un sitio que no querías tocar.

Por experiencia, también recomiendo establecer un prefijo para los nombres de clase en la configuración del plugin en este punto, para evitar que las clases entrantes entren en conflicto con lo que ya hayas construido.

Resultado esperado: El plugin muestra tu sitio de Webflow de destino conectado, con las pestañas de Capas, Variables y Estilos listas.

3. Sincroniza tus tokens de diseño a través de la pestaña Variables

Abre la pestaña Variables y sincroniza tus tokens antes que nada. Webflow admite cinco tipos de variables que se corresponden con las de Figma: Color, Tamaño, Familia tipográfica, Número y Porcentaje.

Selecciona las colecciones que quieres transferir y, para las variables de tamaño, elige la unidad en la que quieres que Webflow las escriba, ya sea px, em o rem. El plugin hace coincidir los nombres de las variables y actualiza las existentes, por lo que volver a sincronizar refresca sus valores en lugar de crear duplicados.

Si tu sistema utiliza modos claro y oscuro, el plugin puede transferir varias colecciones y modos en una sola sincronización, y siempre puedes añadir o ajustar los modos manualmente en el panel de Variables de Webflow después.

Vale la pena dedicar tiempo a este paso, ya que todo lo que viene después depende de estos tokens. El artículo de Webflow sobre diseño con tokens y variables es un recurso muy útil para esto.

Resultado esperado: Tus tokens de color, tipografía y espaciado de Figma aparecen como variables nativas en el panel de Variables de Webflow con los mismos valores.

4. Sincroniza componentes y estilos, luego ensambla tus páginas

Una vez que tengas los tokens, pasa a las pestañas de Capas y Estilos. La pestaña de Capas convierte tus marcos de auto layout y componentes en elementos flexbox de Webflow, transformando los nombres de las capas en nombres de clases CSS y asignando etiquetas HTML a partir de ellos. Por ejemplo, una capa llamada heading se convierte en un encabezado y una llamada button se convierte en un enlace.

Sincroniza unos pocos componentes o secciones a la vez en lugar de toda la página de golpe, ya que intentar subir un sitio completo de una sola vez suele provocar tiempos de espera agotados.

La pestaña de Estilos traslada tus estilos de texto y efectos como clases de Webflow. Una vez que tus componentes e imágenes estén en el panel de Activos, ensambla tus páginas de marketing como lo harías en cualquier sitio de Webflow, solo que ahora arrastrarás componentes que ya llevan tu marca.

Aquí es donde una página de aterrizaje SaaS que convierte se arma rápidamente, y echar un vistazo a ejemplos de diseño de sitios web SaaS puede ayudarte a decidir con qué secciones empezar.

Resultado esperado: Un conjunto de páginas creadas a partir de tus componentes sincronizados, con estilos basados en tus variables sincronizadas y sin valores únicos o aislados.

5. Añade un blog y una sección de recursos gestionados por el CMS

Los sitios de marketing no son estáticos, y las partes que más cambian —el blog, los casos de éxito, el registro de cambios y las ofertas de empleo— deben estar en el CMS en lugar de en páginas creadas manualmente. Crea una Colección CMS para cada uno, define los campos una vez y diseña una plantilla única en la que se integre cada entrada.

Esto permite que un compañero sin conocimientos técnicos publique una nueva entrada sin tener que abrir el Diseñador ni tocar el diseño. Como la plantilla utiliza los mismos componentes y variables que sincronizaste, cada nueva publicación mantendrá la identidad de tu marca automáticamente.

Cuando estés listo para automatizar la publicación o importar contenido desde otro sistema, la API del CMS de Webflow te ofrece una vía programática para hacerlo.

Resultado esperado: Un blog y cualquier tipo de contenido recurrente funcionando con Colecciones CMS, donde cada nueva entrada se visualiza a través de una plantilla con tu marca.

6. Revisa la capacidad de respuesta, ajusta el SEO y lanza

Antes de publicar, recorre el sitio a través de los puntos de interrupción (breakpoints) de Webflow. Los valores predeterminados van desde tu base de escritorio hasta Tablet (991px o menos), Móvil horizontal (767px o menos) y Móvil vertical (479px o menos), con puntos de interrupción adicionales de 1280px, 1440px y 1920px disponibles si tu diseño está pensado para pantallas grandes.

Como el Auto Layout se convierte a Flexbox, la mayor parte del comportamiento responsivo se mantiene, pero las secciones principales (hero) y las cuadrículas de características de varias columnas suelen necesitar un repaso. Luego, configura los títulos de página, las meta descripciones y las imágenes Open Graph, y deja que la auditoría SEO y AEO impulsada por IA de Webflow detecte si falta texto alternativo o metadatos en el sitio.

La guía de Webflow sobre ejemplos de sitios web responsivos y consejos de diseño es una buena forma de verificar todo en esta etapa. Cuando se vea bien en todos los puntos de interrupción, publica.

Resultado esperado: Un sitio que se ve perfecto desde 320px hasta pantallas panorámicas, que supera una auditoría SEO básica y que está activo en tu dominio.

Qué rompe la sincronización de Figma a Webflow y cómo solucionarlo

La mayoría de las sincronizaciones fallidas se deben a unas pocas causas predecibles: una capa sin auto layout, una fuente que nunca se subió, una variante de Figma que se divide en componentes separados, un marco demasiado estrecho para aceptar configuraciones responsivas o el uso del plugin en un navegador no compatible. Cada error ocurre de forma silenciosa, por lo que el síntoma rara vez indica la causa real.

Cada uno tiene su truco y, una vez que lo conoces, se soluciona en un momento; aquí te explico cómo reconocerlos.

Las capas no se sincronizan en absoluto

A la capa, o a un marco dentro de ella, le falta el auto layout. El plugin solo copia marcos con auto layout, por lo que un grupo posicionado manualmente o un elemento con posición absoluta simplemente no se transfiere, y lo hace sin mostrar ningún mensaje de error.

Vuelve a Figma, selecciona el marco y aplica auto layout; luego, confirma que todos los marcos anidados que te interesan también lo tengan. Por esto es tan importante la preparación: un archivo con auto layout completo se sincroniza a la perfección, mientras que uno con algunos marcos sueltos parece que solo funcionó a medias.

Corrige la estructura en Figma y vuelve a sincronizar; las capas que faltaban aparecerán donde esperabas.

Las fuentes vuelven a los valores predeterminados del sistema

Tu tipografía de marca no se subió a Webflow antes de la sincronización, así que Webflow no tuvo con qué compararla y la sustituyó por una fuente del sistema. El plugin no transfiere archivos de fuentes, solo los estilos que hacen referencia a ellos.

Primero sube tus fuentes personalizadas al sitio de Webflow, en la configuración de fuentes del sitio, y luego ejecuta la sincronización de nuevo. Una vez que la fuente existe en Webflow, los estilos de texto que apuntan a ella se resuelven correctamente y tu escala tipográfica se renderiza tal como la diseñaste, en lugar de usar una fuente de respaldo.

Según mi experiencia, esta es la sorpresa más común en la primera sincronización, en parte porque la fuente de respaldo suele ser lo suficientemente parecida como para no notarlo hasta que la comparas lado a lado con el archivo de Figma. Es una solución de dos minutos una vez que sabes que debes subir las fuentes de antemano, así que haz que subir las fuentes sea lo primero que hagas en un proyecto nuevo de Webflow.

Las variantes de un componente se convierten en elementos separados

Las variantes de Figma no se convierten automáticamente. Cada marco de variante en Figma crea un componente o elemento independiente en Webflow, por lo que un botón con cinco estados llega como cinco piezas desconectadas en lugar de un solo componente con opciones.

La solución es reconstruir la relación en Webflow: crea un componente base y luego usa las variantes de estilo y las propiedades de componente de Webflow para expresar los estados y las diferencias de contenido. El enfoque de Webflow para los sistemas de diseño componibles con espacios para componentes es el patrón que debes seguir aquí.

Es un trabajo manual, pero solo lo haces una vez por componente, y el resultado suele ser más limpio que el original de Figma, ya que el modelo de componentes de Webflow gestiona los estados y los espacios de contenido de forma más directa que los marcos de variantes apilados.

No puedes configurar la capacidad de respuesta en un elemento

Si la capa tiene menos de 250 px de ancho o ya está apilada verticalmente, el plugin no te permitirá configurar el comportamiento de respuesta en ninguno de los casos. El control de respuesta aparece en gris sin ningún mensaje que explique por qué, lo que lleva a la gente a buscar un error que no existe.

Ensancha el marco en Figma a al menos 250 px antes de sincronizar, o planea configurar el comportamiento de respuesta de ese elemento directamente en Webflow después de la sincronización usando el panel de Estilo en cada punto de interrupción.

Esto afecta principalmente a elementos pequeños de la interfaz como insignias, etiquetas y botones de iconos, por lo que rara vez bloquea todo un diseño. Sin embargo, vale la pena saberlo de antemano, porque el ajuste en gris parece un fallo cuando, en realidad, es el plugin rechazando un elemento demasiado estrecho para apilarse de forma significativa.

El plugin no carga ni conecta

Lo estás ejecutando en Safari, que no es compatible. Cambia a Chrome o a la aplicación de escritorio de Figma y el plugin cargará normalmente; esto es lo primero que debes comprobar cuando el panel aparezca en blanco o no termine de cargar.

Si carga pero la conexión con Webflow falla a mitad de camino, lo más probable es que tu token de autorización haya caducado, algo que sucede tras un periodo de inactividad. Vuelve a conectar tu cuenta de Webflow en la configuración del plugin, autoriza de nuevo el sitio de destino y la sincronización se reanudará.

Estos dos motivos explican casi todos los informes de "el plugin no funciona" que recibo, y ninguno tiene que ver con tu diseño o tu estructura en Figma. Descartarlos primero te ahorrará el trabajo de desarmar un archivo que siempre estuvo bien.

Lanza tu sitio de marketing con un diseño renovado

Cuando estés listo para profundizar en cualquier aspecto, desde los matices del diseño responsivo hasta el rendimiento en búsquedas, nuestra guía de SEO para SaaS es una excelente lectura complementaria, y la página de integración de Figma a Webflow cubre los detalles de la configuración.

Para cualquier cosa que exceda lo que el plugin maneja de forma nativa, como los flujos de trabajo de tokens programáticos, la documentación para desarrolladores de Webflow contiene las referencias de la API.