Фрейми та групи в Figma. Посібник з використання

Figma та її інструменти популярні серед UX/UI-, графічних дизайнерів, дизайнерів інтер'єрів та спеціалістів інших напрямів. Розбираємося, як створювати фрейми та різні групи у Figma та керувати ними.

освойте професію
UX/UI-дизайнер з нуля
за 9 тижнів

Коротко про Figma та її інструменти

Figma — програма, в якій можна працювати з вектором, створювати повноцінні веб-сайти, інтерфейси користувача та креативний дизайн. Серед користувачів Figma є великі корпорації: Google та Netflix.

У програмі можна працювати індивідуально та створювати цілі групові проекти, тому Figma є популярним інструментом для командної роботи над великими проектами.

Фрейми Figma відіграють роль деяких полотнів, як, наприклад, в Adobe Illustrator — всі елементи всередині цієї конкретної робочої області об'єднуються. Це можна побачити на панелі шарів. Frame 1 поєднує в собі всі прямокутники, що знаходяться в ньому.

Простий приклад кадру у Figma

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

Зовнішній вигляд групи у Figma

У Figma можна використовувати гарячі кнопки для роботи, у тому числі й для управління кадрами та групами. У різних операційних системах певні клавіші можуть відрізнятися: Ctrl у Windows – це Cmd у MacOS.

Нещодавно розробники Figma випустили оновлення UI3, в якому змінилося розташування робочих інструментів. Тепер основні функції верхнього правого кута розташовані внизу.Панелі меню ліворуч і праворуч тепер винесені окремо, вони не вбудовані в робочу область, як було раніше. Незабаром це оновлення буде доступне всім користувачам.

Стати графічним дизайнером, навчаючись на реальних завданнях

Фрейми у Figma

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

За допомогою такого об'єднання можна змінювати всі об'єкти одразу, а не окремо. У кадрах використовують сітки, елементи фону та можливість обрізати контент по контейнеру.

Як створити кадр

Інструмент кадру можна знайти в панелі основних інструментів у верхньому лівому куті або внизу по центру в залежності від версії. Позначається інструмент кадру знаком решітки - #.

Фрейм можна зробити будь-якого розміру: натиснути на робочу область і потягнути курсор у потрібному напрямку. Курсор у цей час змінюється на плюс. За кадром закріплено гарячу клавішу F.

За замовчуванням кадри називаються Frame 1 або Frame 2 по порядку створення, але ім'я завжди можна змінити на панелі шарів. Розмір, колір та ефекти кадру відображаються праворуч.

Інструмент створення кадру у Figma

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

Шаблони для дизайну у Figma

Створити кадр можна з картинок, векторних об'єктів та інших вже існуючих елементів на робочій області. Для цього потрібно їх виділити, клацнути правою кнопкою миші та вибрати пункт Frame Selection. Можна скористатися послідовністю клавіш Ctrl+Alt+G.

Створений із векторних фігур кадр у Figma

Як змінити розмір кадру

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

Якщо потрібно змінити масштаб кадру та об'єктів, але співвідношення розмірів залишити колишнім, можна використовувати інструмент Scale. Він знаходиться серед панелі інструментів у самому лівому списку. Курсор зміниться на подвійну стрілку - тепер можна змінювати розмір усієї роботи.

Зміна розміру кадру та його об'єктів за допомогою інструмента Scale --> --> -->

10 плагінів для Figma на основі штучного інтелекту

Як створити або перемістити елементи всередині кадру

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

Закріплення об'єктів у кадрі через Constraints

Коли ви створюєте або переміщаєте елементи по області кадру, з'являється функція, яка їх закріплює. Функція Clip Content стежить, щоб об'єкти, що створюються на площі кадру відразу прикріплювалися до нього і обрізалися, якщо якась їх частина виходить за межі.

За замовчуванням Clip Content вибрано у списку або позначено галочкою в правій панелі Layout — якщо її вимкнути, елементи створюватимуться незалежно від кадру, навіть якщо знаходяться на його області.

Функція Clip Content у кадру Figma

Як видалити кадр

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

Якщо потрібно прибрати кадр, але при цьому залишити об'єкти, можна клацнути правою кнопкою миші на пункт Ungroup. Функція Ungroup видаляє кадри та групи, але залишає всі створені об'єкти.

професія | 20 місяців

графічний дизайнер з нуля до про

Стати дизайнером, який потрібен у маркетингу, PR, IT. Дамо не лише знання, а й реальний досвід у професії

