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

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

Figma — мощный инструмент для векторного дизайна, который активно используется как начинающими, так и профессиональными UI/UX-дизайнерами. Одной из ключевых задач при работе с интерфейсами является создание сложных форм, включая элементы с прозрачными включениями — например, кнопки с отверстиями, логотипы с вырезами, декоративные рамки или иконки с внутренними пустотами. Такие эффекты визуально оживляют макет, добавляют глубину и стиль. Однако новички часто сталкиваются с вопросом: как правильно сделать дырку в фигуре, чтобы результат был точным и редактируемым?

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

Что значит «сделать дырку в фигуре»?

Когда мы говорим о «дырке» в фигуре, имеется в виду прозрачный участок внутри непрозрачного объекта. Например, квадрат с круглым отверстием по центру. С точки зрения дизайна, это не два отдельных элемента, а единая форма, где часть заполнения удалена. Такой эффект часто используется в логотипах (например, буква «О» с внутренним контуром), кнопках-обводках, карточках с окнами или декоративных элементах.

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

Булевы операции в Figma включают:

• Объединить (Union) — соединяет фигуры в одну;
• Вычесть (Subtract) — вычитает верхнюю фигуру из нижней;
• Пересечение (Intersect) — оставляет только общую область;
• Исключение (Exclude) — удаляет пересекающиеся части.

Для создания дырки используется именно Subtract, так как он позволяет «прожечь» отверстие в нижней фигуре.

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

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

1. Откройте Figma и создайте новый файл или фрейм.
2. Нарисуйте основную фигуру — например, прямоугольник или круг. Это будет фон, в котором вы сделаете дырку.
3. Нарисуйте вторую фигуру (например, круг или звезду) поверх первой. Она определит форму отверстия.
4. Убедитесь, что вторая фигура находится выше по стеку объектов. Если нужно, используйте Ctrl+] (Cmd+]) для поднятия.
5. Выделите обе фигуры одновременно (удерживайте Shift и кликайте).
6. На панели справа найдите раздел Boolean operations (Булевы операции).
7. Нажмите иконку Subtract (минус в квадрате).

После этого нижняя фигура сохранит свой цвет и размер, но в месте пересечения с верхней появится прозрачное отверстие.

Как проверить, что дырка сделана правильно?

• Поместите под фигуру слой другого цвета — он должен просвечивать через отверстие.
• Выберите фигуру с дыркой: в векторном редакторе (режим редактирования путей) вы увидите несколько контуров — внешний и внутренний (дырка).
• Попробуйте изменить цвет фигуры — отверстие останется прозрачным.

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

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

Ошибка 1: Неправильный порядок фигур

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

Ошибка 2: Применение Subtract к группам или тексту

Subtract работает только с векторными фигурами. Если вы попытаетесь применить его к тексту, изображению или группе, Figma либо проигнорирует команду, либо преобразует объект в вектор (что может исказить шрифт).

Ошибка 3: Забыть о прозрачности фона

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

Продвинутые техники: маски, компоненты и автослой

После освоения базового метода можно использовать более гибкие подходы, особенно при работе с системами дизайна и повторяющимися элементами.

Использование масок (Masks)

Альтернатива Subtract — frame-based masking. Создайте фрейм, поместите в него фоновую фигуру, затем добавьте сверху фигуру-маску и нажмите «Create Mask» (Ctrl+Alt+M). Этот метод даёт больше контроля, так как маска остаётся редактируемой отдельно.

Работа с компонентами и вариантами

Если вы делаете кнопку с дыркой и хотите использовать её как компонент, учтите: Subtract применяется на уровне вектора. Вы можете создать несколько вариантов — с дыркой и без — и переключать их через instance properties.

Автослой и дырки

В сочетании с Auto Layout Subtract работает корректно, но только если дырка не влияет на размеры контента. Если вы используете текст или иконку рядом с фигурой-дыркой, Auto Layout будет учитывать только внешние границы.

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

Интервью с Дмитрием Лебедевым, арт-директором дизайн-студии «Вектор»

— В своих проектах мы часто используем дырки в фигурах для создания современных эффектов: например, кнопки с «окошками», сквозь которые виден фон. Главное — понимать разницу между Subtract и маскированием. Subtract — это «жёсткое» изменение формы, подходящее для статичных элементов. Маски — для динамических, когда форма отверстия может меняться.

— Мы рекомендуем использовать Subtract в иконках, логотипах, статичных элементах UI. А вот для интерактивных компонентов, где нужно показать состояние загрузки или прогресс, лучше применять маски. Это даёт гибкость при прототипировании.

— Также важно помнить о доступности: если дырка используется в кнопке, убедитесь, что она не нарушает читаемость текста или контраст.

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

Заключение

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

• Для дырки используйте булеву операцию «Вычесть» (Subtract).
• Верхняя фигура вычитается из нижней — следите за порядком в стеке.
• Subtract работает только с векторными фигурами.
• Маски — альтернатива Subtract для гибких и редактируемых решений.
• При экспорте выбирайте форматы с поддержкой прозрачности: PNG или SVG.