Как наложить фигуру на фигуру в фигме

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

Основные методы наложения фигур

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

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

Для успешного наложения важно понимать порядок слоёв. В Figma верхние объекты перекрывают нижние. Поэтому если вы хотите, чтобы круг служил маской для квадрата, он должен находиться выше в панели слоёв. Перемещать слои можно через правую панель или горячие клавиши (Ctrl+[ и Ctrl+]).

Когда использовать маски, а когда — булевы операции?

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

• Маскирование: сохраняет исходные объекты, позволяет редактировать содержимое внутри рамки.
• Булевы операции: создают новый векторный контур, изменяя геометрию.
• Группировка с прозрачностью: визуальное наложение без изменения формы (например, полупрозрачные оверлеи).

Как использовать маски в Figma

Маскирование — один из самых мощных инструментов в Figma. Он позволяет показывать содержимое одного слоя только в пределах границ другого. Это работает как «обрезка по контуру». Например, вы можете поместить изображение внутрь звезды или текст — внутрь круга.

Процесс прост: выберите два объекта — тот, который будет маской (верхний), и тот, что будет скрыт/обрезан (нижний). Затем примените маску. Важно: маска всегда должна быть верхним объектом в стеке. Если это не так, Figma не позволит создать маску.

1. Создайте две фигуры: например, прямоугольник и круг.
2. Переместите круг выше прямоугольника в панели слоёв.
3. Выделите оба объекта (Shift + клик).
4. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).
5. Готово: прямоугольник теперь виден только внутри круга.

Типы масок и их особенности

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

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

Булевы операции для объединения фигур

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

Доступны четыре основных типа:

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

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

Пошаговый пример: создание капли через Union

1. Нарисуйте круг (инструмент O).
2. Нарисуйте треугольник ниже круга.
3. Выделите оба объекта.
4. Нажмите кнопку Union в верхней панели.
5. Используйте Pen Tool или Corner Radius, чтобы скруглить угол.

Практические примеры и решения задач

Рассмотрим реальные кейсы, где наложение фигур необходимо. Первый — аватарка пользователя в виде круга. У вас есть прямоугольное фото, но нужно, чтобы оно отображалось только в круге. Решение: создайте круг, поместите его над фото, выделите оба и нажмите Cmd+Option+M.

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

Третий случай — создание прогресс-бара с закруглёнными краями. Верхний слой (заполнение) должен налагаться на нижний (фон). Здесь подойдёт простое наложение с изменением ширины верхнего прямоугольника. Никаких масок не нужно — только прозрачность и z-индекс.

Как наложить фигуру на текст?

Да, это возможно. Текст в Figma можно использовать как маску. Создайте текст, например, «HELLO», поместите изображение или градиент выше, выделите оба и примените маску. Результат — текст, заполненный изображением.

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

• Создайте фоновый слой.
• Добавьте текст поверх.
• Выделите фон и текст.
• Нажмите Subtract.

Теперь у вас есть форма с «дырками» в виде букв.

Частые ошибки и как их избежать

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

Ещё одна ошибка — попытка применить маску к группе без предварительной подготовки. Если у вас группа из нескольких объектов, и вы хотите, чтобы вся группа была скрыта по форме, сначала сгруппируйте её, затем добавьте маску сверху.

Советы по производительности

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

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

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

— Елена Ковалёва, старший продукт-дизайнер, Figma Ambassador

Она отмечает, что маскирование особенно полезно при создании адаптивных компонентов. Например, кнопка с разными формами: круглая, прямоугольная, скошенная. Используя маски и варианты компонентов, можно быстро переключаться между ними.

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

Заключение

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

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