No-code

Webflow vs Framer: La mejor herramienta para construir tu web sin código en 2024

En este artículo vamos a comparar Webflow y Framer, para que tengas toda la información necesaria para saber escoger la próxima herramienta con la que construirás tus webs sin una sola línea de código.

En este artículo vamos a comparar Webflow y Framer, para que tengas toda la información necesaria para saber escoger la próxima herramienta con la que construirás tus webs sin una sola línea de código.

Veremos cuál es más sencilla de aprender y usar, cuál te permite un mayor grado de personalización, cuál es más sencilla de mantener y por supuesto, sus precios.

Antes de comenzar con el post, si deseas aprender Webflow o Framer, puedes hacerlo con nuestros cursos gratuitos. Sin embargo, antes de iniciar el curso, descubre con este post cuál herramienta es la mejor para tu caso de uso.

Webflow: Desarrolla código limpio de manera visual

Si hay una herramienta capaz de plantarle cara a Wordpress en el desarrollo de webs, esa es Webflow. Nació en 2013 como un constructor de Landing pages que crea código HTML y CSS de una manera visual y ha escalado hasta ser una empresa con una valoración de 2.1 billones de dólares y aproximadamente 600 empleados.

Han conseguido dar servicios a empresas como Rakuten, la NASA, Dell, así como miles de compañías que han llevado su página web de marketing a esta tecnología. Gracias a su potente sistema de construcción visual, puedes desarrollar páginas web con un diseño completamente personalizado, sin tener que tocar una sola línea de código, sin sacrificar el potencial de diseño a costa de las limitaciones de la herramienta.

Además, cuenta con un robusto CMS que permite crear contenido dinámico y fácil de gestionar, tanto para secciones de equipo y Blog como para productos más complejos.

La principal característica de Webflow es que genera código limpio, si se siguen las buenas prácticas de desarrollo, consiguiendo además gracias a sus servidores una página web realmente rápida, sin tener que preocuparse de la seguridad ni actualizaciones de la página.

Su futuro apunta hacia el poder desarrollar páginas más complejas, como membership sites o automatizar procesos directamente con la inclusión de las membresías y la lógica a lo largo de 2024.

Sin embargo no todo es positivo, ya que existen por el momento ciertas limitaciones que tienen que ser solucionadas mediante librerías de código externas o directamente con código embebido dentro de tu propia web.

Framer: La mejor herramienta para crear landing pages

Una herramienta que irrumpió hace un año, tras un pivote de ser una herramienta de prototipado compleja a una herramienta capaz de construir páginas web completamente funcionales.

Siguen un enfoque mucho más orientado a las personas que vienen del diseño, con una interfaz y modo de funcionamiento que recuerda mucho a softwares de diseño como Figma, aplanando la curva de aprendizaje para un nuevo usuario.

Esto hace que sea extremadamente sencillo construir el diseño que tienes en mente - con posibilidades ilimitadas - o trasladar el diseño que ya tengas en Figma a una web completamente funcional.

Su sistema de responsive hace que sea muy flexible y sencillo adaptar los diseños para que se comporten bien en todos los tamaños de pantalla.

Además, sus potentes componentes te permiten crear bloques reusables, como una barra de navegación o un footer, pero también construir carrouseles o sliders realmente complejos de manera increíblemente sencilla.

Los diseñadores se encontrarán como en casa a la hora de hacer animaciones, con un control increíblemente fino sobre estas animaciones de una manera muy natural.

Su bajo precio, combinado a la colaboración en tiempo real y la cantidad de plantillas y componentes diseñados por la comunidad hacen que sea una candidata perfecta para la gente que busca una web sencilla, pero con un diseño personalizado.

Su juventud hace que queden aún flecos que mejorar, como las integraciones. Sin embargo prometen ir desarrollando e ir mejorando el producto a lo largo del año para aumentar sus funcionalidades.

¿Qué herramienta es mejor para construir una web? Webflow o Framer

Pasemos ahora a comparar una herramienta con otra. Para lo cual veremos 7 grandes categorías:

  • Facilidad de uso
  • Posibilidades de diseño
  • Escalabilidad
  • Precio
  • Calidad del código generado
  • Integraciones
  • Comunidad

¡Vamos a ello!

Facilidad de uso para construir una web: Framer ✅ - ❌ Webflow

Si hablamos de facilidad, no hay discusión.

Framer es mucho más sencillo de aprender para una persona que está empezando en el mundo del desarrollo web.

Al ser muy similar a programas de diseño, es mucho más intuitivo aprender las particularidades de Framer, además de tener la posibilidad de interactuar con el diseño de manera tangible, moviendo elementos con el propio ratón y viendo el resultado en tiempo real.

Esto no significa que no tenga una curva de aprendizaje, ya que debes dominar los Stacks, Grids, Frames, Paddings… si quieres hacer un diseño responsive.

Sin embargo, la gran cantidad de componentes por defecto de Framer, la posibilidad de copiar/pegar de Figma así como las plantillas disponibles hacen de una herramienta idónea para principiantes.

Webflow es mucho más potente y puede llegar a ser muy rápido desarrollar una página, pero el sistema de clases es necesario dominarlo para poder desarrollar páginas que escalen y que un ligero cambio no rompa toda la web.

Por lo que aquí la ganadora es sin duda Framer.

Posibilidades de diseño: Framer 🤝 Webflow

En esta categoría tenemos que declarar un empate.

Aunque Webflow podría llegar a tener una ligera ventaja en este campo al permitir de manera más sencilla hacer alguna animación más compleja, es prácticamente lo mismo maquetar en Webflow que en Framer.

Podrás crear prácticamente todos los diseños que tengas en mente. Por lo que a la hora de elegir, dependerá del proyecto que tengas en mente, pero no deberías tener problema en ninguna de las dos herramientas como norma general para conseguir el diseño que tienes en mente.

