Begrænsninger definerer, hvordan lag reagerer, når du ændrer størrelsen på deres overordnede rammer, hvilket muliggør responsive designs til forskellige skærmstørrelser og enheder. Objekter inden for en ramme kaldes underordnede objekter, mens selve rammen er overordnet ramme.

Begrænsninger har vandrette (x-akse) og lodrette (y-akse) indstillinger. Som standard er objekter begrænset til øverste og venstre kanter af deres overordnede ramme.

Vandrette begrænsninger

• Venstre: holder objektet placeret i forhold til venstre side;
• Højre: placerer i forhold til højre side;
• Venstre + Højre: Objektets størrelse justeres med rammen langs x-aksen;
• Centrer: holder objektet centreret vandret;
• Skalér: justerer objektets størrelse og position proportionalt med rammen.

Lodrette begrænsninger

• Top: placerer i forhold til øverste kant;
• Bund: placerer i forhold til nederste kant;
• Top + Bund: objektets størrelse justeres med rammen langs y-aksen;
• Centrer: holder objektet lodret centreret;
• Skalér: svarer til vandret skalering, men for y-aksen.

Begrænsninger kan også indstilles visuelt ved hjælp af begrænsningsboksen i designpanelet.

Brug af begrænsninger til responsivt design

• Juster objekter (f.eks. tekst, knapper, billeder) med layoutgitter for præcis placering;
• Tilpas begrænsninger for hvert objekt baseret på, hvordan det skal opføre sig, når rammen ændres i størrelse;
• Sørg for, at grupper eller maskerede objekter opfører sig som ønsket ved at indlejre dem i rammer og genanvende begrænsninger. Genvej er CTRL + ALT + G (Windows) eller Command + Option + G (Mac);
• Test responsivitet ved at ændre størrelsen på den overordnede ramme for at sikre, at der ikke opstår forvrængning eller forkert justering.