Працюючи в Figma, ви коли-небудь стикалися з проблемою вибору, що використовувати: фрейм чи групу? Обидва варіанти - контейнери для розміщення об'єктів, але кожен має свої унікальні властивості та випадки використання. Не завжди очевидно, як вони відрізняються один від одного, тому, щоб допомогти вам розрізняти їх, я написав цю статтю.
Групи
Як і в інших інструментах дизайну, групи в Figma дають змогу об'єднувати кілька елементів разом в один шар верхнього рівня. Межі групи визначаються її дочірніми елементами, тому зміна розміру або переміщення цих елементів призведе до автоматичної зміни меж групи. Ви можете створити групу, вибравши об'єкти і натиснувши: ⌘ + G (Mac) або Ctrl + G (Win).
Межі групи автоматично коригуються при зміні розміру або розташування дочірніх елементів
Створення групи не є деструктивною дією - це означає, що вона не назавжди вирівнює або об'єднує шари разом. У будь-який момент ви можете розгрупувати елементи, натиснувши: ⌘ + Shift + G (Mac) або Ctrl + Shift G (Win).
Групи дійсно корисні, коли ви хочете об'єднати схожі елементи і працювати з меншою кількістю шарів. Наприклад, у вас є набір логотипів компаній, які повинні залишатися разом. Створення групи - чудовий спосіб об'єднати їх в один більш керований шар - клікнувши по будь-якому з елементів у вашій групі, ви виділите всю групу, і зможете маніпулювати ним, як єдиним об'єктом на полотні. Якщо вам потрібно вибрати певний дочірній елемент у групі, двічі клацніть по ньому.
Також всередині групи ви можете використовувати таку функцію, як Smart Selections, щоб налаштувати відстань між елементами. У наведеному нижче прикладі ви можете побачити автоматичне налаштування меж групи для відповідності загальним розмірам дочірніх елементів при зміні інтервалу.
Коли ви змінюєте розмір групи, її дочірні елементи будуть масштабуватися, як векторні зображення. Однак ефекти, контури та розміри шрифту не будуть масштабуватися. Якщо ви хочете, щоб ці властивості також масштабувалися, використовуйте інструмент масштабування (K). Якщо ви хочете застосувати обмеження, щоб визначити, як змінюватимуться розміри елементів, розгляньте можливість використання фрейму. Обмеження, застосовані до елементів, завжди стосуватимуться найближчого батьківського фрейму, а не кордонів групи. Докладніше про це в розділі, присвяченому фреймам!
Порівняння масштабування груп, що містять векторні зображення і текст, з використанням нормальної поведінки під час зміни розміру і за допомогою інструменту масштабування (K)
Фрейми
Фрейм у Figma - це те, що ми називаємо "артборд" в інших інструментах дизайну. Ми розглядаємо фрейми, як основоположний елемент проєктів, який може виступати контейнером верхнього рівня та/або представляти області або компоненти вашого дизайну. Фрейми і можливість їх вкладення є невід'ємною частиною створення динамічних макетів у Figma.
Перш ніж ми заглибимося в поведінку і властивості фреймів, давайте швидко розглянемо три різні способи їх створення.
- Виберіть інструмент "Фрейм" (F) і виберіть попередньо встановлений розмір пристрою на панелі властивостей праворуч. Це помістить новий фрейм на ваше полотно з точними розмірами будь-якого пристрою, який ви вибрали.
- Вибравши інструмент "Фрейм", клікніть і перетягніть, щоб створити новий фрейм будь-якого розміру.
- Подібно до групування, ви можете вибрати наявні елементи на полотні та помістити їх у фрейм, натиснувши: ⌘ + 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.
Переклад статті Thomas Lowry
Топ коментарі (0)