Restricciones

Restricciones definen cómo responden las capas cuando redimensionas sus marcos principales, permitiendo diseños responsivos para diferentes tamaños de pantalla y dispositivos. Los objetos dentro de un marco se llaman objetos hijos, mientras que el marco en sí 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;
• Centro: mantiene el objeto centrado horizontalmente;
• Escala: 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;
• Centro: mantiene el objeto centrado verticalmente;
• Escala: similar al escalado horizontal pero para el eje y.

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

Usando restricciones para diseño responsivo

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