Las restricciones definen cómo responden las capas cuando se cambia el tamaño de sus marcos principales, permitiendo diseños responsivos para diferentes tamaños de pantalla y dispositivos. Los objetos dentro de un marco se denominan objetos secundarios, mientras que el propio marco es el marco principal.

Las restricciones tienen configuraciones horizontales (eje x) y verticales (eje y). Por defecto, los objetos están restringidos a los bordes superior e izquierdo de su marco principal.

Restricciones horizontales

• Izquierda: mantiene el objeto posicionado en relación con el lado izquierdo;
• Derecha: posiciona en relación con el lado derecho;
• Izquierda + Derecha: el tamaño del objeto se ajusta con el marco a lo largo del eje x;
• Centrar: mantiene el objeto centrado horizontalmente;
• Escalar: ajusta el tamaño y la posición del objeto proporcionalmente al marco.

Restricciones verticales

• Superior: posiciona en relación con el borde superior;
• Inferior: posiciona en relación con el borde inferior;
• Superior + Inferior: el tamaño del objeto se ajusta con el marco a lo largo del eje y;
• Centrar: mantiene el objeto centrado verticalmente;
• Escalar: similar al escalado horizontal pero para el eje y.

Las restricciones también se pueden establecer visualmente utilizando el cuadro de restricciones en el panel de diseño.

Uso de restricciones para diseño responsivo

• Alinear objetos (por ejemplo, texto, botones, imágenes) con cuadrículas de diseño para una posición precisa;
• Ajustar las restricciones de cada objeto según cómo debe comportarse cuando se cambia el tamaño del marco;
• Asegurar que los grupos u objetos enmascarados se comporten como se espera anidándolos en marcos y volviendo a aplicar las restricciones. El atajo es CTRL + ALT + G (Windows), o Command + Option + G (Mac);
• Probar la capacidad de respuesta cambiando el tamaño del marco principal para asegurar que no haya distorsión o desalineación.