Як працюють групи та кадри у Figma

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

Групи

Як і в інших інструментах дизайну, групи Figma дозволяють об'єднувати кілька елементів разом в один шар верхнього рівня. Кордони групи визначаються її дочірніми елементами, тому зміна розміру чи переміщення цих елементів призведе до автоматичної зміни меж групи. Ви можете створити групу, вибравши об'єкти та натиснувши: ⌘ + G (Mac) або Ctrl + G (Win). Межі групи автоматично коригуються при зміні розміру або розташування дочірніх елементів. Створення групи не є деструктивною дією – це означає, що вона не назавжди вирівнює або об'єднує шари разом. У будь-який момент ви можете розгрупувати елементи, натиснувши: ⌘ + Shift + G (Mac) або Ctrl + Shift G (Win). Групи дійсно корисні, коли ви хочете поєднати схожі елементи і працювати з меншою кількістю шарів. Наприклад, ви маєте набір логотипів компаній, які повинні залишатися разом. Створення групи - відмінний спосіб об'єднати їх в один більш керований шар - клікнувши по будь-якому з елементів у вашій групі, ви виділіть усю групу, і зможете маніпулювати їм як єдиним об'єктом на полотні. Якщо вам потрібно вибрати певний дочірній елемент у групі, двічі клацніть по ньому.Також всередині групи можна використовувати таку функцію, як Smart Selections, щоб налаштувати відстань між елементами. У наведеному нижче прикладі ви можете побачити автоматичне налаштування меж групи для відповідності загальним розмірам дочірніх елементів при зміні інтервалу. Коли ви змінюєте розмір групи, її дочірні елементи масштабуватимуться, як векторні зображення. Однак ефекти, контури та розміри шрифту не масштабуватимуться. Якщо ви хочете, щоб ці властивості також масштабувалися, використовуйте інструмент масштабування (K). Якщо ви хочете застосувати обмеження, щоб визначити, як будуть змінюватися розміри елементів, розгляньте можливість використання кадру. Обмеження, що застосовуються до елементів, завжди будуть ставитись до найближчого батьківського кадру, а не до кордонів групи. Докладніше про це у розділі, присвяченому фреймам! Порівняння масштабування груп, що містять векторні зображення та текст, з використанням нормальної поведінки при зміні розміру та за допомогою інструмента масштабування (K)

Фрейми

1. Виберіть інструмент «Фрейм» (F) і виберіть встановлений розмір пристрою на панелі властивостей праворуч. Це помістить новий кадр на ваше полотно з точними розмірами будь-якого пристрою, який ви вибрали.
2. Вибравши інструмент «Фрейм», натисніть та перетягніть, щоб створити новий кадр будь-якого розміру.
3. Подібно до групування, ви можете вибрати існуючі елементи на полотні і помістити їх у кадр, натиснувши: ⌘ + Opt + G (Mac) або Ctrl + Alt + G (Win).

Якщо ви хочете зробити навпаки і видалити контейнер батьківського кадру, поєднання клавіш буде таким самим, як і при розгрупуванні: ⌘ + Shift + G (Mac) або Ctrl + Shift + G (Win).Тепер давайте заглибимося в унікальні можливості та варіанти використання фреймів.

Розміри кадрів

Розміри кадрів встановлюються незалежно від своїх дочірніх елементів. Якщо ви переміщаєте або масштабуєте дочірні елементи всередині кадру, його межі автоматично не коригуватимуться. Якщо ви хочете, щоб розмір кадру підлаштовувався під вміст, ви можете натиснути кнопку «Resize to Fit» на панелі властивостей праворуч.

Межі кадру не підлаштовуються автоматично під вміст. Якщо вам потрібно зробити це, виберіть параметр "Resize to Fit" на панелі властивостей

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

Зміна розміру з обмеженнями

При зміні розміру фрейми та групи поводяться по-різному. Як уже згадувалося раніше, розмір груп змінюватиметься подібно до векторних зображень. Розміри кадру будуть змінені незалежно від дочірніх елементів. Однак, ви можете встановити обмеження, які впливають на зміну розміру цих дочірніх елементів щодо їх батьківського кадру. За промовчанням ці обмеження встановлені на «Top» та «Left».

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

Порада: якщо ви хочете ігнорувати обмеження при зміні розміру кадру, утримуйте клавішу ⌘ (Mac) або Ctrl (Win) під час перетягування кадру.

Контент, що виходить за кордон кадру

Оскільки межі кадру можна регулювати незалежно від його дочірніх елементів, функція «clip content» (доступна на правій панелі властивостей) може використовуватись у різний спосіб. Ось кілька поширених прикладів:

• Приховування контенту за межами кордонів: Функція "clip content" (обрізати контент) дозволяє приховати будь-яку частину елемента, що виходить за межі кадру.

