Як використовувати автоматичний макет у Figma

Auto Layout є важливим інструментом для кожного дизайнера та користувача Figma. Ця функція дозволяє вносити такі зміни, як зміна розміру або положення кадрів і об’єктів. Auto Layout дозволить вам регулювати висоту та вагу елемента, наприклад, за допомогою автоматичного налаштування, скорочуючи вашу роботу наполовину.

Оскільки розмір екрана змінюється залежно від пристрою чи браузера, який користувач використовуватиме для доступу до веб-сайту, автоматичний макет робить елементи всередині фреймів адаптованими до цих змін. Це робить макет і структуру більш точними та взаємодіючими. Читайте далі, щоб дізнатися, як використовувати Auto Layout у Figma та його функції.

Використання автоматичного макета

Щоб використовувати автоматичний макет і всі його функції, ви повинні спочатку додати його до фрейму, над яким ви працюєте. Це може бути новий фрейм або кадр із вмістом, об’єктами та компонентами. Після того, як ви виберете рамку або об’єкти, ось як додати до них автоматичний макет:

• Натисніть «Alt + A» на клавіатурі (працює на Mac і Windows).
• Клацніть правою кнопкою миші на об’єктах або компонентах і виберіть «Автоматичний макет» (ви повинні додати цю функцію до кожного компонента, оскільки це неможливо одночасно).
• Торкніться значка плюса біля опції «Автоматичний макет» у меню на Figma.

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

Додавання та видалення об’єктів

Додати об’єкти до кадру досить просто. Вам потрібно лише схопити об’єкт, який ви хочете додати, і стежити за індикатором. І якщо ви збираєтеся видалити один, перетягніть його назад і натисніть видалити. Якщо ви вирішите додати об’єкт, більший за батьківський фрейм, вам потрібно буде уникнути стандартних налаштувань Figma, щоб мати можливість це зробити. Ви можете зробити це, утримуючи кнопку «Ctrl» для Windows і «Command» для Mac.

Дублювання об'єктів

Якщо ви хочете додати два або більше ідентичних об’єктів до кадру, ви можете дублювати їх, що є корисною функцією автоматичного накладання шарів. Ось як ви можете це зробити:

1. Торкніться об’єкта, який потрібно скопіювати.
   
2. Одночасно утримуйте кнопки «Ctrl» і «D», якщо у вас Windows.
   
3. Для Mac дублюйте, утримуючи кнопки «Command» і «D».
   

Розташування об’єктів

Якщо вам не подобається зовнішній вигляд вашої рамки та організація об’єктів і компонентів у ній, ви можете змінити їх порядок. Якщо ви об’єднали два шари, вам потрібно обійти параметри Figma за замовчуванням, натиснувши «Ctrl» для Windows і «Command» для Mac, щоб отримати доступ до опції глибокого вибору та перемістити компонент із початкового шару. Однак, якщо це один кадр, ви можете вибрати об’єкт і перемістити його в інше місце, подібно до додавання об’єктів, або скористатися клавішею зі стрілкою.

Автоматичні рівні макета

Ще одна функція автоматичного макета — об’єднання кількох кадрів в один для створення складнішого інтерфейсу, де можна накладати різні рівні автомакетів, як-от кнопки та рядки кнопок, публікацію та часову шкалу. Кожен рівень дозволяє додавати ще один об’єкт до вашої рамки. Рівні кнопок і рядків кнопок є горизонтальними, а публікація – це вертикальний шар, де можна вводити описи, зображення тощо.

Коли ви складаєте два кадри разом, вони зливаються й отримують властивості батьківського кадру. Це дозволяє користувачеві впроваджувати регульовані об'єкти. Ви можете взяти один і покласти його на інший, щоб з’єднати два кадри. Для цього вам необхідно:

1. Виберіть один кадр і все, що ви хочете додати до нього.
   
2. Натисніть «Shift + A», щоб додати рамку автоматичного макета.
   

Функції автоматичного макета

Параметр Auto Layout у Figma має багато цінних властивостей або функцій, від напрямку та порядку укладання до інтервалів, зміни розміру та вирівнювання. У цьому розділі ми розповімо про кожну з цих функцій більш детально.

