Как вырезать внутри фигуры в фигме
В мире цифрового дизайна способность создавать сложные и выразительные формы является не просто техническим навыком, а настоящей суперсилой. Представьте себе: вы разрабатываете интерфейс и вам нужен элегантный элемент навигации в виде кольца; работаете над логотипом с стилизованной буквой "О"; создаёте карточку товара с декоративным вырезом - во всех этих случаях необходимо освоить искусство вырезания отверстий внутри фигур.
Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.
Figma, как современный и мощный инструмент для дизайнеров, предлагает элегантное решение этой задачи через систему Boolean Operations (Булевых операций). В отличие от традиционных методов, где вырезание часто было необратимым и разрушающим, Figma подходит к процессу с философией неразрушающего редактирования. Это означает, что каждая ваша операция сохраняет гибкость для будущих изменений и экспериментов.
Данное руководство проведёт вас от фундаментальных основ до продвинутых техник работы с операцией Subtract (Вычитание). Мы не просто изучим "как нажать нужную кнопку", но глубоко поймём логику инструмента, исследуем тонкости работы со слоями, заливками и обводками, а также разберём реальные кейсы применения. Это знание станет краеугольным камнем в вашем умении создавать по-настоящему сложную и профессиональную векторную графику.
Пошаговое руководство по вырезанию
Прежде чем приступить к созданию сложных форм и визуальных эффектов, необходимо заложить прочный фундамент. Это пошаговое руководство предназначено для того, чтобы вы с нуля, без лишней суеты, освоили основной механизм вырезания - операцию Subtract.
Мы разберем процесс на элементарные действия, обращая внимание на каждую деталь, от выбора инструмента до порядка слоев. Даже если вы никогда раньше не работали с векторными операциями, выполнив эти шаги, вы получите предсказуемый и профессиональный результат и поймете сам принцип, который лежит в основе более сложных техник.
Подготовка и планирование
Прежде чем браться за "нож", представьте конечную цель.
- Что будет фоном? (Основная фигура)
- Какой формы и размера должно быть отверстие? (Фигура-нож)
- Нужно ли отверстие с сложной геометрией? (Возможно, стоит использовать готовую иконку или текст).
Создание основы
- Возьмите инструмент Rectangle (R) или Ellipse (O).
- Создайте фигуру. Это будет объект, из которого мы вычитаем.
- Важно: Заливка и обводка этой фигуры будут основой для итогового объекта.
Создание "ножа"
- Нарисуйте вторую фигуру (например, круг Ellipse (O)), которая будет играть роль "ножа".
- Критически важный момент: Расположение в иерархии слоев. Перейдите на панель Layers (если её нет, откройте через меню View - Layers или горячей клавишей Ctrl+Y или Cmd+Y). Фигура-"нож" должна находиться выше фигуры-основы. Если это не так, просто перетяните её мышью. Почему это важно? Figma всегда вычитает верхние объекты из нижних. Это железное правило.
Выделение и применение операции
Выделите оба объекта. Можно кликнуть с зажатым Shift, либо просто обвести их рамкой выделения.
Способы применения Subtract:
- Горячие клавиши (Самый быстрый способ): Ctrl + / (Win) или Cmd + / (Mac).
- Через панель инструментов: Нажмите на иконку с двумя квадратами в верхней панели и выберите Subtract.
- Через правый клик: Кликните правой кнопкой мыши по выделенным объектам, выберите Group Selection - Subtract.
Результат и структура слоя
Визуально: В фигуре-основе появилось отверстие в форме "ножа".
На панели Layers:
- Исчезли два отдельных слоя.
- Появился один новый слой с особым значком Subtract.
- Если вы раскроете этот слой (клик на стрелочку), то внутри увидите обе исходные фигуры. Figma сохранила их!

