Обмеження у Figma: Спрощене Адаптивне Проєктування

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

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

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

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

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

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

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

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

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