Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Обмеження | Прототипування
UI/UX з Figma
course content

Зміст курсу

UI/UX з Figma

UI/UX з Figma

1. Основні Інструменти Figma
2. Створення та Організація Об'єктів
3. Створення Візуалів
4. Прототипування
5. Подання Роботи

book
Обмеження

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

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

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

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

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

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

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

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

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

1. Що в першу чергу контролюють обмеження у Figma?

2. Що відбувається, коли ви застосовуєте обмеження "Масштаб" до об'єкта?

question mark

Що в першу чергу контролюють обмеження у Figma?

Select the correct answer

question mark

Що відбувається, коли ви застосовуєте обмеження "Масштаб" до об'єкта?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 4
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt