Об'єднання фігур, маски, зображення || Figma 101

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

Об’єднання фігур

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

1. Union Selection: Об’єднуємо два елементи. Просто перетягуємо одну фігуру на іншу, виділяємо їх обидві і обираємо опцію Union Selection. Оскільки ці фігури були різних кольорів, тепер вони стали однією фігурою з одним кольором, який ми отримали від одного з елементів. Ми також бачимо, що змінилася їхня назва. Тепер це Union. Ми можемо змінити цю назву на будь-яку іншу, наприклад, назвати її “X”.
2. Subtract Selection: Якщо ми візьмемо коло і накладемо на нього ще одне менше коло, виділимо ці дві фігури і виберемо Subtract Selection, то побачимо, що в середині кола з’явилася дірка. Ось як крізь просвічується інша фігура.
3. Intersect Selection: Якщо покласти одне коло на інше і виділити їх разом, можна вибрати Intersect і обрізати їх так, що залишиться лише одна спільна частина, яка перетинає обидва кола. Це нам допомогло створити фігуру у вигляді човника, яку можна використовувати, наприклад, для створення пелюстки, листочка або ока.
4. Exclude Selection: Виділяємо два об’єкти, застосовуємо Exclude, і як бачимо, спільна частина обох фігур зникла. Залишилися лише ті частини об’єктів, які не перетинаються.

Редагування об’єднаних фігур

Навіть після об’єднання фігури все ще можна редагувати. Наприклад, якщо я виділю наш “X” і розгорну його у списку шарів, то побачу його частини. Я можу розширити одну з частин або пересунути її. Крім того, можна додавати нові елементи, а також копіювати існуючі. Наприклад, я можу скопіювати ще один прямокутник. Якщо у нас вже застосована одна з цих опцій для фігури, то її завжди можна змінити. Наприклад, замість опції Exclude можна вибрати Union.

Фігури, створені за допомогою цих операцій, об’єднуються у певну групу. Щоб роз’єднати елементи, достатньо натиснути праву кнопку миші та вибрати Ungroup. Пам’ятайте також про порядок у списку шарів. Те, що розташоване вище, вирізатиметься з того, що нижче.

Flatten Selection

П’ята опція називається Flatten Selection. Після її вибору ви більше не зможете редагувати об’єднані елементи як окремі фігури. Фігура стає цілісною, і ви зможете редагувати її лише як векторний об’єкт, але додати нові елементи вже не вдасться.

Маски

Тепер перейдемо до масок. Давайте уявимо, що ви хочете створити аватар для свого застосунку. Зазвичай, аватари мають круглу форму. Але наш персонаж частково виходить за межі кола. Що робити? Необхідно застосувати маску. Беремо коло, виділяємо його та саму фігуру персонажа і на верхній панелі натискаємо на іконку маски. Тепер персонаж знаходиться в колі. Якщо пересувати маску, то змінюється тільки видима частина персонажа.

Однак є дві проблеми. Перша: якщо спробувати пересунути об’єкт, він переміщується неправильно. Для вирішення виділяємо маску та об’єкт і натискаємо CMD+G (CTRL+G на Windows), щоб згрупувати їх. Тепер об’єкт можна пересувати, як треба. Друга проблема: після застосування маски зникає фон. Щоб це виправити, просто скопіюйте коло і вставте його ще раз, але вимкніть для нього маску. Тепер у нас є гарний аватар.

Важливо пам’ятати про порядок шарів. Якщо коло розташоване вище персонажа, то персонаж стане маскою для кола, і у вас залишиться лише силует на фоні.

Робота із зображеннями у Figma

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

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

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

На цьому все. Дякую за перегляд цього відео. Пам’ятайте ставити лайки та підписуватись, щоб не пропустити нові відео.