Framer para diseñadores: sitios web con diseño y código
Framer es un constructor de sitios con canvas de diseño, CMS y hosting incluidos. Qué ofrece hoy, qué planes publica y cuándo conviene frente a Webflow o Figma.
¿Qué es hoy?
Según su propia página “Acerca de”, Framer empezó como herramienta de prototipado, lanzó en 2014 y más tarde reconstruyó el producto para que los equipos pudieran diseñar, publicar y actualizar sitios web desde un mismo canvas. Hoy su posicionamiento público es ese: construir y publicar sitios. Su página principal habla de hosting, CMS, analítica, SEO y AEO integrados, de un agente de diseño nativo del canvas y de la posibilidad de conectar Claude, Codex, Cursor u otro agente compatible con MCP para actualizar textos o importar contenido al CMS.
Para un diseñador de producto, esto cambia la pregunta. Antes se preguntaba si Framer servía para prototipar una app. Ahora la pregunta útil es si sirve para publicar un sitio o una landing sin depender de un desarrollador, y qué tan bien encaja con el flujo de diseño que ya tienes.
Un matiz importante: las páginas oficiales de Framer hablan de un canvas editable y de sitios publicables, y no describen un flujo de prototipado interactivo de aplicaciones. Si tu necesidad es un prototipo de flujo de app para user testing, haz un piloto antes de comprometerte y compáralo con Figma o ProtoPie.
¿Por qué le importa a un diseñador?
Porque acorta la distancia entre diseño y publicación. Un diseñador que puede montar una landing, probar el texto y publicarla el mismo día tiene más control sobre lo que llega al usuario. También reduce la cantidad de traspasos: el diseño no se entrega a un equipo que lo reconstruye.
Pero tiene un costo: el diseñador asume decisiones técnicas. Rendimiento, accesibilidad, SEO y mantenimiento pasan a ser parte del trabajo. Si el sitio es importante para el negocio, esas decisiones necesitan revisión de alguien que sepa de desarrollo web.
Antes de adoptarla en un equipo, revisa tres cosas: quién puede editar, qué pasa con el código que genera el agente y dónde vive el contenido si decides migrar. La ayuda de Framer indica que Basic y Pro permiten hasta 10 asientos con edición, y que cada editor adicional se cobra aparte, así que en un equipo grande esos costos pesan tanto como el precio del plan.
¿Qué planes tiene?
Según la página oficial de precios y su ayuda, consultadas el 5 de noviembre de 2026:
| Plan | Precio mostrado | Para qué se presenta | Límites destacados |
|---|---|---|---|
| Free | 0 dólares | Aficionados y proyectos personales | Dominio gratuito de Framer, 1 GB de ancho de banda |
| Basic | 10 dólares al mes | Personas o equipos pequeños | 2 colecciones de CMS, 1.000 elementos, 30 páginas, 50 GB |
| Pro | 30 dólares al mes | Negocios en crecimiento (startups, scaleups) | 10 colecciones, 2.500 elementos, 150 páginas, 100 GB, hasta 10 asientos con edición |
| Enterprise | Personalizado | Organizaciones grandes con necesidades propias | Límites a medida, editores ilimitados |
Algunos detalles que cambian el costo real. El propietario del espacio de trabajo no paga asiento; los editores adicionales cuestan 20 dólares al mes y los editores de contenido, 10. Para conectar un dominio propio hace falta un plan de pago, y Framer indica que el dominio es gratuito con facturación anual. En Basic y Pro los idiomas adicionales son un complemento (hasta 20, a 20 dólares por idioma). La página aclara que todos los precios son mensuales y se facturan según el ciclo elegido al pagar, y que los planes incluyen créditos de IA mensuales (1.000 en Basic y 3.000 en Pro). El servidor MCP aparece en todos los planes, marcado como vista previa y gratuito durante ese periodo.
Estas cifras son una foto de la fecha de consulta. Los precios, los límites y las funciones de IA cambian con frecuencia, así que confirma todo en la página oficial de precios antes de decidir.
¿Cuándo conviene y cuándo no?
Framer tiene sentido cuando:
- necesitas un sitio o una landing publicable sin montar infraestructura;
- el contenido cambia y quieres un CMS sencillo sin pagar un servicio aparte;
- el equipo de diseño quiere controlar la publicación y tiene criterio para revisar lo que el agente genera.
No conviene cuando:
- el producto es una aplicación compleja que necesita lógica de negocio, base de datos propia y autenticación avanzada;
- el sitio tiene requisitos de accesibilidad o rendimiento que deben auditarse con rigor sin supervisión técnica;
- la decisión depende de un solo punto de límite, como el número de páginas o colecciones, y el plan no lo cubre.
Si la comparación es con Webflow, ambas son opciones sin código para sitios. La diferencia práctica está en el modelo de precios, los límites por plan y la forma de trabajar con el diseño. Compara con datos actuales antes de elegir.
Ejemplo
Ejemplo ilustrativo: un equipo de diseño quiere publicar la landing de un curso de UX con una lista de módulos que cambia cada trimestre. En Framer diseña la página en el canvas, conecta una colección de CMS para los módulos y publica en el plan Basic, que alcanza mientras el sitio quede por debajo de las 30 páginas y de las 2 colecciones. Cuando el curso crece y necesita más páginas y un editor adicional para el equipo de marketing, evalúa pasar al Pro y suma el costo del asiento extra. La revisión de accesibilidad la hace antes de publicar: contraste, orden de foco con teclado y textos alternativos de las imágenes.
Para mañana: abre una página de prueba, diseña una sección con un título, un párrafo y un botón, y pregúntate si el botón se entiende sin leer su etiqueta. Si no, ya tienes una corrección que hacer antes de publicar.
Errores comunes
- Tomar precios de terceros como si fueran los oficiales.
- Publicar sin revisar accesibilidad, asumiendo que el canvas garantiza una buena estructura.
- Elegir plan por el precio mensual sin mirar límites de páginas, colecciones y editores.
- Usar Framer para prototipar flujos de app sin hacer antes un piloto que confirme que cubre lo que necesitas.
- Aceptar código generado sin revisar, porque el agente puede producir lo que pediste y no lo que el usuario necesita.
- No planear la migración si el sitio crece y necesita otra herramienta.