Vincoli definiscono come i livelli rispondono quando si ridimensionano i frame genitori, consentendo design responsivi per diverse dimensioni di schermo e dispositivi. Gli oggetti all'interno di un frame sono chiamati oggetti figli, mentre il frame stesso è il frame genitore.

I vincoli hanno impostazioni orizzontali (asse x) e verticali (asse y). Per impostazione predefinita, gli oggetti sono vincolati ai bordi superiore e sinistro del loro frame genitore.

Vincoli orizzontali

• Sinistra: mantiene l'oggetto posizionato rispetto al lato sinistro;
• Destra: posiziona rispetto al lato destro;
• Sinistra + Destra: la dimensione dell'oggetto si adatta al frame lungo l'asse x;
• Centro: mantiene l'oggetto centrato orizzontalmente;
• Scala: adatta la dimensione e la posizione dell'oggetto proporzionalmente al frame.

Vincoli verticali

• Superiore: posiziona rispetto al bordo superiore;
• Inferiore: posiziona rispetto al bordo inferiore;
• Superiore + Inferiore: la dimensione dell'oggetto si adatta al frame lungo l'asse y;
• Centro: mantiene l'oggetto centrato verticalmente;
• Scala: simile alla scalatura orizzontale ma per l'asse y.

I vincoli possono anche essere impostati visivamente utilizzando la casella dei vincoli nel pannello di progettazione.

Utilizzo dei vincoli per il design responsivo

• Allineare oggetti (ad esempio, testo, pulsanti, immagini) con le griglie di layout per un posizionamento preciso;
• Regolare i vincoli per ogni oggetto in base a come deve comportarsi quando il frame viene ridimensionato;
• Garantire che gruppi o oggetti mascherati si comportino come previsto, annidandoli nei frame e riapplicando i vincoli. La scorciatoia è CTRL + ALT + G (Windows), oppure Command + Option + G (Mac);
• Testare la reattività ridimensionando il frame genitore per assicurarsi che non si verifichino distorsioni o disallineamenti.