Как быстро вырезать в фигме
Каждый дизайнер, от новичка до профессионала, сталкивается с необходимостью создавать сложные и чистые векторные формы. Рисовать их вручную, точка за точкой - долго и неэффективно. Гораздо быстрее и точнее собирать их как конструктор, из простых геометрических фигур. Ключ к этому мастерству в Figma - виртуозное владение инструментом «Вырезание», основанном на логических операциях (Boolean Operations).
Эта статья - не просто описание функций, а пошаговое руководство о том, как быстро и осознанно вырезать любые формы. Мы разберем все способы - от базового вычитания до продвинутых неразрушающих техник, - чтобы вы перестали бояться сложных контуров и начали создавать их за считанные секунды. Используйте приложенную шпаргалку, чтобы всегда иметь под рукой самый эффективный метод для вашей задачи.
Вся магия происходит с четырьмя кнопками на панели инструментов, когда выделено несколько объектов: Давайте разберем их на простом примере с кругом и прямоугольником.
Union или объединение
Что делает: Представьте себе сварку. Union "приваривает" несколько фигур друг к другу, создавая единый, непрерывный векторный контур. Исходные границы между фигурами исчезают.
Зачем нужно (детальнее):
- Создание сложных силуэтов: Иконка облака собирается из нескольких кругов и овала. Иконка сердца - из двух кругов и квадрата.
- Объединение текста и фигур: Вы хотите сделать логотип, где текст неразрывно сливается с подложкой. Превратите текст в кривые (Outline Stroke), а затем объедините с фигурой-основой.
- Упрощение контура: Если у вас много overlapping (перекрывающихся) фигур, Union очистит макет, удалив все внутренние невидимые линии, оставив только внешний контур.
Процесс:
- Создайте несколько перекрывающихся фигур (например, два круга и прямоугольник).
- Выделите их все.
- Примените Union (Ctrl+E / Cmd+E).
- Теперь это один объект, с которым можно работать как с единым целым - менять заливку, обводку, редактировать общие точки контура.
Заливка и обводка итоговой фигуры наследуются у самого нижнего объекта в стэке слоев. Если вы объединяете синий квадрат (внизу) и красный круг (сверху), результат будет синим.
Subtract или вычитание
Что делает: Это ваши цифровые ножницы. Верхний объект (ножницы) безжалостно вырезается из нижнего объекта (мишени), оставляя в мишени отверстие точно по форме ножниц.
Зачем нужно (детальнее):
- Создание отверстий: Классический пример - значок "Play" (треугольник) внутри круга (кнопка). Вырезание полумесяца из круга.
- Скругление углов (продвинутый способ): Хотите сделать один скругленный угол у прямоугольника, а остальные острые? Поместите маленький круг в угол прямоугольника и вычтите его.
- Создание сложных вырезов и пазов: В UI-дизайне - вырез для камеры в макете смартфона. В дизайне иконок - прорези в шестеренке.
Процесс:
- Расположите объект-ножницы ПОВЕРХ объекта-мишени.
- Выделите оба объекта.
- Примените Subtract (Ctrl+E или Cmd+E начиная с определенной версии Figma, но лучше запомнить расположение кнопки).
- Объект-ножницы исчезнет, а в мишени появится вырез.
Figma смотрит на порядок в списке слоев. Объект, который находится в списке слоев выше, будет вырезан из объекта, который находится ниже. Всегда проверяйте панель слоев, если результат вас удивил. Можно просто поменять их местами (через панель слоев или Ctrl+[ или Ctrl+]).
Intersect или пересечение
Что делает: Intersect действует как увеличительное стекло, оставляя только самую "сокровенную" часть - область, где все выбранные объекты перекрываются. Всё, что не попало в зону пересечения, безвозвратно удаляется.
Зачем нужно (детальнее):
- Создание геометрически сложных фигур: Нужен объект в форме линзы? Пересеките два круга. Хотите получить сложный многоугольник? Пересеките несколько повернутых прямоугольников.
- Выделение общей области: Вам нужна только та часть красивого градиентного круга, которая попадает на прямоугольную плашку. Выделите круг и прямоугольник и примените Intersect.
- Кадрирование фигур: Эффективный способ обрезать фигуру по сложному контуру, а не просто по прямоугольнику.
Процесс:
- Создайте несколько перекрывающихся фигур.
- Выделите их.
- Нажмите Intersect.
- Останется только та часть, где все фигуры накладывались друг на друга.
Как и с Union, стили (заливка) итогового объекта наследуются от самого нижнего в стэке слоев.
Exclude или исключение
Что делает: Exclude - это "анти-Intersect". Он работает наоборот: он удаляет область пересечения, оставляя все остальные части фигур. Представьте, что вы вырезаете и выкидываете самую середину, а края склеиваются.
Зачем нужно (детальнее):
- Создание рамок и контуров: Классический пример - кольцо или буква "О". Создайте два концентрических круга и примените Exclude. Центр будет вырезан.
- Создание абстрактных форм и логотипов: Позволяет легко получать сложные "прорезные" формы, которые визуально интересны.
- Дизайн интерфейсов: Создание нестандартных "окон" в UI-элементах.
Процесс:
- Создайте перекрывающиеся фигуры (отлично работает с двумя фигурами).
- Выделите их.
- Нажмите Exclude.
- Область, где они пересекались, исчезнет, а оставшиеся части станут одним составным объектом.
Результат Exclude - это всегда составной контур. Дважды кликнув на нем, вы увидите как внешние, так и внутренние контуры (например, внешний и внутренний круг, если вы делали кольцо). Это нормально и ожидаемо.
Вывод
Освоение искусства вырезания в Figma - это качественный скачок в вашей карьере дизайнера. Вы переходите от простого рисования к осознанному моделированию, где любая, даже самая сложная форма, раскладывается на последовательность простых и логичных шагов.
Как мы выяснили, главная сила заключается не в одной лишь кнопке Subtract, а в комбинации всех логических операций, поддерживаемых мощью неразрушающего редактирования.
Как быстро вырезать в Figma
Вот таблица, которая суммирует все ключевые способы и горячие клавиши для быстрого вырезания.
| Цель | Способ | Инструкция | Горячие клавиши и примечания |
|---|---|---|---|
| Базовое вырезание | Subtract | Расположите объект-«ножницы» над объектом-мишенью. Выделите оба объекта. Нажмите кнопку Subtract на панели. |
Ctrl+E (Win) или Cmd+E (Mac) Порядок слоев важен! |
| Вырезание нескольких объектов | Subtract | Создайте несколько объектов-«ножниц». Выделите их все и сгруппируйте (Ctrl+G). Поместите группу над мишенью, выделите все и нажмите Subtract. |
Figma воспримет группу как единый режущий объект. |
| Создание составного контура | Union | Нарисуйте несколько фигур, которые должны стать одной. Выделите их и нажмите Union. |
Ctrl+E Полезно для создания иконок из простых фигур. |
| Вырезание с обводкой | Векторные контуры | Конвертируйте обводку в контур: Object - Outline Stroke. Теперь используйте операцию Subtract как с обычными фигурами. |
Это разрушающее действие, продублируйте объект на случай ошибки. |
| Неразрушающее редактирование | Boolean Groups | После применения любой операции вы можете дважды кликнуть на получившейся фигуре и отредактировать исходные объекты, их положение и размер. | Супер-фича Figma! Позволяет вносить правки без отмены операции. |
| Быстрая обрезка по границам | Mask (Ctrl+Alt+M) | Создайте фигуру-маску (например, прямоугольник). Поместите ее поверх контента. Выделите все и нажмите Ctrl+Alt+M или Cmd+Opt+M. |
Контент будет обрезан по границам маски. Идеально для картинок. |
Помните: лучший рабочий процесс - это быстрый и гибкий. Используйте горячие клавиши, применяйте маскирование фреймами и не бойтесь экспериментировать с составными контурами. Сохраните итоговую таблицу-шпаргалку, чтобы эти методы всегда были под рукой. Внедряйте эти приемы в свои ежедневные проекты, и вы убедитесь, что скорость и качество вашей работы в Figma выйдут на совершенно новый уровень.