• Відображення вмісту за межами кордонів: Відключаючи функцію «clip content», можна ввімкнути відображення елементів, що виходять за межі ваших кадрів. Наприклад, якщо ви хочете створити кадр, що містить цитату з лапкою, ви можете змінити розмір кадру так, щоб його межі були вирівняні по лівому краю текстового поля, залишаючи лапку за межами кадру. У подібних ситуаціях так набагато простіше вирівняти об'єкти у вашому дизайні.

• Розкриття додаткового контенту: Встановивши належні обмеження та увімкнувши «clip content», ви зможете створювати фрейми та компоненти, які розкривають більше контенту під час розширення. Наприклад, у вас є меню, що випадає, яке використовується в різних місцях з різною кількістю опцій. Це дає вам простий спосіб показати більше пунктів меню, лише змінивши розмір кадру.

• Контент, що виходить за кордон кадру, у прототипі: Елементи, які виходять за межі кадру, можна налаштувати для прокручування всередині прототипу. Наприклад, ви використовуєте кадр для розміщення каруселі, що прокручується.Ви можете налаштувати поведінку виходу за кордон таким чином, щоб її можна було прокручувати під час перегляду в режимі прототипу.

Сітки

Сітки макетів (Layout grids) є унікальною функцією кадрів і можуть застосовуватися до будь-якого кадру або компонента у вашому дизайні. Це дійсно корисно, тому що іноді ви хочете, щоб області вашого дизайну мали власні незалежні сітки. Обмеження зміни розміру Figma також можуть працювати в поєднанні з сітками макетів. У наведеному нижче прикладі ви можете бачити, що на верхньому рівні є сітка з 2 стовпців і вкладений вторинний кадр для панелі вкладок, який має власну сітку з 3 стовпців. При установці обмежень, коли розмір кадру верхнього рівня змінюється, дочірні елементи змінюють розмір сітки макету.

Висновок

Ви можете по-різному використовувати групи та кадри (разом чи окремо) для досягнення різних результатів.

Коротко про головне. Використовуйте групи, якщо:

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

Коротко про головне. Використовуйте кадри, якщо:

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

Докладніше про використання фреймів та груп читайте у нашій статті.

Якщо ви хочете побачити, як створювалися приклади цієї статті, натисніть тут, щоб додати копію файлу в Figma.

Як поєднати у фігмі: елементи, шари, фігури. 4 найкращі способи.

Сьогодні розповім як об'єднати у фігмі (Figma). Ви дізнаєтесь 4 простих способи, як поєднувати елементи, шари, векторні фігури, об'єкти і т.д. Розглянемо як згрупувати елементи за допомогою інструмента група «Group» та кадр «Frame». Також поговоримо про «Union selection» та «Flatten selection».

Як об'єднати елементи в групу у фігмі

Щоб об'єднати елементи в групу (згрупувати їх), натисніть на комбінацію гарячих клавіш «Ctrl + G». На панелі шарів можна побачити іконку групи у цих елементів. Якщо натиснути на стрілку навпроти групи в шарах, зможете побачити всі елементи, які є всередині.

Об'єднання елементів у Figma за допомогою кадру

Ви можете об'єднати елементи за допомогою кадру. Щоб зробити кадр навколо елементів, оберіть його в панелі інструментів зверху і намалюйте його навколо потрібних об'єктів. Також для створення кадру можете скористатися гарячими клавішами «Ctrl+Alt+G»

Як розгрупувати у фігмі

Щоб розгрупувати елементи з групи або кадру у фігмі, натисніть на клавіатурі 3 клавіші «Ctrl + Shift + G». Також можна натиснути праву клавішу миші і вибрати пункт Ungroun selection.

Об'єднуємо векторні фігури за допомогою Union selection»

Щоб об'єднати векторні фігури та елементи за допомогою функції Union selection, виберіть 2 або більше векторних елементів. Зверху де є іконка Boolean Groups виберіть пункт Union selection.

Об'єднання елементів у фігмі за допомогою «Flatten seleciton»

Для поєднання елементів можна скористатися функцією Flatten selection. Для цього виберіть потрібні елементи і виберіть цей напис зі списку зверху.

Відмінності «Union selection» та «Flatten seleciton» у Figma

При групуванні елементів за допомогою функції Union selection, ви зможете редагувати фігури стандартним чином. Наприклад, якщо ви створите прямокутник за допомогою стандартного інструменту «Rectangle», його можна заокруглити за допомогою чотирьох точок на кутах.

Якщо редагуватимете векторні елементи у групі «Flatten selection», то з'являтимуться векторні точки. За допомогою їх можна змінювати розміри елементів.

Висновок

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

P.S. Якщо хочете отримати подарунок та матеріали, які допомагають робити дизайн сайтів у Фігмі швидше, то натисніть на це посилання.

P.P.S. Проект та автор не пов'язаний з компанією Figma (Not affiliated with Figma).