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

В Figma можно создать эффект «дырки» — прозрачного отверстия в одном слое, через которое просматривается нижележащий контент. Это достигается с помощью масок с вычитанием (Boolean Operations), а не физического удаления пикселей, поскольку Figma работает с векторной графикой. Основной способ — объединение фигур через операцию «Subtract» (Вычесть) внутри одного векторного объекта или с использованием clipping masks.

Как работает вычитание фигур в Figma

Figma — это векторный редактор, где все формы строятся на основе путей и логических операций между ними. Чтобы создать «дырку», нужно использовать Boolean Operations (логические операции). Наиболее подходящая для этого — операция Subtract (Вычесть), которая делает одну форму прозрачной в области перекрытия с другой.

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

Работает это следующим образом:

• Нижний слой — это основная форма (например, прямоугольник).
• Верхний слой — фигура, которую вы хотите «вырезать» (круг, звезда и т.д.).
• Обе фигуры должны быть выбраны, а затем применена операция «Subtract».

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

Типы Boolean Operations в Figma

Figma предлагает четыре типа логических операций:

• Union — объединяет фигуры в одну.
• Subtract — вычитает верхнюю фигуру из нижней.
• Intersect — оставляет только пересечение фигур.
• Exclude — удаляет пересечение, оставляя остальные части.

Для создания дырок используется именно Subtract. Однако важно помнить: порядок слоёв имеет значение. Figma всегда вычитает верхнюю фигуру из нижней, поэтому если круг находится под прямоугольником, вырезать им нельзя — нужно менять порядок.

Пошаговая инструкция: как вырезать дырку

Создание прозрачного отверстия в Figma — процесс из нескольких этапов. Ниже подробное руководство, подходящее как для новичков, так и для опытных пользователей.

1. Создайте основную форму. Выберите инструмент Rectangle (R), Ellipse (O) или любой другой и нарисуйте базовый слой — например, прямоугольник размером 400×200 px.
2. Добавьте фигуру-дырку. Нарисуйте поверх неё круг (или другую форму), который будет «вырезан». Например, круг диаметром 60 px по центру.
3. Выделите обе фигуры. Удерживайте Shift и кликните по каждой, или выделите рамкой.
4. Примените операцию Subtract. В верхней панели найдите иконку с четырьмя квадратами и выберите вторую — «Subtract».
5. Проверьте результат. Круг должен стать прозрачным, показывая фон или нижележащие слои.

Если ничего не произошло, возможны три причины:

• Фигуры не векторные (например, один из них — текст или изображение).
• Неправильный порядок: «дырка» ниже основной формы.
• Операция уже была применена, и объект стал составным — попробуйте разгруппировать (Detach Vector Network).

Как отредактировать вырезанную дырку

После применения Subtract вы можете продолжать редактировать составной вектор:

• Дважды щёлкните по объекту — войдёте в режим редактирования путей.
• Перемещайте, изменяйте размер или форму «дырки».
• Добавляйте новые точки, чтобы усложнить контур.
• Используйте Pen Tool для точной корректировки.

Чтобы добавить ещё одну дырку, нарисуйте дополнительную фигуру поверх, выделите её вместе с уже существующим составным вектором и снова примените Subtract.

Продвинутые методы: compound paths и frame masks

Кроме базового Subtract, в Figma есть более гибкие способы создания «дырок», особенно при работе со сложными макетами.

Compound Path — составные пути

Compound Path позволяет объединить несколько фигур в один векторный контур, где внутренние области становятся «дырками». Это мощный инструмент для логотипов или иконок с прозрачностями.

Шаги:

• Нарисуйте основную форму (например, квадрат).
• Поверх добавьте несколько фигур (круги, треугольники).
• Выделите все и нажмите правой кнопкой → «Create Compound Path» (Ctrl+Alt+C).

Теперь все верхние фигуры станут отверстиями. Отличие от Subtract в том, что Compound Path сохраняет возможность редактирования всех форм как одного объекта, но без логической операции.

Frame Masks — маскирование через фреймы

