Обмеження у Figma: Адаптивний Дизайн Без Зусиль

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

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

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

• Left: утримує об'єкт відносно лівого краю;
• Right: розташування відносно правого краю;
• Left + Right: розмір об'єкта змінюється разом із фреймом по осі x;
• Center: утримує об'єкт по центру горизонтально;
• Scale: пропорційно змінює розмір і положення об'єкта відносно фрейму.

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

• Top: розташування відносно верхнього краю;
• Bottom: розташування відносно нижнього краю;
• Top + Bottom: розмір об'єкта змінюється разом із фреймом по осі y;
• Center: утримує об'єкт по центру вертикально;
• Scale: аналогічно горизонтальному масштабуванню, але для осі y.

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

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

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