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

Когда вы работаете в Figma, создание сложных визуальных композиций — это не просто перетаскивание элементов, а точная архитектура форм. Одна из самых частых задач, с которой сталкиваются дизайнеры UI/UX, — вставка одной фигуры внутрь другой, особенно когда речь идёт о многоуровневой вложенности: фигура в фигуре в фигуре. Это не просто технический приём, а мощный инструмент для создания глубины, иерархии и интерактивности в интерфейсах. Многие ошибочно полагают, что Figma не поддерживает вложенность более чем на два уровня, но на самом деле — поддерживает, и делает это гибко, если знать, как. Главное — не просто складывать формы, а управлять их взаимодействием через режимы объединения, маскирования и группировки.

Что такое маска вырезания и зачем она нужна

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

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

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

Вот как правильно вставить одну фигуру внутрь другой, а затем — третью внутрь результата:

1. Создайте первую (внешнюю) фигуру — например, прямоугольник. Это будет ваша основная рамка.
2. Над ней разместите вторую фигуру — скажем, круг. Убедитесь, что круг полностью перекрывает ту часть прямоугольника, где вы хотите видеть содержимое.
3. Выделите оба слоя: сначала круг (маска), затем прямоугольник (объект). Порядок важен — маска должна быть выше в списке слоёв.
4. Нажмите Cmd+Alt+M (Mac) или Ctrl+Alt+M (Windows). Теперь прямоугольник стал видимым только в пределах круга.
5. Создайте третью фигуру — например, маленький квадрат. Поместите его внутрь уже маскированного круга.
6. Выделите квадрат и группу, состоящую из круга и прямоугольника. Нажмите Cmd+G, чтобы сгруппировать их.
7. Теперь выделите группу и новую фигуру (квадрат), снова нажмите Cmd+Alt+M. Квадрат теперь ограничивает видимость всей предыдущей вложенности.

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

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

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

• Неправильный порядок слоёв. Если вы выделите сначала объект, а потом маску — Figma не создаст маску. Результат: ничего не произойдёт. Всегда проверяйте: маска должна быть выше в панели Layers.
• Использование булевых операций вместо маски. Вычитание или пересечение форм разрушают исходные объекты. Если вы позже захотите заменить изображение или изменить форму — придётся всё пересоздавать.
• Не группировка перед вложением. Если вы пытаетесь вложить третью фигуру в маску без группировки — Figma может применить маску только к одному слою. Результат: неожиданные обрезки и потеря структуры.
• Попытка маскировать текст. Текст нельзя использовать как маску, но его можно маскировать. Не пытайтесь сделать текст маской — он просто не сработает.

Чтобы избежать этих ошибок, всегда используйте следующий чек-лист перед применением маски:
— Маска — сверху в списке слоёв?
— Объект — под маской?
— Все слои выбраны (не только один)?
— Вы используете Cmd+Alt+M, а не Cmd+Shift+M (это объединение, а не маска)?

Продвинутые техники: вложение нескольких уровней

Трёхуровневая вложенность — это только начало. На практике дизайнеры используют 4–5 уровней масок для создания сложных эффектов: например, круглая кнопка с градиентной тенью внутри прозрачного овала, который, в свою очередь, обрезается по форме иконки.

Для этого используйте группировку на каждом этапе. Вот как это работает:

1. Создайте форму A (например, звезда).
2. Создайте форму B (круг) и поместите её поверх A.
3. Примените маску: B → A → Cmd+Alt+M. Получилась звезда в круге.
4. Создайте форму C (квадрат) и поместите её поверх группы.
5. Сгруппируйте звезду с кругом (Ctrl+G).
6. Выделите квадрат и группу → Cmd+Alt+M. Теперь звезда видна только в квадрате.
7. Повторите шаги для четвёртого уровня: добавьте треугольник, сгруппируйте всё, примените новую маску.

Такой подход позволяет создавать сложные анимационные ключевые кадры, интерактивные микроанимации и уникальные UI-элементы, которые невозможно реализовать без вложенной маскировки.

Маска vs булевы операции: в чём разница

Многие путают маску вырезания с булевыми операциями (объединение, вычитание, пересечение, исключение). Разница фундаментальна.

Пример: если вы делаете карточку с аватаром, который должен меняться на разных экранах — маска идеальна. Булево вычитание — только если вы создаёте статичную иконку, которая не будет меняться.

Реальные кейсы: где применяется вложенная фигура

Вот три реальных примера, где вложенная маска — не роскошь, а необходимость:

• Карточки с аватарами в кругах. В приложениях вроде Telegram или LinkedIn аватары часто вписаны в круги, которые, в свою очередь, находятся внутри прямоугольных карточек. Это создаёт чёткую визуальную иерархию.
• Фильтры и чекбоксы с анимацией. При наведении на чекбокс может появляться кружок с градиентом, внутри которого — значок галочки. Галочка — маска, кружок — маска для градиента. Всё это вложено в прямоугольник кнопки.
• Кастомные иконки с эффектом «окна». Например, иконка «настройки» — это треугольник с отверстием. Внутри отверстия — изображение. Треугольник — маска, отверстие — маска для изображения. Такой приём часто используется в дизайн-системах для минимализма.

Эти примеры не требуют плагинов или внешних инструментов — только понимание масок и правильная структура слоёв.

Экспертное мнение: как дизайнеры используют вложенность на практике

Артём работает над дизайн-системой для финансового приложения, где каждая кнопка имеет 4 состояния: обычное, наведение, нажатие, загрузка. Вместо того чтобы создавать 4 отдельные компоненты, он использует одну базовую маску с вложенными слоями. В зависимости от состояния он просто заменяет изображение или цвет внутри маски — и все анимации работают плавно.

Он также использует маски для создания «фрагментированных» эффектов: например, когда часть текста выглядит как «вырезанная» из фона. Это достигается путём вложения текста в маску-фигуру, а затем маскируя саму маску ещё одной формой.

Часто задаваемые вопросы

Заключение

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

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

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