Если вам нужно, чтобы «дырка» показывала не просто прозрачность, а конкретный контент (например, изображение или другой экран), используйте маскирование фреймов.

Как это работает:

• Создайте Frame (F) нужного размера.
• Поместите внутрь фоновое изображение или контент.
• Добавьте поверх векторную фигуру, которую хотите использовать как «дырку».
• Выделите и изображение, и фигуру, нажмите правой кнопкой → «Mask with Shape».

Теперь виден только тот фрагмент контента, который попадает под форму. Это не настоящая «дырка» в слое, но визуально создаёт тот же эффект — как будто вы смотрите через окно.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при попытке «вырезать дырку» в Figma. Вот самые частые ошибки и решения.

Ошибка 1: Ничего не происходит после Subtract

Часто пользователь жмёт на Subtract, но форма не меняется. Причины:

• Фигуры не векторные. Текст, изображения, компоненты нельзя вычитать напрямую.
• Порядок слоёв: «дырка» ниже основной формы.
• Один из объектов — группа (Group). Разгруппируйте (Ctrl+Shift+G).

Решение: преобразуйте текст в контур (правый клик → «Outline Stroke»), проверьте порядок и примените операцию снова.

Ошибка 2: Прозрачность не видна

Иногда после вычитания кажется, что «дырка» чёрная или серая. На самом деле она прозрачная, но фон закрыт другими слоями.

Проверьте:

• Есть ли слой под вырезанной формой?
• Не перекрыта ли область другим фреймом или цветом?
• Правильно ли настроен режим просмотра (не включён ли Background Colour)?

Ошибка 3: Невозможно изменить форму дырки

После Subtract вы не можете просто взять и переместить «дырку». Она стала частью векторного пути.

Чтобы редактировать:

• Дважды щёлкните по объекту — войдёте в режим редактирования.
• Выберите точки контура дырки и двигайте их.
• Или отмените операцию (Ctrl+Z) и начните заново с правильным порядком.

Практические кейсы использования

Техника «вырезания дырки» активно применяется в реальных проектах. Рассмотрим несколько примеров.

Кейс 1: Логотип с прозрачным центром

Многие бренды используют логотипы с «окошками» — например, буква «О» с внутренним узором. Создаётся через Compound Path:

• Базовая буква — вектор.
• Внутри — декоративный элемент (звезда, капля).
• Объединяются через Create Compound Path.

Результат — сложная форма с контролируемой прозрачностью.

Кейс 2: Интерфейс с эффектом «лупа»

В мобильном приложении нужно показать, что пользователь смотрит сквозь экран. Решение:

• Создаём круглый Frame.
• Помещаем внутрь увеличенный фрагмент карты.
• Сверху — маска в виде круга.
• Применяем «Mask with Shape».

При анимации можно перемещать маску — эффект «движущейся лупы».

Кейс 3: Кнопка с прозрачным центром

Дизайн требует кнопку с цветным фоном, но с прозрачным кругом посередине. Используем Subtract:

• Прямоугольник с заливкой.
• Круг сверху.
• Subtract — и получаем отверстие.

Под кнопкой может быть динамическое содержимое — например, видео или карта.

Экспертное мнение

Она также отмечает важность тестирования:

• Проверяйте экспорт — особенно если используете маски.
• Убедитесь, что прозрачность сохраняется при скачивании как PNG или SVG.
• Тестируйте в разных режимах: Design, Prototype, Presentation.

Вопросы и ответы

Заключение

Создание «дырки» в Figma — это не физическое удаление, а векторная операция, основанная на логике вычитания форм. Главный инструмент — Subtract, но также полезны Compound Path и Frame Mask, в зависимости от задачи. Успешное выполнение зависит от правильного порядка слоёв, типа объектов и понимания векторной природы Figma.

• Используйте Subtract для создания прозрачных отверстий в векторных формах.
• Следите за порядком слоёв: «дырка» должна быть выше основной формы.
• Для текста и изображений сначала применяйте Outline или Mask.
• Compound Path подходит для сложных иконок с множеством отверстий.
• Frame Mask — идеален для прототипов с динамическим контентом.