Як експортувати кадр

Функція Export розміщується в правій панелі в самому низу. Програма пропонує різні формати експорту та дозволу: PDF, JPG, PNG і SVG. Для експорту в JPG і PNG можна вибрати якість від 1 до 4х. Чим вище, тим краще якість у підсумкової картинки.

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

Експорт та прев'ю кадру у Figma

Групи у Figma

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

Як створити групу

Група – це сукупність двох і більше елементів. Щоб створити групу, потрібно клацнути на вибрані об'єкти правою кнопкою миші та вибрати Group Selection або скористатися гарячими клавішами Ctrl+G.

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

Як змінити розмір об'єктів у групі

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

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

Зміна розміру всіх об'єктів групи у Figma

Як видалити групу

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

Як експортувати файли до груп

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

Експорт групи до Figma

Як об'єднати об'єкти за допомогою Boolean Groups

Boolean Groups або булеві операції створює одну об'єднану форму із двох і більше об'єктів. Після того, як ви виділите потрібні елементи, функція з'явиться зверху або в правому меню під піктограмою багатокутної фігури.

За допомогою Boolean Groups можна створити Union - об'єднання, Subtract - віднімання, а ще Intersect - перетин та Exclude - виняток. На прикладі подивимося, як поводяться функції при створенні комплексної форми із двох квадратів.

Застосування об'єднання через Boolean Groups

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

Серед Boolean Groups окремо виділено Flatten Selection - ще одна функція для перетворення групи на єдиний, «плоский» вектор. Після застосування Flatten Selection не можна розділити суміщені об'єкти — в панелі шарів це буде єдиний вектор, на відміну інших об'єднань. Для Flatten Selection можна використовувати гарячі клавіші Ctrl+E.

Функція Flatten Selection у Boolean Groups

Додаткові поради

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

Створення кадрів та груп на панелі шарів у Figma

Всі гарячі клавіші для інструментів груп, фреймів, об'єднань та інших функцій програми можна знайти так: клацнути на іконку Figma у верхньому лівому кутку, вибрати Help and Account — Keyboard Shortcuts. Для швидкого виклику цієї панелі також є свої гарячі клавіші Ctrl+Shift+?.

Список гарячих клавіш Figma

Всередині кадрів та груп, як і просто на робочій області Figma, можна переміщати об'єкти на передній та задній план. Для цього потрібно вибрати Bring to Front або Send to Back у пунктах правої кнопки миші або використовувати клавішу [, щоб відправити об'єкт на задній план, та клавішу ] для переднього плану.

Переміщення згрупованих об'єктів на передній та задній план

У Figma є ще один інструмент визначення порядку серед об'єктів. Auto Layout. Якщо коротко, цей інструмент допомагає вирівнювати вибрані елементи та створювати адаптивний дизайн.

Функція Auto Layout у Figma

Фрейми мають перевагу для дизайнерів — у них можна налаштувати модульні сітки. Модульні сітки застосовуються лише усередині кадру; у групі ця функція не відображається у правому меню.

Сітки розповсюджуються на всю довжину кадру і можуть складатися з колонок, рядів або їх комбінацій.

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

Загалом, в панелі шарів групи та фрейми поводяться як звичайні шари, тільки з вкладеними в них елементами. А це зручно.

Як змінити розмір кадру разом із вмістом Фігма?

Минулого разу ми розглянули, як прискорити роботу з об'єктами та інтерфейсом програми. Сьогодні — заключна частина поради про гарячі клавіші та трюки, які допомагають працювати у Фігмі швидше.

Прискорення роботи з компонентами

Можна створити кілька компонентів одночасно. Для цього виберіть об'єкти, які хочете перетворити на компоненти, та натисніть стрілку біля іконки Create Component у верхній панелі. У списку натисніть Create Multiple Components.

Зазвичай зауваження щодо макету залишають інструментом Add → Show Comments, а нотатки для розробників краще писати відразу в ЦСС. Для цього виберіть Master Component та введіть текст у полі Description, яке з'явиться у правій панелі. Текст з'явиться у вигляді коментаря в ЦСС, який побачать розробники.

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

Додаток Figma Mirror

Творці Фігми розробили мобільний додаток Figma Mirror, щоб ви могли протестувати свій дизайн на телефоні наживо. Завантажте програму, увійдіть під своїм обліковим записом, потім виберіть будь-який кадр у документі на комп'ютері і він з'явиться в програмі.