Напрямок

Як випливає з назви, напрямок стосується порядку об’єктів у кадрі. При використанні автоматичного макета об’єкти можна розміщувати:

• Вертикально – об’єкти розміщуються на осі y. Цей параметр підходить для списків, меню, стрічок новин тощо.
• По горизонталі – об’єкти та компоненти на осі X (кнопки, піктограми тощо).
• Розташування обтікання – об’єкти встановлюються в кількох стовпцях і рядках.

Порядок укладання

Ви можете вибрати, який порядок укладання найкраще підходить для вашої рами. Це лише візуальна зміна, оскільки порядок укладання залишається незмінним (якщо це 1,2,3, він залишається 1,2,3, але з візуальними коригуваннями). Коли об'єкти накладаються один на одного, ви можете вибрати, який з них буде зверху. Так, наприклад, якщо у вас є три речі, позначені 1, 2 і 3, ви можете або 1, або 3. Ось як ви можете це зробити:

1. Виберіть рамку Auto Layout.
   
2. Перейдіть до опції Auto Layout праворуч на екрані.
   
3. Торкніться трьох горизонтальних крапок, щоб відкрити додаткові параметри.
   
4. Знайдіть опцію «Canvas Stacking».
   
5. Виберіть «Перший зверху» або «Останній зверху».
   

Абсолютна позиція

Іншою властивістю «Потік шару» є абсолютна позиція, окрім порядку та напрямку укладання. Ця функція дозволяє розміщувати об’єкт у будь-якому місці, ігноруючи межі рамки. Увімкнути це можна так:

1. Візьміть предмет і помістіть його в рамку.
   
2. У меню праворуч біля значень «X» і «Y» торкніться значка, що нагадує квадрат без країв із плюсом усередині.
   
3. Перемістіть об'єкт по лініях рамки.
   

Налаштування розриву

Є кілька функцій, які можна налаштувати, коли йдеться про відстань, наприклад проміжок. Ви можете змінити проміжок двома способами: автоматично та введенням певного проміжку. Якщо ви хочете, щоб ваш проміжок був якомога більшим, тоді вам потрібно вибрати автоматичне налаштування в меню Auto Layout. Але якщо ви збираєтеся ввести свої значення, введіть їх у призначені поля.

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

Налаштування вирівнювання

Після налаштування напрямків, відступів і проміжків ви можете налаштувати вирівнювання дочірнього об’єкта у вашому кадрі, оскільки ця функція залежить від налаштувань інтервалу. Ви не можете змінити вирівнювання кожного об'єкта, але виберіть шаблон, запропонований у меню Auto Layout. Ви можете натиснути на сітку 3×3 у меню та вибрати потрібне вирівнювання. Це можна зробити за допомогою клавіш зі стрілками або кнопок WSAD на клавіатурі.

Крім того, тут можна вибрати автоматичне налаштування для перемикання горизонтального та вертикального вирівнювання в рядку. З певними значеннями ви можете мати всі дев’ять варіантів (верхній лівий кут, нижній лівий кут, ліворуч, правий лівий, нижній правий тощо).

Ви також можете налаштувати вирівнювання тексту, увімкнувши цю опцію в меню та утримуючи кнопку «B».

Зміна розміру

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

Ви можете вибрати фіксоване значення або встановити максимально чи мінімально можливі розміри ширини та висоти. Hug content дозволяє регулювати розмір рамки на основі дочірнього об’єкта, тоді як параметр заповнення контейнера змінює розмір об’єкта відповідно до батьківської рамки.

Створення унікальних рамок за допомогою автоматичного макета

Auto Layout, як одна з важливих функцій Figma, може налаштувати рамку, об’єкти та відділення в ній відповідно до ваших уподобань. Його властивості та властивості численні, що дозволяє створити якісний і акуратний виріб. Auto Layout — це основний інструмент, яким ви повинні оволодіти, перш ніж працювати у Figma.

Яку функцію Auto Layout ви використовуєте найчастіше? Повідомте нам у розділі коментарів нижче.