Un componente responsive en Framer se adapta solo a cualquier pantalla. No necesitas hacer versiones distintas para móvil, tablet o desktop: diseñas una vez y el componente se ajusta según el dispositivo.
En este tutorial vas a crear una tarjeta de servicio responsive desde cero. Al final, tendrás un componente que muestra el icono a la izquierda en desktop y lo coloca arriba del texto en móvil, todo de forma automática.
Antes de diseñar, ten en cuenta que Framer usa breakpoints para adaptar tu web a cualquier pantalla. Por defecto, en desktop es 1200px, tablet 810px, y móvil (390px).
Los cambios que hagas en desktop se aplican también a los demás tamaños, salvo que los modifiques en cada breakpoint. Con esto claro, empezamos a crear el componente.
Vamos a construir una tarjeta de servicio con tres elementos: un icono, un título y una descripción.
Ahora tienes tres elementos sueltos dentro del frame.
Aquí es donde Framer empieza a brillar. Los Stacks organizan los elementos automáticamente y son la base del diseño responsive.
Verás que los elementos se reorganizan automáticamente en una fila horizontal.
Para que el diseño funcione bien, el título y la descripción deben estar juntos en su propio stack vertical.
Ahora tu tarjeta tiene esta estructura:
Tarjeta (Stack horizontal)
├── Icono
└── Contenido (Stack vertical)
├── Título
└── Descripción
Para que tu componente se adapte bien a cualquier pantalla, usa tamaños relativos en vez de valores fijos.
Esto hace que el bloque de texto ocupe todo el espacio disponible después del icono.
Combinar un elemento fijo, como el icono, con otro flexible para el contenido es importante para conseguir un layout responsive.
Ahora vamos a definir cómo se ve la tarjeta en pantallas pequeñas.
Framer creará una nueva vista de tu página para móvil. Notarás que todo se ve igual que en desktop porque los breakpoints heredan del principal.
El icono ahora aparece arriba del texto.
En el panel derecho verás resaltadas las propiedades que has cambiado. Eso significa que esos valores ya no heredan del breakpoint principal y son específicos para ese tamaño de pantalla.
Los textos también necesitan adaptarse. Un título que se lee bien en desktop puede ser demasiado grande en móvil.
Si vas a reutilizar estilos tipográficos, es mejor crear Text Styles con breakpoints:
Cuando apliques este Text Style a un texto, automáticamente cambiará según el breakpoint activo.
Para poder usar esta tarjeta en múltiples lugares, conviértela en componente.
Framer creará un componente con una variante principal.
Si necesitas cambios más drásticos entre breakpoints, puedes crear variantes nombradas:
Framer reconoce estos nombres y elige automáticamente la variante correcta según el breakpoint de la página donde uses el componente.
Antes de publicar, verifica que todo funciona.
Si todo ha ido bien, la estructura debería haber quedado tal que así:
Componente responsive
│
├── Frame contenedor (Stack)
│ ├── Direction: Horizontal (desktop) → Vertical (móvil)
│ ├── Gap: 20px (desktop) → 16px (móvil)
│ └── Padding: 24px
│
├── Elemento fijo (icono)
│ └── Size: 48x48px
│
└── Elemento flexible (contenido)
├── Width: Fill
└── Stack vertical con textos
Framer hereda hacia abajo, así que es más eficiente diseñar primero la versión más compleja y luego simplificar para móvil.
Reserva los tamaños fijos para iconos, logos o elementos que no deben cambiar. Todo lo demás debería adaptarse.
Si modificas algo en móvil y cambia también en desktop, es porque estás editando una propiedad que aún no has sobrescrito. Haz primero el cambio en desktop, luego modifícalo en el breakpoint secundario.
Asegúrate de que el contenedor tenga el Layout en Stack, no en None. Si no activas Stack, los elementos no se adaptarán al cambiar la dirección.
Cambia la altura del contenedor a "Fit Content" para que crezca con su contenido en lugar de cortarlo.
Ahora que ya sabes crear componentes responsive, aplica lo mismo a headers, cards, testimonios o formularios. Usa stacks anidados, tamaños flexibles y ajusta por breakpoint cuando lo necesites.
Si quieres aprender a crear sitios web en Framer bien hechos, apúntate a nuestro curso gratuito de Framer. Aprenderás todo lo que necesitas para diseñar y publicar tus propios proyectos.
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}