Escalabilidad: Framer ❌ - ✅ Webflow

Aquí la victoria se la lleva Webflow.

Sus sistemas están probados para soportar grandes cantidades de tráfico sin tener problemas, además de tener un historial de cumplir con su SLA, ofreciendo una disponibilidad sin caídas digna de admirar.

A la hora de construir webs que crezcan en número de elementos en el CMS o páginas, sigue manteniéndose ágil y funcional.

Sin embargo, donde no tienen ventaja es en la colaboración entre miembros de equipo. Cosa que aún a día de hoy no es posible hacer, pudiendo tener únicamente un editor de diseño a la vez modificando la web.

Suele no ser un problema demasiado grave puesto que cuentan con el rol de Editor que permite que gente sin conocimientos de cómo funciona la web puedan añadir contenido o modificar copys sin temor a romper la web.

Precio: Framer ✅ - ❌ Webflow

Aquí sin duda la gran ganadora es Framer.

Su pricing es más que ajustado para las posibilidades que ofrecen, destacando el plan mini que permite que cualquier persona pueda empezar a construir su web desde 5€ al mes.

Webflow recientemente acaba de subir sus precios, para aumentar con todas las funcionalidades que han ido añadiendo con el paso del tiempo, pero empieza a ser difícil justificar sus precios a o ser que sean sitios relevantes para el cliente.

Cabe destacar que Webflow no tiene límite de visitantes al mes, cosa que Framer si, además que incluye submissions de forms de manera nativa, por lo que el plan CMS y el PRO de Framer realmente son muy similares en precio.

Sin embargo, el plan Starter o el Basic se quedan muy cortos para prácticamente todo el mundo.

Calidad del código generado: Framer ❌ - ✅ Webflow

En este caso la respuesta es clara: Webflow genera código de mayor calidad.

El por qué no es tanto en la calidad del código generado en si si no en la elección de la tecnología que desarrollan.

Framer exporta código en React, que luego tiene que ser traducido a HTML y CSS, lo que genera un código que no está pensado para que lo lean humanos. Lo cual aunque puede ser igual de útil para posicionar en Google, a la hora de integrarlo con código es algo más complejo.

Si esto no te preocupa, adelante, Framer genera código de muy buena calidad, solo que no es legible como el de Webflow.

Integraciones: Framer ❌ - 😅 Webflow

En este caso la victoria no es tan clara, pero Webflow tiene ventaja.

Y es que Framer es aún muy reciente, por lo que sus integraciones por el momento son bastante limitadas.

Sin embargo Webflow de manera nativa también está muy limitado a la hora de lo que puede hacer. Es solo que con el tiempo, la gente como F’insweet o Jetboost o Memberstack han ido desarrollando soluciones que mejoran las posibilidades nativas de la herramienta, llevándole años de ventaja a Framer.

Soluciones como Polyflow que resuelven el problema de la traducción a multiidioma son necesarias porque no lo incluye de manera nativa Webflow, incrementando los costes de la herramienta.

En el futuro, veo a ambas en el mismo nivel de integraciones, ya que con código, todo se puede hacer.

Comunidad: Framer ❌ - ✅ Webflow

En este caso es un empate ligeramente sesgado hacia Webflow.

Aunque Webflow tiene más tiempo (y más usuarios), Framer está haciendo un gran esfuerzo por generar comunidad.

Por el momento lleva la ventaja Webflow con sus eventos (Webflow Conf), su foro de discusión, muy útil para solucionar problemas específicos de la herramienta o todo el ecosistema de gente que desarrolla para Webflow, como los Webflow Experts o F’insweet.

Destaca especialmente su comunidad de gente que hace proyectos clonables, para que puedas incorporarlos a tu proyecto de manera gratuira.

Ambas comunidades son muy activas y es muy probable que encuentres la solución a tus problemas en ambas, aunque por el momento lleve una ligera ventaja Webflow por cuestión de tiempo en mercado.

Webflow vs Framer: ¿Qué herramienta escojo?

Por resumir y sabiendo que es necesario escoger una herramienta entre ambas en la mayoría de los casos, os dejamos una pequeña guía que te servirá para saber qué herramienta debo escoger para cada caso:

Construye Landing pages en Framer

Si tu objetivo es simplemente construir una web para captar leads, mostrar tu producto al mundo o vender productos y servicios, Framer es mucho más barata, a la vez que te será mucho más rápido de crear o modificar.

Crea la página de marketing de tu Startup

Aquí debemos distinguir dos casos:

Si estás empezando, constrúyela en Framer. Serás mucho más ágil, partiendo de plantillas como Boost y podrás hacer iteraciones y modificaciones de manera mucho más ágil.

Si estás en Serie A y quieres algo más robusto: Vete a Webflow. La inversión en esta herramienta te dará ventajas de cara a futuro como la posibilidad de añadir integraciones más complejas, además de la posibilidad de liderar los esfuerzos de creación de contenido por parte del equipo de marketing sin depender de diseño o tecnología.

Crea la página para una gran empresa

Aquí sin duda, vete a Webflow.

Será mucho más sencillo cumplir con los estándares de seguridad y compliance utilizando esta herramienta, en el plan Enterprise, ya que está pensado para dar cabida a las necesidades que estas corporaciones suelen tener.

Aquí la decisión ya no es tanto de posibilidades de una herramienta como de obtener permisos y convencer de que ahorrará tiempo.

Hasta aquí nuestra comparación de Webflow vs Framer a la hora de construir una página web. Destacar que esto está en constante evolución y que las cosas en este ecosistema pueden cambiar muy pronto.

También no existen reglas universales y cada caso particular tendrá sus requisitos que hagan que sea más propenso a escoger una u otra.