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 têm configurações horizontais (eixo x) e verticais (eixo y). Por padrão, os objetos são restringidos às bordas superior e esquerda de seu 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 ajusta-se com o quadro ao longo do eixo x;

• Centro: 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 ajusta-se com o quadro ao longo do eixo y;

• Centro: mantém o objeto centralizado verticalmente;

• Escala: semelhante ao dimensionamento 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

• Alinhe objetos (por exemplo, texto, botões, imagens) com grades de layout para posicionamento preciso;

• Ajuste as restrições para cada objeto com base em como ele deve se comportar quando o quadro for redimensionado;

• Certifique-se de que grupos ou objetos mascarados se comportem conforme o esperado, aninhando-os em quadros e reaplicando restrições. O atalho é CTRL + ALT + G (Windows) ou Command + Option + G (Mac);

• Teste a responsividade redimensionando o quadro pai para garantir que não ocorra distorção ou desalinhamento.