502
2025-11-26 12:20:38

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

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

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

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

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

Пошаговое руководство по вырезанию 

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

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

Подготовка и планирование

Прежде чем браться за "нож", представьте конечную цель.

  • Что будет фоном? (Основная фигура)
  • Какой формы и размера должно быть отверстие? (Фигура-нож)
  • Нужно ли отверстие с сложной геометрией? (Возможно, стоит использовать готовую иконку или текст).

Создание основы 

  1. Возьмите инструмент Rectangle (R) или Ellipse (O).
  2. Создайте фигуру. Это будет объект, из которого мы вычитаем.
  3. Важно: Заливка и обводка этой фигуры будут основой для итогового объекта.

Создание "ножа" 

  1. Нарисуйте вторую фигуру (например, круг Ellipse (O)), которая будет играть роль "ножа".
  2. Критически важный момент: Расположение в иерархии слоев. Перейдите на панель 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 или клик по пустой области холста.

Создание нескольких отверстий

Вам не нужно применять операцию для каждого отверстия по отдельности.

  1. Создайте одну основную фигуру.
  2. Создайте несколько фигур-"ножей", расположив их все поверх основы.
  3. Выделите все фигуры разом (и основу, и все ножи).
  4. Примените Subtract (Ctrl или Cmd + /).

Figma вычтет все верхние фигуры из одной нижней. В слое Subtract вы увидите список всех использованных фигур.

Использование текста в качестве "ножа"

Один из самых мощных приёмов!

  1. Создайте фигуру-основу.
  2. Напишите текст инструментом Text (T). Расположите его поверх фигуры.
  3. Выделите и фигуру, и текстовый слой.
  4. Примените Subtract.

Текст будет вырезан из фигуры, как одно сплошное отверстие! Это отлично подходит для плакатов, стильных надписей и т.д.

Работа с обводкой и заливкой

  • Заливка: Применяется ко всей результирующей фигуре, включая пространство вокруг отверстий.
  • Обводка: Весьма важный момент! Обводка применяется и к внешнему контуру, и к контуру каждого отверстия. Это именно то, что нужно для создания рамок. Если вы вырежете круг из квадрата, вы получите "бублик" с обводкой как снаружи, так и внутри.
  • Если вам нужна обводка только по внешнему контуру, продублируйте фигуру (Ctrl+D или Cmd+D), уберите у копии все Boolean операции (сделайте её снова простой фигурой), удалите заливку и оставьте только обводку. Расположите эту копию под фигурой с отверстием.

Вывод

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

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

Название операции  Краткое описание Результат Пример использования
Объединение Создает одну новую фигуру из всех выделенных. Форма с контуром, охватывающим все исходные фигуры. Создание сложного силуэта из простых форм.
Вычитание  Вырезает верхние фигуры из нижней. Фигура с отверстиями. Создание рамок, букв "О", "А", сложных прорезей.
Пересечение  Оставляет только область пересечения всех фигур. Фигура, которая была только в зоне наложения. Создание ограниченных, сложных форм из наложенных друг на друга.
Исключение  Удаляет области, где фигуры пересекаются. Обратное "Пересечению". Сохраняются все непересекающиеся части. Создание "рамочных" эффектов или комбинированных логотипов.
Объединить  Устаревшая операция. Аналогична Union. Аналогичен Union. Рекомендуется использовать Union.

 

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

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

Сделайте первый шаг
Выберите готовый шаблон сайта и запустите свой интернет-магазин уже сегодня
Начните бесплатно