Framer es una de las opciones preferidas para crear landing pages sin necesidad de programar. Su editor visual es potente, las animaciones vienen integradas y todo va rápido.
Puedes elegir una plantilla de la galería y adaptarla a tu estilo, o empezar desde cero arrastrando elementos en el editor. En ambos casos, con solo un clic en Publish tu landing estará online.
En este artículo te contamos cómo construirla desde cero.
Vamos a hacerlo sin plantillas. Así conoces cómo funciona Framer por dentro y luego puedes dar rienda suelta a tu creatividad sin depender de diseños prearmados.
Entra en framer.com y crea una cuenta gratuita si no la tienes. Desde el dashboard, haz clic en "New Project" y elige la opción de empezar con un canvas vacío.
El canvas por defecto tiene un ancho de 1200px, que es el breakpoint de escritorio. Puedes renombrar el proyecto desde la esquina superior izquierda y cambiar el color de fondo desde el panel derecho.
Los frames son los contenedores básicos en Framer. Funcionan como cajas donde colocas elementos. Para crear uno, pulsa la tecla F o usa la herramienta Frame de la barra lateral.
Los stacks funcionan como frames con organización automática. Sirven para ordenar tu contenido en filas o columnas y mantener todo alineado. Haz click en el frame, ve al panel derecho y activa la opción “Vertical” u “Horizontal” en Layout.
La estructura típica de una landing es un stack vertical donde cada sección (hero, beneficios, features, CTA, footer) es un frame apilado uno debajo de otro.
El hero es lo primero que ve el visitante. Debe comunicar tu propuesta de valor en segundos.
Crea un frame con altura de 100vh para que ocupe toda la pantalla. Conviértelo en stack vertical y añade un título principal, un subtítulo breve y un botón de CTA.
Para el texto usa la herramienta Text (tecla T). Para el botón, crea un frame pequeño con texto dentro, ponle color de fondo y bordes redondeados. Si quieres imagen de fondo, clica en el frame y en "Fill" elige Image.
Con el hero listo, toca crear las secciones que desarrollan tu propuesta. Los beneficios, características, prueba social...
La forma más rápida es duplicar el frame del hero (Cmd/Ctrl + D) y modificar su contenido. Así mantienes la coherencia estructural.
Para beneficios, crea un stack horizontal con tres frames que contengan icono, título y descripción. Para características, alterna imagen y texto en filas. Para prueba social, añade testimonios o logos de clientes.
La sección de CTA final refuerza la acción que quieres que haga el visitante. Usa un fondo que contraste con el resto de la página.
Centra el contenido, añade un título persuasivo, una línea de apoyo y el botón principal bien visible.
El footer va debajo. Pon enlaces legales, redes sociales o datos de contacto. Organízalo con un stack horizontal en columnas. Mantenlo simple para que funcione bien en móvil.
Framer permite definir variables de diseño para colores y tipografías. Accede desde el panel izquierdo, sección "Styles".
Crea tus colores principales (primario, secundario, fondos, textos) y tus estilos de texto (H1, H2, párrafo, botón).
Gracias a eso, si cambias el color principal, toda la landing se actualiza al momento. También puedes configurar los tamaños de texto según el dispositivo.
Las animaciones dan vida a la landing. Framer tiene dos tipos, las animaciones de aparición y animaciones de scroll.
Para añadir una animación de aparición, haz click en el elemento, ve a "Effects" y activa "Appear". Configura desde dónde entra (fade, slide, escala) y la duración.
También puedes poner hover en los botones. Para ello convierte el botón en componente, crea una variante y define el estado hover con los cambios que quieras. Framer anima la transición automáticamente.
Framer usa breakpoints para crear versiones adaptadas a diferentes dispositivos. El principal es Desktop (1200px).
Para añadir tablet y móvil, haz clic en el selector de breakpoints en la parte superior del canvas. Los cambios en desktop se heredan a los breakpoints menores, pero puedes sobrescribirlos.
En móvil normalmente necesitas reducir tamaños de texto, cambiar layouts horizontales a verticales y ajustar espaciados. Usa la opción "Direction" en los stacks para cambiar de horizontal a vertical fácilmente.
Tenemos una guía más completa sobre testing y optimización si quieres profundizar
Con el diseño listo, haz clic en "Publish" en la esquina superior derecha. Framer te asigna un subdominio gratuito tipo tunombre.framer.website.
Si tienes plan de pago, puedes conectar tu dominio propio desde Settings > Domains. Framer te muestra los registros DNS que debes configurar en tu proveedor.
Antes de publicar, revisa la configuración SEO en Settings. Configura el título de la página, su meta descripción e imagen OG para redes sociales.
No siempre hace falta empezar con una plantilla en blanco. Según tu nivel y tiempo disponible, hay otras formas de trabajar.
Framer tiene una biblioteca de templates que puedes duplicar y adaptar. Entra en ella en framer.com/templates o al crear un nuevo proyecto.
Esta opción es ideal para ir lo más rápido posible. Los templates suelen incluir secciones, estilos y animaciones ya configuradas. Solo cambias textos, imágenes y colores.
Si ya creaste landings en Framer para otro proyecto, puedes duplicarlo desde el dashboard (tres puntos > Duplicate).
Esto te ayuda a mantener la coherencia visual si trabajas con el mismo cliente o a crear nuevas versiones sin perder el diseño original.
Antes de dar por terminada tu landing, revisa estos puntos.
Si tienes tarjetas, botones o bloques que se repiten, conviértelos en componentes (clic derecho > Create Component). Así puedes editarlos una vez y que el cambio se aplique en todas las instancias.
Es fácil pasar por alto el destino de un botón o dejar un enlace vacío. Antes de publicar, revisa cada CTA y todos los enlaces del menú para asegurarte de que funcionan como deben.
La previsualización en Framer ayuda, pero nada como ver tu landing en móviles y tablets reales. Abre la URL de staging en tu teléfono y recorre toda la página para asegurarte de que todo funciona y se ve perfecto.
Sube las imágenes en formato WebP y ajusta el tamaño al espacio donde se van a mostrar. Si usas una imagen de 4000px para un área de 800px, solo harás que la página cargue más lento sin mejorar el resultado.
Lo que se lee bien en desktop puede quedar diminuto en un smartphone. Ajusta los tamaños de texto en el breakpoint móvil hasta que sea cómodo de leer.
Si tienes formularios, haz una prueba enviando datos y comprobando que lleguen a tu email, CRM o herramienta de automatización.
Ya has visto lo fácil y rápido que es crear una landing page en Framer. Con solo un clic puedes tener tu web lista para publicar, sin complicarte demasiado y viéndose bastante bien.
Si quieres seguir aprendiendo y sacarle todo el partido a Framer, apúntate gratis al curso gratuito para crear webs con Framer y serás capaz de pasar de idea a web en tiempo record.
Descubre lo que puedes crear en 7 días, sin saber programar
Cada día, un proyecto que podrás construir sin escribir una sola línea de código, directo a tu bandeja de entrada.
Empieza Gratis
Academia de herramientas no-code y low–code
.svg){kind=icon}
