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

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

Как работает вырезание объектов: основы

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

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

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

Типы Boolean Operations в Figma

Figma предлагает четыре основные операции для комбинирования фигур:

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

Именно Subtract является центральным инструментом для задачи «вырезать объект». Его можно найти в верхнем тулбаре при выделенных фигурах или использовать горячую клавишу.

Пошаговое руководство: как вырезать объект через Subtract

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

1. Создайте базовую фигуру — это будет объект, из которого вы будете «вырезать». Например, прямоугольник или круг. Нарисуйте его с помощью инструментов Vector, Rectangle или Ellipse.
2. Добавьте вторую фигуру поверх первой — это будет «вырезающий» элемент. Он должен частично или полностью перекрывать целевую фигуру. Например, круг внутри прямоугольника.
3. Убедитесь в правильном порядке слоёв — вырезающая фигура должна быть выше в стеке. Проверьте это в панели Layers. При необходимости используйте Ctrl+] (Cmd+] на Mac), чтобы поднять слой.
4. Выделите оба объекта — зажмите Shift и кликните по каждому, или выделите рамкой. Важно выбрать именно два объекта: ни больше, ни меньше (для Subtract).
5. Нажмите кнопку «Subtract» в верхнем тулбаре или используйте сочетание клавиш Ctrl+- (Cmd+- на Mac).

После выполнения операции Figma объединит фигуры в один векторный объект, где из нижней формы будет удалена область, покрытая верхней. Результат нельзя разгруппировать стандартным способом — только через «Detach from vector network» (Отделить от векторной сети).

Горячие клавиши для эффективной работы

Работа с Boolean Operations ускоряется, если использовать сочетания клавиш:

Маскирование вместо вырезания: альтернативный подход

Не во всех случаях Subtract — лучшее решение. Иногда вам нужно временно скрыть часть объекта без изменения его векторной структуры. В таких ситуациях на помощь приходит masking (маскирование).

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

Чтобы создать маску:

• Поместите объект-маску выше целевого слоя в панели Layers.
• Выделите оба слоя.
• Щёлкните правой кнопкой и выберите «Use as Mask» (Использовать как маску) или нажмите Ctrl+Alt+M (Cmd+Option+M на Mac).

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

Когда использовать маски, а когда — Subtract?

Выбор между этими двумя методами зависит от задачи:

• Используйте Subtract, если вы создаёте постоянную форму (например, иконку с вырезанным центром) и хотите экспортировать её как вектор.
• Используйте маски, если нужна динамическая видимость — например, аватарки, карусели изображений или анимированные эффекты.

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

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

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

Ошибка: Нет кнопки Subtract

Если кнопка «Subtract» неактивна, проверьте следующее:

• Выделены ли минимум два объекта? Subtract требует хотя бы двух фигур.
• Являются ли они векторными? Текст, изображения или фреймы нельзя использовать напрямую.
• Находятся ли они в одном фрейме или группе? Объекты должны быть на одном уровне.

Если один из объектов — текст, преобразуйте его в вектор: выделите текст и нажмите Ctrl+Shift+O (Cmd+Shift+O на Mac).

Ошибка: Вырезание не работает или даёт странный результат

Это часто происходит из-за порядка слоёв. Figma всегда вычитает верхний объект из нижнего. Если вы не видите изменений, возможно, вырезающая фигура находится под основной. Переместите её выше с помощью Ctrl+] или вручную в панели Layers.

Также учтите, что Subtract не работает с группами, если они не являются векторными сетями. Разгруппируйте объекты (Ctrl+Shift+G) и повторите операцию.

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

После применения Subtract объект становится частью векторной сети. Вы не можете просто «разгруппировать» его и изменить форму. Чтобы вернуть контроль:

• Выделите объект.
• Нажмите правой кнопкой → «Detach from vector network».
• Теперь вы можете редактировать точки пути с помощью инструмента Pen или Vector.

Однако оригинальные фигуры потеряны. Поэтому рекомендуется сохранять копии до применения операции.

Продвинутые техники: работа с векторными сетками и фреймами

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

Создание многослойных вырезов

Вы можете применять Subtract несколько раз к одному объекту. Например, чтобы сделать решётку из квадратов:

• Создайте большой прямоугольник — это фон.
• Нарисуйте маленький квадрат — это «дырка».
• Скопируйте квадрат и расставьте по сетке.
• Выделите фон и все квадраты.
• Нажмите «Subtract» — Figma вычтет все квадраты из фона.

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

Работа с Auto Layout и масками

Auto Layout и маскирование могут работать вместе. Например, вы можете создать карточку с аватаркой, где изображение обрезается по кругу с помощью маски. При этом сама карточка остаётся в Auto Layout — она адаптируется под текст, а изображение автоматически масштабируется.

Использование плагинов для сложных вырезов

Для задач, выходящих за рамки стандартных возможностей, помогут плагины. Например:

• Vector Painter — позволяет рисовать по векторам и создавать сложные вырезы кистью.
• Boolr — расширенный инструмент для Boolean Operations с поддержкой нескольких фигур и предварительным просмотром.
• Masking Tool — упрощает создание масок и их редактирование.

Эти инструменты экономят время при работе с сотнями иконок или сложными визуальными эффектами.

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

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

Также Дмитрий отмечает важность организации слоёв: «Перед тем как вырезать, всегда называйте слои и группируйте их. Иначе через неделю вы не поймёте, что куда входило».

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

Заключение

Вырезание объектов в Figma — это не просто техническая операция, а важный инструмент визуального дизайна. Понимание того, как работают Boolean Operations и маскирование, позволяет создавать сложные, профессиональные интерфейсы с минимальными усилиями. Главное — помнить: Subtract меняет структуру объекта навсегда, а маски остаются гибкими и редактируемыми.

• Для вырезания используйте операцию Subtract между двумя векторными фигурами.
• Верхний объект вычитается из нижнего — порядок слоёв критически важен.
• Маскирование — альтернатива Subtract для динамического контента.
• Преобразуйте текст и изображения в вектор или используйте маски.
• Используйте плагины и горячие клавиши для ускорения работы.