Restrições definem como as camadas respondem quando você redimensiona seus quadros pai, permitindo designs responsivos para diferentes tamanhos de tela e dispositivos. Objetos dentro de um quadro são chamados de objetos filhos, enquanto o próprio quadro é o quadro pai.

As restrições possuem configurações horizontais (eixo x) e verticais (eixo y). Por padrão, os objetos são restringidos às bordas superior e esquerda do quadro pai.

Restrições horizontais

• Esquerda: mantém o objeto posicionado em relação ao lado esquerdo;
• Direita: posiciona em relação ao lado direito;
• Esquerda + Direita: o tamanho do objeto se ajusta com o quadro ao longo do eixo x;
• Centralizado: mantém o objeto centralizado horizontalmente;
• Escala: ajusta o tamanho e a posição do objeto proporcionalmente ao quadro.

Restrições verticais

• Superior: posiciona em relação à borda superior;
• Inferior: posiciona em relação à borda inferior;
• Superior + Inferior: o tamanho do objeto se ajusta com o quadro ao longo do eixo y;
• Centralizado: mantém o objeto centralizado verticalmente;
• Escala: semelhante ao escalonamento horizontal, mas para o eixo y.

As restrições também podem ser definidas visualmente usando a caixa de restrições no painel de design.

Usando restrições para design responsivo

• Alinhar objetos (por exemplo, textos, botões, imagens) com grades de layout para posicionamento preciso;
• Ajustar as restrições de cada objeto com base em como ele deve se comportar quando o quadro for redimensionado;
• Garantir que grupos ou objetos mascarados se comportem conforme o esperado, aninhando-os em quadros e reaplicando as restrições. O atalho é CTRL + ALT + G (Windows) ou Command + Option + G (Mac);
• Testar a responsividade redimensionando o quadro pai para garantir que não ocorra distorção ou desalinhamento.