Как вырезать в фигме

Figma прочно вошла в арсенал современных дизайнеров благодаря своему интуитивному интерфейсу и мощным возможностям для создания интерфейсов и векторной графики. Однако, переходя из других редакторов, таких как Photoshop или Illustrator, многие пользователи сталкиваются с вопросом: «Как здесь вырезать?».

Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.

В отличие от классических программ, в Figma нет универсальной волшебной кнопки «Вырезать» - вместо этого предлагается целый арсенал инструментов, каждый из которых решает конкретную задачу по манипуляции объектами. Понимание этих методов - от базового кадрирования до продвинутых булевых операций - является ключом к эффективной и точной работе.

Это руководство подробно раскроет все границы понятия «вырезать» в Figma, поможет разобраться, когда и какой инструмент применять, и позволит вам уверенно создавать любые, даже самые сложные формы.

Вычитание или subtract

Это метод создания сложных форм путем "вырезания" одной фигуры из другой.

Как это работает: Вы создаете два или более векторных объекта. Фигура, расположенная сверху (в списке слоев), действует как "нож" и вырезается из фигуры, расположенной снизу. В результате получается единый составной контур с "вырезанной" областью.

Пошаговая инструкция:

1. Создайте основную фигуру (например, прямоугольник).
2. Поместите поверх нее фигуру-«резец» (например, круг). Важно: именно ту часть, где находится круг, и вырежет.
3. Выделите оба объекта (зажав Shift).
4. Примените операцию Subtract: На верхней панели нажмите на значок объединения фигур и выберите Subtract. Или используйте горячие клавиши: Ctrl или Cmd + Alt + S.

Практическое применение:

• Создание иконок (например, конверта с отверстием для стрелки).
• Дизайн UI-элементов (кнопок с вырезанными шевронами).
• Разработка логотипов со сложной геометрией.
• Создание рамок и оконных проемов в макетах.

Важные нюансы:

• Порядок слоев критически важен. Если вырезание не сработало, проверьте в списке слоев, чтобы фигура-«резец» находилась над фигурой-основой.
• Результат - это составной контур. Вы можете его разобрать (Right Click - Separate Selection), но это необратимо разрушит исходные фигуры.
• Чтобы отредактировать вырезанную область, дважды кликните на составном контуре - вы увидите исходные фигуры и сможете изменить их размер, положение или форму.

Обрезка или маска

Обрезка 

Суть: Вы физически обрезаете края объекта, безвозвратно удаляя информацию за пределами новой границы.

Как использовать:

1. Выделите Frame или Image.
2. На панели инструментов нажмите иконку Crop (или Shift + C).
3. Потяните за угловые маркеры, чтобы задать новые границы.
4. Нажмите Enter.

Аналогия: Это как взять ножницы и отрезать лишнюю часть фотографии.

Когда использовать:

• Финальное кадрирование фотографии, когда вы уверены, что обрезанные края больше не понадобятся.
• Изменение размеров монтажной области (Frame) без масштабирования его содержимого.

Маска 

Суть: Вы накладываете на объект "трафарет". Область внутри трафарета - видима, все что снаружи - скрыто. Исходный объект остается нетронутым.

Как использовать:

Способ 1: «Use as Mask»

1. Создайте фигуру-маску (например, эллипс для круглой маски).
2. Поместите ее поверх объекта-содержимого (изображения, другого фрейма).
3. Выделите оба объекта.
4. Правый клик - Use as Mask (или Ctrl или Cmd + Alt + M).

Способ 2: «Перетаскивание внутрь» (более наглядно)

1. Создайте фигуру-маску.
2. На панели слоев просто перетащите слой с содержимым на слой с маской. Он должен оказаться внутри, как вложенный слой.

Аналогия: Это как положить фотографию под трафаретную плитку с вырезанной звездой. Вы можете двигать фотографию под плиткой, чтобы выбрать лучший вид, сама фотография при этом не страдает.

Когда использовать:

• Создание аватарок пользователей (круглые маски для фото).
• Наложение текста на изображение через маску с градиентом.
• Создание сложных композиций, где вам может понадобиться сдвинуть изображение внутри рамки.

Векторное редактирование

Это самый точный и низкоуровневый способ "вырезания", при котором вы работаете напрямую с векторным контуром, удаляя или изменяя его сегменты.

Как получить доступ:

1. Выберите любой векторный объект (прямоугольник, эллипс, линия, custom shape).
2. Нажмите Enter или кликните по иконке Edit object в верхней панели. Контур перейдет в режим редактирования, и вы увидите все его опорные точки.

