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. Що відбувається, коли ви застосовуєте обмеження "Масштаб" до об'єкта?

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

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

Виберіть правильну відповідь

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

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

Виберіть правильну відповідь

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

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

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

Секція 4. Розділ 4
We're sorry to hear that something went wrong. What happened?
some-alt