Продвинутые техники и тонкости работы с отверстиями
После того как вы освоили базовый принцип, наступает время раскрыть весь потенциал этого инструмента. Настоящая мощь Figma заключается не в самом факте вырезания, а в возможности динамически управлять результатом. Этот раздел посвящен тонкостям, которые превращают статичное отверстие в полностью редактируемый и адаптивный элемент вашего дизайна.
Вы узнаете, как работать с несколькими отверстиями одновременно, использовать текст в качестве «резца» и глубоко редактировать форму после применения операции. Эти приемы переводят работу с векторной графикой на качественно новый уровень, экономя ваше время и открывая простор для экспериментов.Редактирование отверстия после создания
Это "магия" неразрушающего редактирования.
Выделите составной объект (слой Subtract). Дважды кликните по нему (или нажмите Enter). Вы войдёте в режим изоляции (Isolation Mode). Всё вокруг затемнится, а на панели слоёв вы увидите только вложенные фигуры. Теперь вы можете:
- Переместить отверстие: Просто перетащите фигуру-нож.
- Изменить размер/форму: Потяните за маркеры трансформации вокруг фигуры-ножа.
- Кардинально изменить форму: Выделите фигуру-нож и на панели Design (справа) смените её тип. Например, превратите круг (Ellipse) в многоугольник (Polygon) или звезду (Star). Отверстие мгновенно примет новую форму!
- Изменить параметры сложной фигуры: Если это звезда или многоугольник, вы можете динамически менять количество лучей/углов и скругление.
Выход из режима редактирования: Esc или клик по пустой области холста.
Создание нескольких отверстий
Вам не нужно применять операцию для каждого отверстия по отдельности.
- Создайте одну основную фигуру.
- Создайте несколько фигур-"ножей", расположив их все поверх основы.
- Выделите все фигуры разом (и основу, и все ножи).
- Примените Subtract (Ctrl или Cmd + /).
Figma вычтет все верхние фигуры из одной нижней. В слое Subtract вы увидите список всех использованных фигур.
Использование текста в качестве "ножа"
Один из самых мощных приёмов!
- Создайте фигуру-основу.
- Напишите текст инструментом Text (T). Расположите его поверх фигуры.
- Выделите и фигуру, и текстовый слой.
- Примените Subtract.
Текст будет вырезан из фигуры, как одно сплошное отверстие! Это отлично подходит для плакатов, стильных надписей и т.д.
Работа с обводкой и заливкой
- Заливка: Применяется ко всей результирующей фигуре, включая пространство вокруг отверстий.
- Обводка: Весьма важный момент! Обводка применяется и к внешнему контуру, и к контуру каждого отверстия. Это именно то, что нужно для создания рамок. Если вы вырежете круг из квадрата, вы получите "бублик" с обводкой как снаружи, так и внутри.
- Если вам нужна обводка только по внешнему контуру, продублируйте фигуру (Ctrl+D или Cmd+D), уберите у копии все Boolean операции (сделайте её снова простой фигурой), удалите заливку и оставьте только обводку. Расположите эту копию под фигурой с отверстием.
Вывод
Итак, искусство вырезания отверстий в Figma, основанное на операции Subtract, - это гораздо больше, чем просто технический приём. Это краеугольный камень неразрушающего векторного моделирования, который открывает путь к созданию сложных и профессиональных дизайнов.
Освоив эту технику, вы выходите за рамки простого комбинирования примитивов и начинаете полноценно лепить форму, оперируя не только тем, что добавляется, но и тем, что убирается. Ключевая философия здесь - сохранение гибкости на всех этапах работы: любое отверстие можно переместить, трансформировать или даже полностью изменить его геометрию благодаря режиму изоляции и сохранению исходных контуров. Для систематизирования информации мы подготовили таблицу:
| Название операции | Краткое описание | Результат | Пример использования |
|---|---|---|---|
| Объединение | Создает одну новую фигуру из всех выделенных. | Форма с контуром, охватывающим все исходные фигуры. | Создание сложного силуэта из простых форм. |
| Вычитание | Вырезает верхние фигуры из нижней. | Фигура с отверстиями. | Создание рамок, букв "О", "А", сложных прорезей. |
| Пересечение | Оставляет только область пересечения всех фигур. | Фигура, которая была только в зоне наложения. | Создание ограниченных, сложных форм из наложенных друг на друга. |
| Исключение | Удаляет области, где фигуры пересекаются. | Обратное "Пересечению". Сохраняются все непересекающиеся части. | Создание "рамочных" эффектов или комбинированных логотипов. |
| Объединить | Устаревшая операция. Аналогична Union. | Аналогичен Union. | Рекомендуется использовать Union. |
Понимание логики булевых операций в целом, отраженной в сводной таблице, превращает этот инструмент из простого «резца» в целый арсенал для творчества. Вы начинаете интуитивно предсказывать результат взаимодействия фигур, будь то создание единого силуэта через Union, выделение сложной области пересечения или же именно вырезание внутреннего пространства. Способность использовать в качестве «ножа» не только геометрические фигуры, но и текст, делает эту технику незаменимой для типографики и создания уникальных графических композиций.
Таким образом, уверенное владение операцией Subtract - это не просто пункт в списке навыков, а качественный скачок в мышлении дизайнера. Оно позволяет подходить к созданию иконки, интерфейсного элемента или иллюстрации как к осмысленному процессу конструирования, где каждая деталь, включая внутренние полости, управляема и подчинена общей концепции. Это та основа, которая делает работу в Figma по-настоящему эффективной, точной и безгранично творческой.
