Por Joan 
Hay una frase que escucho mucho en el mundo del diseño web: «Webflow es el Photoshop de los constructores de webs». La entiendo. Y al mismo tiempo me parece imprecisa.
Photoshop es complejo, sí. Pero lo que produces con él —una imagen— es estático. Webflow es complejo y lo que produces con él es una web completamente funcional, con animaciones, interacciones, CMS, formularios y código limpio detrás. La comparación se queda corta en la dirección equivocada.
Llevo tiempo usando Webflow para proyectos propios y de clientes. En este artículo te cuento exactamente qué incluye su plan gratuito, qué puedes construir con él, cómo funciona la herramienta y cuándo tiene sentido pagar.
No es una guía para principiantes absolutos en diseño web. Webflow asume que entiendes conceptos básicos de diseño —composición, tipografía, espaciado— aunque no sepas programar. Si vienes de usar Canva o Wix, la curva de aprendizaje será mayor de lo esperado. Si tienes algo de experiencia en diseño o en otros constructores, encontrarás que el esfuerzo merece completamente la pena.
Qué es Webflow y qué lo diferencia de todo lo demás
Webflow es un constructor de webs visual que genera código HTML, CSS y JavaScript limpio y semántico en tiempo real mientras diseñas. Eso significa que mientras mueves un elemento en el canvas de Webflow, el código correspondiente se escribe automáticamente por debajo.
Esa característica —código real generado desde diseño visual— es lo que hace a Webflow fundamentalmente diferente de Wix, Squarespace o WordPress con page builders.
Con Wix, Squarespace o Elementor, el código que generan tiene limitaciones estructurales. Están diseñados para ser fáciles, no para producir código óptimo. El resultado es webs que funcionan pero que a menudo son lentas, difíciles de mantener y complicadas de migrar.
Con Webflow, el código que genera es comparable al que escribiría un desarrollador front-end competente. Las webs son rápidas, semánticamente correctas y pueden exportarse como HTML/CSS/JS puro si algún día quieres salir de la plataforma.
Esa diferencia de calidad técnica explica por qué Webflow es la herramienta preferida de diseñadores y agencias que quieren control total sobre el resultado final sin necesitar un desarrollador para implementar sus diseños.
El plan gratuito de Webflow: qué incluye realmente
El plan gratuito de Webflow se llama Starter y sus características en 2026 son las siguientes. Verifica los detalles actuales en webflow.com/pricing ya que Webflow actualiza sus planes periódicamente.
Dos proyectos gratuitos. Puedes tener dos proyectos activos simultáneamente en el plan gratuito. Cada proyecto es una web independiente.
Dominio de Webflow incluido. Tu web estará accesible en una URL del tipo tunombre.webflow.io. Para usar un dominio propio —tudominio.com— necesitas el plan de pago.
Sin CMS en el plan gratuito. El CMS de Webflow —que permite gestionar colecciones de contenido dinámico como artículos de blog, proyectos de portfolio o fichas de producto— no está disponible en el plan Starter. Puedes diseñar páginas estáticas pero no contenido dinámico con base de datos.
Exportación de código. Esta es una función especial del plan gratuito que no ofrecen muchos competidores. Puedes exportar el HTML y CSS de tu proyecto y alojarlo en cualquier servidor externo. Eso significa que puedes usar Webflow para diseñar y luego alojar el resultado en hosting propio —incluso gratuito como GitHub Pages— sin pagar a Webflow por el alojamiento.
Límite de páginas. El plan gratuito limita el número de páginas que puedes crear por proyecto. Suficiente para un portfolio o una landing page, pero insuficiente para webs con mucho contenido.
Alojamiento de Webflow incluido. Las webs publicadas en el dominio webflow.io están alojadas en la infraestructura de Webflow con CDN global, SSL automático y alta disponibilidad. Sin necesidad de configurar ningún servidor.
Lo que puedes construir con el plan gratuito
Con esas características, el plan gratuito de Webflow es perfectamente adecuado para varios tipos de proyectos.
Portfolio personal. Un portfolio de diseñador, fotógrafo, desarrollador o creativo con varias páginas —inicio, proyectos, sobre mí, contacto— cabe perfectamente dentro de los límites del plan gratuito. Y la calidad visual que puedes conseguir con Webflow supera con diferencia lo que es posible en herramientas más simples.
Landing page. Una página de captura de leads, de presentación de un producto o de campaña de marketing. La landing page es el caso de uso ideal para el plan gratuito: una sola página con diseño cuidado y formulario de contacto integrado.
Prototipo para cliente. Antes de comprometerse con el desarrollo completo, muchos diseñadores usan el plan gratuito de Webflow para crear prototipos interactivos de alta fidelidad que los clientes pueden explorar en el navegador. Eso es más efectivo que mostrar maquetas estáticas en Figma.
Proyecto de aprendizaje. Si estás aprendiendo Webflow, los dos proyectos del plan gratuito son más que suficientes para practicar y desarrollar habilidades sin ningún coste.
La interfaz de Webflow: las partes que necesitas conocer
Abrir Webflow por primera vez puede resultar abrumador. Hay mucho en pantalla. La clave para no perderse es entender que la interfaz tiene cinco zonas claramente definidas y que no necesitas dominarlas todas al mismo tiempo.
El canvas
El centro de la pantalla es el canvas. Es donde ves tu diseño y donde interactúas con los elementos visualmente. Puedes hacer clic en cualquier elemento para seleccionarlo, arrastrarlo para moverlo y usar los handles para redimensionarlo.
El canvas muestra tu web exactamente como la verá el visitante, con algunas indicaciones visuales adicionales —bordes punteados, guías de alineación— que solo se ven en el editor.
El panel de capas (izquierda)
En la columna izquierda está el panel de capas y el panel de adición de elementos. El panel de capas muestra la estructura jerárquica de tu página —el árbol HTML— con todos los elementos y su anidamiento. Es tu mapa de la estructura del diseño.
Para añadir elementos nuevos, usa el panel de adición en la misma columna. Puedes arrastrar elementos desde ahí al canvas o hacer clic en ellos para añadirlos dentro del elemento seleccionado.
El panel de estilos (derecha)
En la columna derecha está el panel de estilos. Es donde configuras el aspecto visual de cada elemento: colores, tipografía, tamaño, espaciado, posicionamiento, bordes, sombras, efectos. Es el equivalente visual del CSS.
Cuando seleccionas un elemento en el canvas, el panel de estilos muestra todas las propiedades CSS de ese elemento en formato visual. Modificar cualquier propiedad actualiza el código CSS en tiempo real y el resultado es visible inmediatamente en el canvas.
El panel de configuración (derecha, pestaña alternativa)
Junto al panel de estilos hay un panel de configuración que muestra las propiedades HTML del elemento seleccionado. Aquí configuras el ID, las clases, los atributos HTML, los formularios y otras configuraciones que no son estrictamente de estilo.
La barra superior
La barra superior tiene controles globales: el selector de breakpoint —escritorio, tablet, móvil—, el toggle para vista previa, el botón de publicación y el acceso a la configuración del proyecto.
El selector de breakpoint es especialmente importante. Webflow está diseñado para responsive design desde el principio. Cuando diseñas en el breakpoint de escritorio, estás definiendo el diseño base. Los breakpoints de tablet y móvil heredan ese diseño y puedes ajustar elementos específicos para cada tamaño de pantalla sin afectar a los otros.
Los conceptos clave que debes entender antes de diseñar
Webflow usa la terminología y los conceptos del CSS moderno de forma más explícita que otros constructores. Antes de diseñar, necesitas entender tres conceptos fundamentales.
Clases CSS
En Webflow, cada elemento tiene una clase CSS que define su estilo. Cuando modificas el estilo de un elemento, estás modificando su clase —no el elemento individualmente—. Eso significa que si tienes diez botones con la misma clase, modificar el color de uno modifica el color de todos.
Ese comportamiento —que viene directamente de cómo funciona CSS— confunde a principiantes que esperan que los cambios afecten solo al elemento seleccionado. La solución es crear clases específicas para elementos que necesitan estilos únicos, y clases compartidas para elementos que comparten el mismo estilo.
Webflow tiene un panel de gestión de clases que muestra todas las clases creadas en tu proyecto con sus estilos. Mantener ese panel organizado —clases con nombres descriptivos, sin duplicados innecesarios— es fundamental para proyectos que escalan en complejidad.
El modelo de caja (box model)
Todo en Webflow —y en CSS— es una caja rectangular. Cada elemento tiene cuatro propiedades de espaciado: margin —el espacio exterior que separa el elemento de otros—, border —el borde visible del elemento—, padding —el espacio interior entre el borde y el contenido— y el contenido en sí.
Entender ese modelo de caja y saber manipular margin y padding para controlar el espaciado entre elementos es la habilidad más importante para diseñar en Webflow. La mayoría de problemas de diseño —elementos demasiado juntos, demasiado separados, que no se alinean como esperas— tienen su solución en ajustar margin o padding del elemento correcto.
Flexbox y Grid para layouts
Webflow usa Flexbox y CSS Grid para los layouts —la distribución de elementos en columnas, filas y cuadrículas—. Cuando añades un contenedor en Webflow y lo conviertes en un flex container, puedes controlar cómo se distribuyen sus elementos hijos con controles visuales que mapean directamente a las propiedades de Flexbox.
No necesitas saber CSS para usar Flexbox en Webflow. Pero entender el concepto de contenedor padre e hijos, y cómo el contenedor controla la distribución de sus hijos, te ayudará a tomar mejores decisiones de diseño y a resolver problemas de layout más rápidamente.
El flujo de trabajo que uso para un proyecto nuevo
Para un proyecto nuevo en Webflow —una landing page o un portfolio— sigo siempre el mismo orden. Ese orden evita el caos de diseñar sin estructura y resulta en proyectos más consistentes y más fáciles de mantener.
Paso 1: Definir los estilos globales antes de diseñar
Lo primero que hago en cualquier proyecto nuevo es definir los estilos globales. En Webflow, los estilos globales se definen en el elemento Body o en clases reutilizables que creo desde el inicio.
Los estilos globales que siempre defino primero son la paleta de colores —usando las variables de color de Webflow para que los cambios de color sean globales—, la tipografía base —familia de fuentes, tamaños y pesos para H1, H2, H3, párrafo y texto pequeño— y las variables de espaciado para margins y paddings consistentes.
Definir esos estilos al inicio y usarlos como variables a lo largo del diseño garantiza que el resultado sea visualmente coherente sin tener que recordar qué color exacto o qué tamaño de fuente usé en cada elemento.
Paso 2: Diseñar la estructura antes que el detalle
El error más común en Webflow es empezar por los detalles visuales —colores, tipografía, microinteracciones— antes de tener la estructura de la página definida.
Diseño primero la estructura en gris neutro. Dónde va el héroe, dónde van las secciones, cómo se organiza el contenido. Solo cuando la estructura tiene sentido en términos de jerarquía y flujo narrativo, paso a añadir los estilos visuales.
Ese orden me ahorra muchas horas de rehacer trabajo. Es mucho más fácil cambiar la estructura cuando todavía no tiene estilos elaborados encima.
Paso 3: Hacer el diseño responsive desde el principio
No dejo el diseño responsive para el final. Después de diseñar cada sección en escritorio, voy al breakpoint de tablet y luego al de móvil para verificar que el diseño se adapta correctamente.
Hacer ese ciclo —escritorio → tablet → móvil— sección por sección es más eficiente que diseñar todo en escritorio y luego arreglar todos los problemas de responsive de golpe al final.
Paso 4: Añadir interacciones y animaciones al final
Las interacciones —elementos que aparecen al hacer scroll, hover effects, animaciones de entrada— son la guinda del pastel, no la base. Las añado siempre al final, cuando el diseño estático está completamente definido y funciona bien en todos los breakpoints.
Webflow tiene un sistema de interacciones visual muy potente. Puedes crear animaciones complejas basadas en scroll, en hover, en clic o en la carga de la página sin escribir JavaScript. Pero esas interacciones son la parte más compleja de la herramienta y la más fácil de sobreutilizar. Menos es más cuando se trata de animaciones web.
Las plantillas gratuitas de Webflow: el atajo inteligente
Si la curva de aprendizaje de Webflow te parece demasiado pronunciada para empezar desde cero, Webflow tiene una galería de plantillas —muchas de ellas gratuitas— que puedes clonar y modificar.
Accede a webflow.com/templates y filtra por precio «Free». Hay decenas de plantillas gratuitas de alta calidad —portfolios, landing pages, webs de agencia— que puedes clonar directamente en tu workspace y modificar.
Trabajar sobre una plantilla existente tiene dos ventajas. Primero, aprendes cómo está construida la plantilla —cómo el diseñador estructuró las clases, los layouts, las secciones— y eso te enseña buenas prácticas. Segundo, reduces el tiempo hasta tener algo publicable de días a horas.
La estrategia que recomiendo para quien empieza: clona una plantilla que se parezca al tipo de web que quieres construir, modifica el contenido —textos, imágenes, colores de marca—, y luego empieza a tocar la estructura para entender cómo funciona cada parte.
Cuándo tiene sentido pagar por Webflow
Los planes de pago de Webflow tienen dos dimensiones: los planes de workspace —para el diseñador— y los planes de hosting —para publicar la web con dominio propio—.
El plan de hosting más básico para webs estáticas con dominio propio —sin CMS— cuesta aproximadamente 14 dólares al mes en 2026. Para webs con CMS —blog, portfolio con base de datos, fichas de producto— el plan con CMS cuesta alrededor de 23 dólares al mes.
Tiene sentido pagar cuando el proyecto requiere un dominio propio —prácticamente cualquier proyecto profesional o de negocio—, cuando necesitas el CMS para gestionar contenido dinámico o cuando el proyecto tiene más páginas de las que permite el plan gratuito.
Para proyectos personales de aprendizaje, prototipos para clientes y portfolios que publicas en el dominio webflow.io, el plan gratuito aguanta perfectamente durante el tiempo que necesites.