Stacks en Framer

Un Stack es un contenedor especial que organiza automáticamente los elementos que contiene, distribuyéndolos de forma ordenada en una dirección específica: horizontal o vertical.

Ventajas clave

• Ahorra tiempo en ajustes manuales.

• Mantiene una alineación perfecta entre elementos.

• Hace que los layouts sean fáciles de modificar y mantener.

Tipos de Stacks

1. Horizontal Stack

Organiza los elementos de izquierda a derecha en una fila.

Ejemplo:

Un menú de navegación con varios botones alineados horizontalmente.

2. Vertical Stack

Organiza los elementos de arriba hacia abajo en una columna.

Ejemplo:

Una lista de características o un formulario con campos de entrada alineados verticalmente.

Opciones de Configuración

1. Spacing (Espaciado)

Controla la distancia entre los elementos dentro del Stack.

Ejemplo:

Ajusta el espacio entre íconos en un menú para que se vean equilibrados.

2. Alignment (Alineación)

Define cómo se alinean los elementos dentro del Stack:

• Izquierda, centro o derecha (horizontal).

• Arriba, centro o abajo (vertical).

3. Wrap (Ajuste de línea)

Si los elementos no caben en una sola fila o columna, puedes activar wrap para que salten automáticamente a la siguiente línea.

Ejemplo:

Un grid dinámico de tarjetas que se reorganizan según el ancho del contenedor.

4. Padding (Relleno)

Añade espacio interno entre los bordes del Stack y los elementos que contiene.

Ejemplo:

Un contenedor con texto e imágenes que necesita espacio extra para evitar que se vean amontonados.

¿Cuándo usar Stacks?

• Al crear layouts repetitivos como listas, menús o galerías.

• Cuando necesitas que los elementos respondan automáticamente a cambios de tamaño.

• Para mantener la consistencia en el espaciado y la alineación.