Обмеження визначають, як шари реагують, коли ви змінюєте розмір їхніх батьківських кадрів, що дозволяє створювати адаптивні дизайни для різних розмірів екранів та пристроїв. Об'єкти в межах кадру називаються дочірніми об'єктами, тоді як сам кадр є батьківським кадром.

Обмеження мають горизонтальні (вісь x) та вертикальні (вісь y) налаштування. За замовчуванням об'єкти обмежені до верхнього та лівого країв їхнього батьківського кадру.

Горизонтальні обмеження

• Ліворуч: зберігає об'єкт відносно лівого боку;

• Праворуч: позиціонує відносно правого боку;

• Ліворуч + Праворуч: розмір об'єкта змінюється разом з кадром по осі x;

• Центр: зберігає об'єкт по центру горизонтально;

• Масштаб: пропорційно змінює розмір і позицію об'єкта відносно кадру.

Вертикальні обмеження

• Верх: позиціонує відносно верхнього краю;

• Низ: позиціонує відносно нижнього краю;

• Верх + Низ: розмір об'єкта змінюється разом з кадром по осі y;

• Центр: зберігає об'єкт по центру вертикально;

• Масштаб: аналогічно горизонтальному масштабуванню, але для осі y.

Обмеження також можна встановити візуально за допомогою вікна обмежень у панелі дизайну.

Використання обмежень для адаптивного дизайну

• Вирівнюйте об'єкти (наприклад, текст, кнопки, зображення) з сітками макета для точного позиціонування;

• Налаштовуйте обмеження для кожного об'єкта в залежності від того, як він повинен поводитися при зміні розміру кадру;

• Переконайтеся, що групи або замасковані об'єкти поводяться належним чином, вкладаючи їх у кадри та повторно застосовуючи обмеження. Швидка клавіша CTRL + ALT + G (Windows) або Command + Option + G (Mac);

• Перевірте адаптивність, змінюючи розмір батьківського кадру, щоб переконатися, що не відбувається спотворення або невідповідності.