Ключевые операции для "вырезания"

Удаление опорных точек

• Зачем: Упрощение контура, удаление лишних изгибов.
• Как: В режиме редактирования (Enter) кликните на точку, чтобы выделить ее, и нажмите Delete на клавиатуре. Figma автоматически перерисует контур между соседними точками.

Разрыв контура (Break curve)

Зачем: Чтобы "разрезать" замкнутый контур на две отдельные линии или сделать отверстие.

Как:

1. В режиме редактирования выделите одну или несколько точек.
2. В правой панели найдите раздел "Path" и нажмите иконку Break curve (или используйте контекстное меню).
3. Теперь вы можете перемещать сегменты независимо друг от друга.

Удаление сегмента контура

Зачем: Удалить целый участок пути между двумя точками.

Как:

1. В режиме редактирования наведитесь на сам сегмент (линию между точками), а не на точки.
2. Кликните, чтобы выделить сегмент. Он подсветится.
3. Нажмите Delete.

Практическое применение

• Исправление готовых иконок: Удаление лишней линии, которая пошла не туда.
• Создание собственных форм: Нарисовали грубый контур пером, а теперь уточняете его, удаляя лишние точки.
• Подготовка контуров для анимации или экспорта.

Используйте горячие клавиши в режиме редактирования:

• V - Вернуться к инструменту "Cursor".
• P - Активировать "Pen Tool" для добавления новых точек.
• Ctrl или Cmd + Click по точке - переключить ее тип (Mirror или Disconnected или Asymmetric).

Вывод

Освоение различных методов вырезания в Figma - это не просто изучение функционала, а фундаментальный шаг к переходу от простого монтажа к осознанному векторному моделированию.

Как мы выяснили, не существует одного единственного способа; вместо этого мы выбираем оптимальный инструмент под задачу: быстро обрезаем фотографию (Crop), создаем сложные геометрические фигуры (Subtract), гибко ограничиваем видимость (Mask) или точечно редактируем контуры (Pen Tool). Для структурирования информации мы подготовили таблицу:

Что вы хотите сделать	Инструмент	Как это работает	Пошаговая инструкция	Для чего используется
Обрезать изображение или рамку	Инструмент «Crop»	Позволяет изменить границы фрейма или изображения, скрывая часть контента.	Выделите Frame или Image. На панели инструментов нажмите иконку «Crop» (или нажмите Shift + C). Потяните за угловые маркеры, чтобы изменить область обрезки. Нажмите «Done» или Enter.	Быстрое кадрирование фотографий, скрытие ненужных частей дизайна внутри фрейма.
Вырезать фигуру из другой	Boolean Operations	Объединение нескольких векторных объектов в один сложный контур.	Выделите 2 или более векторных объекта (например, прямоугольник и круг). На панели инструментов выберите нужную операцию: - Subtract (Вычесть): самая частая операция «вырезания».	Создание сложных иконок, логотипов, нестандартных форм из простых примитивов.
Удалить часть контура вектора	Pen Tool (Перо) & Point Editing	Редактирование опорных точек векторного контура.	Выделите векторный объект. Перейдите в режим редактирования вектора (нажмите Enter или кликните по иконке «Edit object»). Выделите ненужные опорные точки и нажмите Delete.	Тонкая работа с собственноручно нарисованными векторными формами, удаление лишних сегментов.
«Вырезать» для вставки в другом месте	Клавиши Ctrl или Cmd + X	Стандартная операция операционной системы.	Выделите любой объект (слой, группа, frame). Нажмите Ctrl + X (Windows) или Cmd + X (Mac). Объект исчезнет с текущего места и будет помещен в буфер обмена. Перейдите в нужное место и нажмите Ctrl или Cmd + V для вставки.	Быстрое перемещение объектов между страницами, файлами или в пределах монтажной области.
Создать маску	Masking	Один объект (маска) определяет видимую область другого объекта (контента).	Способ 1 (Use as Mask): Поместите объект-маску (например, круг) поверх объекта-контента (например, фото). Выделите оба объекта. Кликните правой кнопкой - «Use as Mask» (или Ctrl или Cmd + Alt + M). Способ 2 (Inside): Перетащите объект-контент на слой-маску на панели слоев.	Создание фотографий в круге, сложных обтравленных изображений, когда нужно не удалить, а скрыть часть контента.

 

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