Diseñar interfaces que se adapten a distintos tamaños de pantalla no depende de la suerte ni de que Figma adivine tus intenciones. Cada elemento necesita instrucciones claras sobre cómo comportarse cuando el espacio cambia, y esas instrucciones se llaman constraints. Dominar este concepto es la diferencia entre un diseño que se rompe al redimensionar y uno que responde con precisión.
¿Qué son los constraints y por qué los necesitas?
El modelo mental es sencillo: un frame es como una habitación, los objetos dentro son los muebles y los constraints son las instrucciones que le das a cada mueble [0:22]. Un sofá pegado a la pared izquierda, un librero estirado de pared a pared y un cuadro siempre centrado. Si la habitación cambia de tamaño, cada mueble sigue su instrucción. Sin instrucciones, todo se queda donde estaba y el resultado es caos.
Para acceder a los constraints, selecciona un elemento dentro de un frame y busca los atributos de posición en el panel derecho [1:19]. Estos atributos solo aparecen cuando el elemento tiene un padre; si está flotando en el canvas, no los verás. Si la sección aparece colapsada, haz clic en el ícono de constraints para expandirla.
¿Cómo se configura un constraint horizontal?
Tomemos el header como ejemplo [1:42]. Su posición X es cero y su posición Y es 56 píxeles, lo que significa que está al ras del frame horizontalmente y separado 56 píxeles en vertical. Al seleccionar left and right, le indicas que respete su distancia tanto del borde izquierdo como del derecho, como si tuviera pequeños pines en ambos extremos [2:22]. Cuando el frame crece o se reduce, el header se estira proporcionalmente sin generar separaciones inesperadas.
¿Cómo anclar elementos al lado derecho?
Para los iconos de perfil, notificaciones y visibilidad, el pin original estaba a la izquierda [3:07]. Al cambiarlo al lado derecho, el grupo mantiene una separación de 24 píxeles del borde derecho y 16 arriba y abajo. Al redimensionar, esos valores se conservan exactamente.
¿Qué son los layout guides y cuándo usarlos?
Cuando tienes dos tarjetas en la misma fila —por ejemplo, ingresos y gastos— y aplicas left and right a ambas, el resultado no es uniforme [3:54]. Una puede tener 230 píxeles de separación derecha y la otra solo 24. Aquí es donde entran los layout guides [4:22].
- Selecciona el frame padre.
- En la parte inferior del panel, busca la opción layout guides.
- Configura columnas: por ejemplo, cuatro columnas con un margen de 24 píxeles en los extremos.
- Activa stretch para que las columnas crezcan proporcionalmente al ancho del frame [4:43].
Con las guías creadas, cada tarjeta que esté alineada a una columna respetará esas referencias al redimensionar. Es como tener un sistema de rejilla invisible que organiza el contenido de forma predecible.
¿Cómo centrar elementos con constraints?
Para centrar el texto del balance total dentro de su tarjeta, selecciona los textos, alinéalos al centro del elemento y cambia el constraint horizontal a center [5:22]. La tarjeta sigue respetando sus posiciones left and right, pero el contenido interno se mantiene centrado sin importar cuánto cambie el ancho.
- Si el monto dice "$100" o "$1,000,000", siempre estará centrado.
- Su instrucción es clara: mantenerse en la línea central [5:52].
¿Cómo fijar un botón flotante o una barra de navegación?
Un fab button puede estar anclado abajo a la derecha [6:06]. Si necesitas moverlo abajo a la izquierda, solo cambias el constraint correspondiente. Para el bottom nav bar, el comportamiento es similar al header: se aplica left and right combinado con bottom para que se estire horizontalmente y permanezca pegado al borde inferior.
Con estos ajustes, el diseño se adapta a formatos como iPad Mini, iPad Pro o pantallas más pequeñas [6:28]. La clave es verificar constantemente que cada constraint refleje la intención real de posición.
Los constraints reaccionan al frame, pero cuando lo que cambia es el contenido —una lista que crece, un texto más largo—, la herramienta indicada es auto layout [7:00]. Ese es precisamente el siguiente paso para lograr interfaces verdaderamente flexibles. ¿Ya probaste redimensionar tu diseño después de aplicar constraints? Comparte cómo te fue.
