Как создать обтравочную маску в фигме

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

Что такое обтравочная маска в Figma

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

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

Figma поддерживает маски как для векторных фигур, так и для растровых изображений. При этом маска может быть составной — из нескольких объединённых объектов. Это открывает возможности для сложных композиций, которые ранее требовали экспорта в Photoshop или Illustrator.

Как создать обтравочную маску: пошаговая инструкция

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

1. Создайте или импортируйте объект, который вы хотите «обрезать» — это может быть изображение, текст, группа фигур или даже другой маскируемый слой.
2. Нарисуйте фигуру, которая будет служить маской. Это может быть прямоугольник, круг, произвольный путь или сложная векторная форма. Главное — она должна полностью или частично перекрывать объект, который вы хотите ограничить.
3. Разместите маскирующую фигуру точно поверх объекта. Убедитесь, что она находится выше в стеке слоёв. Проверить это можно в панели Layers — маска должна быть выше целевого слоя.
4. Выделите оба слоя: сначала маску, затем объект (удерживайте Shift при клике). Важно: порядок выделения влияет на результат. Лучше выделять маску первой.
5. Нажмите Ctrl+Alt+M (на Mac — Cmd+Option+M) или щёлкните правой кнопкой мыши и выберите «Use as mask».

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

Для удобства можно скрыть маску, отключив галочку «Mask» в панели Properties. Это не удаляет маску — просто временно отключает её применение. Отличный способ для сравнения версий с маской и без.

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

Маски в Figma — это не просто «обрезка по форме». Их можно комбинировать, анимировать и использовать в динамических системах.

Маска из нескольких фигур

Если вам нужно создать маску сложной формы — например, с вырезанным окном внутри — объедините несколько фигур в одну. Выделите все фигуры, которые должны составить маску, и нажмите Ctrl+Alt+J (или Cmd+Option+J). Это объединит их в один векторный путь. Теперь этот объединённый объект можно использовать как маску. Важно: объединение работает только с фигурами, а не с текстом или изображениями.

Маски с текстом

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

При этом текст остаётся редактируемым. Можно менять шрифт, размер, межбуквенные интервалы — маска обновится мгновенно.

Маски в компонентах и вариантах

Если вы создаёте дизайн-систему, маски можно внедрить в компоненты. Например, вы делаете карточку с разными формами аватаров: круг, овал, полукруг. Создайте один компонент с маской, а затем используйте Variants для переключения между разными масками. Это экономит время и гарантирует согласованность.

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

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

• Маска не вверху в стеке слоёв — если маска ниже объекта, Figma не позволит применить её. Решение: всегда проверяйте порядок слоёв в панели Layers.
• Маска не имеет заливки — если фигура-маска пустая (нет заливки и обводки), Figma не распознаёт её как маску. Решение: добавьте любую заливку, даже белую с прозрачностью 1%.
• Использование незамкнутых путей — если вы рисуете маску с помощью Pen Tool и забыли замкнуть путь, маска не сработает. Решение: всегда проверяйте, что начальная и конечная точки совпадают.
• Попытка маскировать группу с маской — Figma не позволяет применять маску к слою, который уже является маской. Решение: разгруппируйте или примените маску на более низком уровне.
• Игнорирование маски в режиме Prototype — маски не работают в интерактивных прототипах, если вы не экспортируете их как изображения. Решение: для анимаций используйте маски только в статических макетах, а для интерактивных элементов — компоненты с предварительно обрезанными изображениями.

Практические кейсы: где и зачем применять

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

1. Текст с фоновым изображением

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

2. Кастомные аватары

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

3. Анимации и переходы

Хотите, чтобы при наведении на кнопку изображение «вытекало» из круга? Используйте маску + анимацию изменения формы маски. Хотя Figma не поддерживает полноценную анимацию масок, вы можете создать несколько состояний компонента с разными масками и переключать их в прототипе.

4. Имитация стека слоёв

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

Экспертное мнение: от дизайн-систем к анимациям

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

Она рекомендует всегда использовать маски в компонентах, а не в отдельных файлах. Также советует именовать маски: например, «Mask — Avatar Circle» — так их легче находить в панели Layers, особенно в сложных макетах с сотнями слоёв.

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

Заключение

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

• Обтравочная маска — неразрушающий инструмент, сохраняющий исходные слои.
• Маска должна быть выше в стеке слоёв и иметь непрозрачный контур.
• Текст можно использовать как маску только после конвертации в вектор.
• Маски идеально подходят для компонентов, дизайн-систем и прототипов.
• Частая ошибка — игнорирование заливки маски; всегда проверяйте её наличие.