Si quieres que tus diseños en Figma se adapten al tamaño de su contenedor, las constraints son la herramienta que necesitas dominar. Te permiten controlar cómo se comporta cada elemento cuando el frame crece o decrece, simulando el efecto responsive que vemos en distintas pantallas.

¿Qué son las constraints en Figma y para qué sirven?

Las constraints son reglas que le indican a un elemento dónde debe quedarse o cómo debe estirarse cuando su contenedor cambia de tamaño. Piensa en ellas como anclas: tú decides si un objeto se pega a la izquierda, a la derecha, al centro, arriba, abajo o si se estira con el frame.

¿Qué son las constraints en Figma? Son reglas de posicionamiento que definen cómo se comporta un elemento dentro de su contenedor cuando este cambia de tamaño, permitiendo crear diseños responsive [01:30].

En el panel derecho de Figma, al seleccionar un elemento, aparece el control visual de constraints. Ese pequeño diagrama te ayuda muchísimo a entender qué pasará al redimensionar el frame.

¿Cómo se aplican constraints a diferentes formas?

Imagina un frame con cuatro elementos: un círculo, un triángulo, un cuadrado y una línea. A cada uno le puedes asignar un comportamiento distinto [00:55]:

• Círculo con constraint left top: se queda anclado en la esquina superior izquierda y no se mueve.
• Línea con constraint left and right: se estira horizontalmente, creciendo o decreciendo con el contenedor.
• Triángulo con constraint left bottom: permanece en la esquina inferior izquierda.
• Cuadrado con constraint right bottom: se queda fijo en la esquina inferior derecha.

Cuando agarras el frame y lo haces más ancho o más alto, cada forma reacciona según la regla que le diste. Esa es la magia: control total sobre el comportamiento de cada pieza.

¿Por qué combinar constraints con grids para layouts responsive?

Aquí viene lo interesante. Cuando aplicas una grid a un frame, las constraints dejan de tomar el contenedor como referencia y pasan a basarse en la rejilla.

Pongamos un ejemplo práctico con un submenú en mobile [02:30]. Si le indicas que se comporte center center, los elementos no se anclarán al centro del frame completo, sino al centro de la grid que aplicaste sobre ese frame. Esto te da una precisión enorme para construir interfaces que respondan bien a múltiples tamaños de pantalla.

¿Cómo funcionan las constraints con grids? Cuando un elemento tiene una grid aplicada, las constraints toman como referencia esa rejilla y no el contenedor, lo que permite alineaciones más precisas en diseños responsive [02:45].

¿Se pueden usar constraints y auto layout al mismo tiempo?

No de forma directa. Figma no permite combinar auto layout con constraints sobre el mismo elemento [00:40]. Es una limitación importante a tener presente cuando planeas tu estructura. Más adelante, al montar el layout principal de la página, verás cómo resolver esta restricción combinando ambos sistemas en distintos niveles de la jerarquía.

¿Cómo construir interfaces complejas con rejillas anidadas?

Una técnica potente es usar rejillas dentro de rejillas. No te limitas a una grid horizontal en el frame principal, sino que aplicas grids adicionales dentro de componentes internos.

Esto permite que tanto las imágenes como el contenido textual se reorganicen de forma fluida cuando cambias el ancho del layout. Es lo que hace posible construir interfaces que se sientan nativas en mobile, tablet y desktop sin tener que rediseñar desde cero.

Algunas claves para sacarle provecho:

• Define primero la grid del contenedor principal.
• Aplica grids secundarias en los componentes internos que necesiten su propia lógica.
• Asigna constraints específicas a cada elemento según el comportamiento esperado.
• Prueba el resize moviendo los bordes del frame para validar el resultado.

Con estas dos herramientas, grids y constraints, ya tienes lo necesario para empezar a montar el layout principal de tu página. El siguiente paso será construir el componente inicial: la barra de navegación.

¿Has probado a combinar rejillas anidadas con constraints en tus propios proyectos? Cuéntame en los comentarios qué efecto responsive te gustaría replicar.