¿Qué es Framer? Funciones de IA, precios y cómo crear y publicar un sitio web
Conoce AI Agent, el lienzo de edición, el CMS y los precios de Framer. Explicamos cómo crear un sitio pequeño, revisar su aspecto en el teléfono y comprobar dónde se publica.
Información verificada el 5 de noviembre de 2026. Este artículo se elaboró tras consultar el contenido de las páginas oficiales. No hemos creado un sitio, contratado un plan ni publicado nada en Framer. Los precios se basan en los importes en dólares estadounidenses con facturación anual.
Introducción
Quieres crear un sitio para presentar tus servicios o un portafolio, pero aprender a usar sistemas distintos para ajustar el diseño y publicar puede resultar complicado. Framer permite crear y publicar sitios web mediante instrucciones a la IA y edición visual. Su sitio oficial presenta un proceso en el que se ajusta en un lienzo editable lo que ha creado Agent. Sitio oficial de Framer
Es importante distinguir entre conseguir un buen aspecto inicial y crear un sitio que los visitantes puedan usar. Tomando como ejemplo un sitio pequeño, este artículo explica las funciones, los precios y los pasos para preparar el contenido y revisarlo antes y después de publicarlo.
Qué es Framer
Framer es un servicio de creación de sitios web que permite trabajar con el diseño de páginas, componentes reutilizables, contenido del CMS, visualización según el ancho de pantalla y ajustes de publicación. La guía oficial de la interfaz explica sus áreas principales: Canvas, CMS, Localization, Analytics y Settings. Guía de la estructura de la interfaz
Resulta más fácil empezar si entiendes la función de cada área: crear el aspecto visual en Canvas, organizar artículos y otros contenidos en CMS y revisar la configuración general del sitio en Settings. No es necesario utilizarlo todo desde el principio.
El equipo editorial recomienda comenzar con un proyecto de propósito claro, como un sitio de presentación de una sola página. Definir a quién quieres dirigirte, qué quieres comunicar y qué acción esperas al final te ayudará a alinear los criterios de diseño y de comprobación del funcionamiento.
Por ejemplo, un sitio que muestra trabajos realizados necesita presentar las obras, tu participación en cada proyecto y una vía de contacto. Una imagen grande por sí sola quizá no permita decidir a quien esté pensando en contratarte. Procura que la libertad de diseño contribuya a que la información sea clara.
Qué puedes hacer: funciones principales
Consultar a AI Agent sobre la estructura y el diseño
La lección introductoria oficial explica cómo partir de un proyecto vacío, describir a Agent el sitio que necesitas y crear páginas, navegación, CMS, componentes y estructuras adaptadas a distintos anchos de pantalla. Tras la generación, puedes revisar el contenido en el lienzo. Crear tu primer sitio
En las instrucciones iniciales, incluye en qué consiste tu negocio o actividad, qué páginas necesitas, qué fotografías vas a usar y qué estilo quieres transmitir. En un ejemplo del equipo editorial, empezaríamos por el objetivo —«un sitio donde quienes estén pensando en hacer una consulta puedan conocer los trabajos realizados y el alcance de los servicios»— y después enumeraríamos los elementos necesarios.
También es importante no presentar directamente los textos generados por IA como si describieran tu propia trayectoria. Si aparecen nombres de clientes, cifras o premios ficticios, sustitúyelos por información verificable o elimínalos. Aunque utilices el diseño generado, comprueba por separado los hechos que vas a publicar.
Ajustar el texto y los espacios en el lienzo
La guía oficial de Framer explica cómo consultar las páginas, las capas y Assets, y cómo editar el elemento seleccionado. También presenta la edición directa en el lienzo como una opción para cambios pequeños en el texto, los colores o los espacios. Interfaz
El equipo editorial recomienda empezar por dar un tratamiento coherente a cada función del texto. Si se distingue el tema principal de la página, los encabezados de sección, las explicaciones y las notas, será más fácil establecer un orden de lectura. Antes de añadir elementos decorativos, comprueba si la información importante se ve primero.
Revisa también si los botones o encabezados que cumplen la misma función cambian de una página a otra. Definir qué conviene unificar y qué debe variar según el contenido facilitará las modificaciones posteriores.
Gestionar información con un formato común mediante el CMS
El CMS permite agrupar información que comparte los mismos campos, como artículos, casos de estudio o presentaciones del equipo. La lección oficial explica cómo añadir Item a una Collection, definir Field como el título o la imagen y conectar esos datos con un mismo diseño. Fundamentos del CMS
Para un caso de estudio, por ejemplo, podrías incluir el nombre del proyecto, una imagen, una descripción, el alcance de tu participación y la fecha de publicación. El equipo editorial propone reunir primero algunos casos reales y distinguir los campos que siempre hacen falta de los que pueden no existir en determinados proyectos. Así será más fácil diseñar la estructura.
No decidas si vas a usar el CMS únicamente por la cantidad de información. Tiene sentido considerarlo si vas a añadir contenido con el mismo formato de manera continua, mientras que una página convencional puede bastar para una explicación breve que solo publicarás una vez. Elige pensando también en el trabajo de quien se encargará de las actualizaciones.
Comprobar la visualización según el ancho de pantalla
En la vista previa puedes cambiar el ancho de pantalla para revisar el diseño y el funcionamiento. También puedes seleccionar un punto de quiebre concreto antes de abrirla. La ayuda oficial indica que el código personalizado añadido desde la configuración no aparece en la vista previa y debe comprobarse en el sitio publicado. Cómo usar la vista previa
El equipo editorial recomienda no limitarse a revisar los tamaños predefinidos. Cambia el ancho poco a poco y observa si los encabezados presentan saltos de línea extraños o si las imágenes y el texto se superponen. Los dispositivos de los visitantes no tienen todos el mismo ancho.
En los teléfonos, revisa tanto el tamaño del texto como el orden del contenido. Cuando los elementos que estaban uno al lado del otro pasan a colocarse en vertical, comprueba si sigue estando clara la relación entre las explicaciones y las imágenes, y si se puede leer la información necesaria antes de llegar al botón.
Planes y precios
La página de precios consultada mostraba la opción Yearly billing. Basic equivale a 10 dólares al mes y Pro a 30 dólares; Enterprise tiene un presupuesto personalizado. También hay un plan gratuito que permite probar el servicio con un dominio de Framer. Precios oficiales
Plan | Equivalente mensual con pago anual | Características principales según la información consultada |
|---|---|---|
Free | 0 dólares | Dominio de Framer y créditos de AI de prueba |
Basic | 10 dólares | Dominio propio, 2 CMS Collections y otras funciones |
Pro | 30 dólares | 10 CMS Collections, entorno de pruebas y otras funciones |
Enterprise | Presupuesto personalizado | Administración para organizaciones y condiciones personalizadas |
La página de precios también indica cargos adicionales por editores, editores de contenido, funciones multilingües y otras prestaciones. No tomes el precio base del sitio como el costo total: considera también quién editará y qué funciones vas a añadir.
En el momento de la consulta, los créditos de IA del plan gratuito se presentaban como «500 para probar». No interpretes que recibirás esa misma cantidad cada mes; comprueba el saldo y las condiciones de reposición en la interfaz del servicio. La cuota de uso de Agent también es independiente del número de páginas del sitio y del volumen de transferencia.
El equipo editorial recomienda contar primero las páginas y los tipos de contenido del CMS que necesitas. La estructura necesaria cambia según quieras gestionar artículos y casos de estudio por separado o te baste con una sola lista. Además de imaginar el tamaño máximo que podría alcanzar el sitio, elige según lo que vas a publicar ahora y las actualizaciones previstas.
En cuanto al dominio propio, distingue la posibilidad de conectarlo de los costos de registro y renovación. Framer ofrece ventajas relacionadas con el dominio al pagar anualmente, pero existen condiciones sobre los dominios incluidos y el proveedor de registro. Por eso, no conviene dar por hecho que cualquier dominio que quieras será gratuito. Conectar un dominio propio
Si encargas la creación del sitio a otra persona, decide también quién cambiará los textos y las imágenes después de la publicación. Distinguir entre quienes solo consultan, quienes editan el contenido y quienes administran todo el sitio facilitará la comparación de los puestos de usuario y permisos necesarios.
Cómo usarlo: crear un pequeño sitio de presentación
A continuación explicamos el proceso, desde la creación hasta la revisión posterior a la publicación, tomando como referencia las lecciones introductorias oficiales. No se creó ni se publicó un sitio en Framer para elaborar este artículo.
1. Organizar primero la información que vas a publicar
Empieza por enumerar el contenido necesario: encabezados, explicaciones, trabajos realizados y formas de contacto, entre otros. Aunque todavía no tengas los textos definitivos, separa la información confirmada de la que está pendiente. Prepara también fotografías y logotipos que tengas permiso para utilizar.
El ejemplo de estructura de una página que propone el equipo editorial es: «Qué ofreces», «Qué servicios prestas», «Trabajos realizados», «Cómo trabajas» y «Dónde hacer una consulta». No es una plantilla universal, sino un ejemplo para pensar en el orden en que los visitantes toman una decisión. Elimina las secciones que no necesites y sustitúyelas por las explicaciones que requiera tu sitio.
Definir un objetivo también facilita la elección del texto de los botones. Las explicaciones y la página de destino cambian según quieras que los visitantes lean un documento o envíen una consulta.
2. Crear la estructura general desde un proyecto vacío
La introducción oficial indica que debes abrir el panel de Agent en un proyecto vacío de Framer y describir lo que necesitas. Después, revisas las páginas, el CMS y los componentes creados, y los ajustas con instrucciones adicionales. Pasos oficiales para empezar a crear
Al revisar el primer resultado, fíjate no solo en los colores y la decoración, sino también en si están las páginas necesarias y si las explicaciones siguen el orden adecuado. Cuando quieras añadir contenido que falta, indicar qué duda del lector quieres resolver facilitará la evaluación más que pedir simplemente «mejóralo».
3. Sustituir el contenido por información correcta
Revisa los textos y las imágenes generados y sustitúyelos por contenido que se ajuste a los hechos. El equipo editorial recomienda comprobar primero los datos cuyos errores pueden influir en las acciones de los visitantes, como los precios, la ubicación, las cifras de los trabajos realizados y los datos de contacto.
Después, revisa la relación entre los encabezados y el cuerpo del texto. Si un encabezado hace una gran promesa que el texto no puede justificar, reformúlalo. Prepara el contenido para que alguien que visita el sitio por primera vez pueda entender qué servicios puede solicitar.
Asigna también una función a las fotografías. Distingue entre las que transmiten una atmósfera y las que muestran un trabajo realizado, y añade un pie de foto si necesitan explicación. Contar con imágenes atractivas no siempre basta para comunicar en qué consiste el servicio.
4. Organizar la información recurrente y la forma de actualizarla
La guía oficial de creación de sitios explica cómo preparar estilos de texto y color, así como componentes reutilizables, como los botones. También describe cómo dividir las páginas en secciones y ajustarlas según el contenido. Diseñar un sitio fácil de actualizar
Si tienes previsto añadir trabajos realizados, define los campos del CMS. El equipo editorial empezaría comparando un caso con una descripción breve y otro con una descripción larga. No ajustes el diseño solo para una extensión ideal: comprueba que también se lea bien con longitudes que puedan darse en la práctica.
Para los campos que puedan generar dudas a la persona encargada de las actualizaciones, explica qué debe introducir en unas notas del proyecto. Pensar tanto en el aspecto final como en la posibilidad de mantener la misma calidad al añadir el siguiente elemento ayudará a que el sitio sea más fácil de gestionar.
5. Reproducir las acciones del lector en la vista previa
La ayuda oficial explica cómo abrir la vista previa con el botón Play o un atajo de teclado. Puedes comprobar los enlaces y la visualización mientras cambias el ancho de pantalla. Vista previa
Al revisar el sitio, no te limites a recorrerlo visualmente de arriba abajo: elige un objetivo de un visitante y sigue los pasos para conseguirlo. Por ejemplo, comprueba si resulta fácil identificar los enlaces necesarios y si los botones llevan al lugar adecuado al «ver los trabajos realizados y pasar a la vía de contacto».
En la visualización para teléfonos, revisa los saltos de línea de los encabezados, el recorte de las imágenes, los elementos que se salen horizontalmente de la pantalla y la separación entre botones. Si cuesta leer en una pantalla estrecha, recomendamos ajustar el orden del contenido y los espacios, en lugar de limitarse a reducir el tamaño del texto.
6. Configurar el título y la información que aparece al compartir
Framer explica cómo configurar títulos, descripciones e imágenes para compartir, tanto para todo el sitio como para páginas individuales. Los ajustes específicos de una página pueden sustituir los valores generales predeterminados. Títulos y descripciones
Tener un encabezado grande dentro de la página y mostrar el título correcto en el navegador o al compartirla son cosas distintas. Comprueba que no quede un nombre provisional del proyecto y que la descripción corresponda al contenido de la página.
7. Elegir dónde publicar y revisar las páginas disponibles
Según las instrucciones oficiales, se utiliza Publish para publicar el sitio y después se accede a la URL que aparece. Para las actualizaciones se usa Update. Si utilizas un entorno de pruebas con Pro o un plan superior, la configuración permite separar el entorno de prueba de la publicación en producción. Explicación de la publicación / URL de publicación y dominios
Al publicar, vuelve a abrir la página desde su URL definitiva para revisarla. Comprueba tanto la página de inicio como las demás páginas, las imágenes y los enlaces principales. Si hay elementos que no se pueden verificar en la vista previa, como el código añadido desde la configuración, comprueba también su funcionamiento en el entorno publicado.
El equipo editorial recomienda anotar la fecha de publicación, las URL revisadas y las correcciones pendientes. Distinguir lo que has modificado en el editor de lo que ya se refleja en producción ayuda a reducir malentendidos durante las actualizaciones.
Para quién puede ser adecuado y para quién no
A juicio del equipo editorial, es una opción a considerar para quienes quieren ajustar el diseño de forma visual y crear sitios de presentación o contenidos que se actualizan de manera continua. Quienes puedan generar una base con IA y revisar por su cuenta la información y el aspecto visual tendrán más facilidad para probar el proceso de creación.
En cambio, no recomendamos publicar directamente el resultado generado sin revisar los textos y los enlaces. Si el sitio se centra en procesos específicos del negocio, primero hay que enumerar las integraciones y funciones necesarias y después comprobar cómo se pueden implementar.
Si nadie puede encargarse de las actualizaciones tras la publicación, organiza también esa gestión antes de adoptar la herramienta. La utilidad del sitio depende no solo de crearlo, sino de poder mantener al día cambios como los horarios de atención o los precios.
Diferencias con herramientas similares
Webflow también ofrece un lienzo visual, un CMS y funciones de publicación y colaboración. Su sitio oficial presenta un entorno que reúne el diseño, la gestión de contenido y el análisis, entre otras funciones. Sitio oficial de Webflow
Para compararlo con Framer, recomendamos usar la misma página como ejemplo y probar la creación de la estructura inicial, la actualización de textos, los ajustes de visualización en teléfonos y la publicación. En lugar de decidir de forma general cuál es más fácil, valora si la persona encargada de actualizarlo puede manejarlo y si se ajusta a las funciones que necesitas.
Aspectos a tener en cuenta
Los elementos que se pueden comprobar en la vista previa y en el sitio publicado pueden ser distintos. La ayuda oficial diferencia especialmente la aplicación del código personalizado, por lo que una vista previa correcta no significa que también se haya verificado el funcionamiento tras la publicación.
Al evaluar los precios, considera por separado el plan del sitio, los editores adicionales, la cuota de uso de IA y las funciones extra. Es importante no basarse sin más en nombres de planes antiguos que ya no aparecen en la tabla actual ni en los importes de artículos publicados anteriormente.
Al evaluar el diseño, fíjate en si los visitantes pueden llegar al contenido que necesitan, más que en la cantidad de animaciones. Si algún efecto dificulta la lectura o la interacción, recomendamos ajustarlo al propósito del sitio.
Conclusión
Framer permite crear sitios web, actualizarlos mediante un CMS y publicarlos con ayuda de AI Agent y un lienzo de edición. Probar en un sitio pequeño tanto la preparación del contenido como la revisión en distintos anchos de pantalla facilitará la evaluación.
Distingue la revisión de la vista previa antes de publicar de la comprobación de la URL publicada, y considera también quién se encargará de las actualizaciones y qué costos serán necesarios. El equipo editorial recomienda dar el sitio por terminado cuando los visitantes puedan leer la información que necesitan y actuar a partir de ella.
